/** CSRD Adoption page — /csrd-adoption.html (Figma redesign) */

/* ── Design tokens (aligned with ecoPRISM design system) ── */
.caad-page {
  --caad-green: #407775;
  --caad-green-dark: #2f6f64;
  --caad-green-text: #105447;
  --caad-heading: #343f52;
  --caad-body: #575757;
  --caad-gold: #fab430;
  --caad-gold-bright: #f4b940;
  --caad-mint: #f3f8f2;
  --caad-card: #f7f8f6;
  --caad-border: rgba(47, 111, 100, 0.12);
  --caad-border-light: rgba(64, 119, 117, 0.1);
  --caad-shadow-card: 0 6px 10px rgba(34, 34, 34, 0.03);
  --caad-shadow-timeline: 0 2px 1px rgba(0, 0, 0, 0.25), 0 4px 2px rgba(0, 0, 0, 0.25);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--caad-body);
  overflow-x: clip;
}

/* ── Typography (csrd-reporting / ecogrid / ecoprism-ai scale) ── */
.caad-h1 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--caad-heading);
}
@media (min-width: 640px) {
  .caad-h1 { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .caad-h1 { font-size: 2.75rem; }
}
@media (min-width: 1280px) {
  .caad-h1 { font-size: 3rem; }
}
.caad-h1 .caad-h1-accent {
  color: var(--caad-green-dark);
}

.caad-h2 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--caad-heading);
}
@media (min-width: 640px) {
  .caad-h2 { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .caad-h2 { font-size: 2.25rem; line-height: 1.2; }
}

.caad-h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--caad-heading);
}
@media (min-width: 1024px) {
  .caad-h3 { font-size: 1.125rem; }
}

.caad-lead {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--caad-body);
}
@media (min-width: 640px) {
  .caad-lead { font-size: 1.0625rem; }
}

.caad-body-sm {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
}

.caad-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caad-green);
  line-height: 1.25;
}

/* Eyebrow badges — match ecoprism-ai / app-pretitle sizing */
.caad-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0.375rem 1rem;
  border-radius: 6px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  color: #407775;
}
@media (min-width: 640px) {
  .caad-badge {
    padding: 0.375rem 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }
}
.caad-badge--white {
  background: rgba(255, 255, 255, 0.92);
  color: #2f6f64;
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.caad-badge--yellow {
  background: rgba(249, 212, 35, 0.25);
  color: #407775;
}
.caad-badge--mint {
  background: var(--caad-mint);
  color: #407775;
}

/* ── Scroll reveals ── */
.caad-page .js-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.caad-page .js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.caad-page .js-reveal-delay-1 { transition-delay: 0.08s; }
.caad-page .js-reveal-delay-2 { transition-delay: 0.16s; }
.caad-page .js-reveal-delay-3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .caad-page .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Section layout ── */
.caad-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) {
  .caad-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}
@media (min-width: 768px) {
  .caad-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.caad-container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .caad-container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .caad-container { padding-inline: 3rem; }
}

/* ── Hero ── */
.caad-hero {
  position: relative;
  margin-top: -5rem;
  padding-top: 6rem;
  padding-bottom: 3rem;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(249, 212, 35, 0.1) -7.5%,
    rgba(249, 212, 35, 0.5) 48.84%,
    rgba(180, 173, 68, 0.65) 73.26%,
    rgba(122, 146, 92, 0.82) 89.22%,
    #407775 105.17%
  );
}
@media (min-width: 768px) {
  .caad-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
}
.caad-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .caad-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}
.caad-hero-grid > * {
  min-width: 0;
}
.caad-hero-desc {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--caad-body);
  max-width: 35rem;
}
@media (min-width: 640px) {
  .caad-hero-desc { font-size: 1.125rem; }
}
.caad-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .caad-hero-actions {
    gap: 1.25rem;
    margin-top: 2.5rem;
  }
}
.caad-hero-actions .app-btn {
  width: 100%;
  justify-content: center;
}
@media (min-width: 480px) {
  .caad-hero-actions .app-btn {
    width: auto;
  }
}

/* Hero CTAs */
.caad-hero-actions .app-btn {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.caad-hero .caad-hero-step--visible.app-btn:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 12px 28px rgba(47, 111, 100, 0.32);
}
.caad-hero .caad-hero-step--visible.app-btn:active {
  transform: translate3d(0, -1px, 0) scale(0.98);
}

/* Hero letter CTA */
.caad-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--caad-green-dark);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.caad-hero-link:hover {
  color: #245548;
}
.caad-hero .caad-hero-step--visible.caad-hero-link:hover {
  transform: translate3d(0, -3px, 0);
}
.caad-hero-link__text {
  position: relative;
  display: inline-block;
}
.caad-hero-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.caad-hero-link:hover .caad-hero-link__text::after {
  transform: scaleX(1);
}
.caad-hero-link svg {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.caad-hero-link:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .caad-hero .caad-hero-step--visible.app-btn:hover,
  .caad-hero .caad-hero-step--visible.caad-hero-link:hover {
    transform: none;
  }
  .caad-hero-link__text::after {
    transition: none;
  }
  .caad-hero-link:hover .caad-hero-link__text::after {
    transform: scaleX(1);
  }
}

/* Hero entrance — JS-timed sequence (left copy → right panels → left CTAs) */
.caad-hero .caad-hero-step {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.caad-hero .caad-hero-step--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .caad-hero .caad-hero-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hero update card */
.caad-update-card {
  display: flex;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(47, 111, 100, 0.12);
  background: #407775;
}
@media (min-width: 640px) {
  .caad-update-card {
    padding: 1.4375rem 1.5625rem;
  }
}
.caad-update-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4375rem;
  border-radius: 0.25rem;
  background: #f9d423;
}
.caad-update-text {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #fff;
}
.caad-update-text strong {
  color: #f9d423;
  font-weight: 600;
}
.caad-update-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.84375rem;
  font-weight: 600;
  color: #f9d423;
  text-decoration: none;
}
.caad-update-link:hover {
  text-decoration: underline;
}

/* Hero stats grid */
.caad-stats-wrap {
  padding: 0.8125rem;
  border-radius: 20px;
  border: 1px solid rgba(47, 111, 100, 0.12);
  background: linear-gradient(180deg, rgba(243, 248, 242, 0.85) 0%, #fff 100%);
}
.caad-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.caad-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 6.25rem;
  padding: 1rem 0.875rem;
  border-radius: 16px;
  border: 1px solid rgba(64, 119, 117, 0.1);
  background: #fff;
}
@media (min-width: 640px) {
  .caad-stat-card {
    min-height: 7rem;
    padding: 1.4375rem 1.1875rem;
  }
}
.caad-stat-value {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--caad-green-dark);
  margin-bottom: 0.625rem;
}
@media (min-width: 640px) {
  .caad-stat-value {
    font-size: 1.875rem;
    margin-bottom: 0.875rem;
  }
}
.caad-stat-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--caad-body);
}
@media (min-width: 640px) {
  .caad-stat-label { font-size: 0.875rem; }
}

/* ── What is CSRD timeline ── */
.caad-csrd-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .caad-csrd-grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
.caad-csrd-grid > * {
  min-width: 0;
}
.caad-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 1.75rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .caad-timeline { padding-left: 2.25rem; }
}
.caad-timeline::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 0.625rem;
  bottom: 0.625rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(64, 119, 117, 0.2) 0%, rgba(64, 119, 117, 0.1) 100%);
  border-radius: 1px;
}
.caad-timeline-item {
  position: relative;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .caad-timeline-item {
    grid-template-columns: 8.25rem 1fr;
    gap: 1.25rem;
  }
}
.caad-timeline-marker {
  position: absolute;
  left: -1.75rem;
  top: 1.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  border: 6px solid var(--caad-green);
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .caad-timeline-marker {
    left: -2.25rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}
.caad-timeline-marker--highlight {
  background: #ffed96;
  border-color: var(--caad-gold);
}
.caad-timeline-date {
  padding-top: 0.75rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caad-green-dark);
  line-height: 1.45;
}
.caad-timeline-date--latest {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--caad-body);
}
.caad-timeline-card {
  padding: 1.4375rem 1.5625rem;
  border-radius: 18px;
  border: 1px solid rgba(47, 111, 100, 0.12);
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  transition:
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.caad-timeline-card:hover {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.25),
    0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.caad-timeline-card--highlight {
  border-radius: 18px;
  border: 2px solid #fab430;
  background: linear-gradient(102deg, #ffed96 1.26%, #fff 90.15%);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.caad-timeline-card--highlight:hover {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.25),
    0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.caad-timeline-card h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--caad-heading);
  margin-bottom: 0.5rem;
}
.caad-timeline-card p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
  margin: 0;
}

/* ── Three things changed (subtle gold wash — matches csrd-bg-gold-rise) ── */
.caad-changes-section {
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: linear-gradient(0deg, #f9d423 -61.29%, #fff 98.46%);
}
@media (min-width: 640px) {
  .caad-changes-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}
@media (min-width: 768px) {
  .caad-changes-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}
.caad-changes-header {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .caad-changes-header { margin-bottom: 4rem; }
}
.caad-changes-header .caad-badge {
  margin-bottom: 1rem;
}
.caad-changes-header .caad-h2 {
  margin-bottom: 0.75rem;
}
.caad-changes-header p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--caad-body);
}
.caad-changes-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .caad-changes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.caad-change-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem 1.375rem 1.625rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #407775;
  min-height: 100%;
}
@media (min-width: 640px) {
  .caad-change-card {
    padding: 2.25rem 2.0625rem 2.3125rem;
  }
}
.caad-change-card .caad-label {
  color: #f9d423;
  letter-spacing: 0.06em;
}
.caad-change-card h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.caad-change-card p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
}
.caad-change-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8125rem;
  border-radius: 100px;
  border: 1px solid rgba(249, 212, 35, 0.25);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f9d423;
  align-self: flex-start;
}

/* ── Scope section ── */
.caad-scope-header {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .caad-scope-header {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.125rem;
  }
}
.caad-threshold-card {
  padding: 1.375rem 1.4375rem;
  border-radius: 18px;
  border: 1px solid #fab430;
  background: linear-gradient(114deg, #f9d423 0%, #fff 100%);
  width: 100%;
  max-width: 22rem;
}
@media (min-width: 1024px) {
  .caad-threshold-card { width: auto; }
}
.caad-threshold-value {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a2820;
  margin-top: 0.375rem;
  margin-bottom: 0.75rem;
}
.caad-threshold-card .caad-label {
  color: #1a2820;
  font-weight: 600;
  margin-bottom: 0;
}
.caad-threshold-card p:not(.caad-threshold-value) {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--caad-body);
  margin: 0;
}

/* Scope table rows */
.caad-scope-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.caad-scope-row {
  display: grid;
  gap: 0.75rem;
  padding: 1.1875rem 1.3125rem;
  border-radius: 1.125rem;
  background: #fff;
  border: 1px solid var(--caad-border-light);
  box-shadow: var(--caad-shadow-card);
}
@media (min-width: 1024px) {
  .caad-scope-row {
    grid-template-columns: 5.875rem 1fr 8.125rem 8.125rem 9.375rem;
    align-items: start;
    gap: 0.875rem;
  }
}
.caad-scope-wave {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caad-green-dark);
  padding-top: 0.125rem;
}
.caad-scope-desc h4 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--caad-heading);
  margin-bottom: 0.25rem;
}
.caad-scope-desc p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.58;
  color: var(--caad-body);
  margin: 0;
}
.caad-scope-meta-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caad-green-dark);
  margin-bottom: 0.375rem;
}
.caad-scope-meta-value {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caad-heading);
}
.caad-scope-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.caad-scope-pill--active {
  border: 0.5px solid var(--caad-green);
  background: linear-gradient(92.16deg, rgba(64, 119, 117, 0.11) 0.55%, rgba(119, 221, 217, 0.11) 104.59%);
  color: var(--caad-green-dark);
}
.caad-scope-pill--prepare {
  border: 0.5px solid var(--caad-gold);
  background: linear-gradient(90deg, rgba(249, 212, 35, 0.18) 7.1%, rgba(255, 255, 255, 0.18) 93.4%);
  color: #1b1b1b;
}
.caad-scope-pill--out {
  border: 0.5px solid var(--caad-body);
  background: rgba(34, 34, 34, 0.06);
  color: var(--caad-body);
}
.caad-scope-pill--monitor {
  border: 0.5px solid var(--caad-green-dark);
  background: rgba(64, 119, 117, 0.08);
  color: var(--caad-green-dark);
}
.caad-scope-note {
  margin-top: 0.75rem;
  padding: 1.125rem 1.3125rem;
  border-radius: 1.125rem;
  background: var(--caad-green);
  border: 1px solid var(--caad-border-light);
}
.caad-scope-note .caad-label {
  color: var(--caad-gold-bright);
  margin-bottom: 0.375rem;
}
.caad-scope-note p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.62;
  color: #fff;
  margin: 0;
}

/* Scope rows — stacked layout on tablet/mobile */
@media (max-width: 1023px) {
  .caad-scope-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wave wave"
      "desc desc"
      "meta1 meta2"
      "pill pill";
    gap: 0.875rem;
  }
  .caad-scope-wave { grid-area: wave; }
  .caad-scope-desc { grid-area: desc; }
  .caad-scope-row > div:nth-child(3) { grid-area: meta1; }
  .caad-scope-row > div:nth-child(4) { grid-area: meta2; }
  .caad-scope-row > div:nth-child(5) { grid-area: pill; }
  .caad-scope-row > div.flex.justify-end {
    justify-content: flex-start;
  }
  .caad-scope-pill {
    white-space: normal;
    text-align: center;
  }
}

/* ── Simplified ESRS ── */
.caad-esrs-section {
  background: var(--caad-mint);
}
.caad-esrs-grid {
  display: grid;
  gap: 1.375rem;
}
@media (min-width: 1024px) {
  .caad-esrs-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 1.375rem;
    align-items: stretch;
  }
}
.caad-esrs-grid > * {
  min-width: 0;
}
.caad-esrs-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}
.caad-esrs-pretitle-wrap {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
}
.caad-esrs-pretitle-wrap .caad-badge {
  background: #fff;
  border: 1px solid rgba(47, 111, 100, 0.08);
}
.caad-burden-card {
  margin-top: 2rem;
  padding: 1.3125rem 1.375rem 1.375rem;
  border-radius: 18px;
  border: 1px solid #fab430;
  background: linear-gradient(102deg, #ffed96 1.26%, #fff 90.15%);
}
@media (min-width: 1024px) {
  .caad-burden-card {
    margin-top: auto;
  }
}
.caad-burden-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a2820;
  margin: 0 0 0.625rem;
}
.caad-burden-value {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1a2820;
  margin: 0 0 0.625rem;
}
@media (min-width: 640px) {
  .caad-burden-value { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .caad-burden-value { font-size: 2.25rem; line-height: 1.2; }
}
.caad-burden-desc {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
  margin: 0;
}
.caad-implications-card {
  border-radius: 18px;
  border: 1px solid rgba(47, 111, 100, 0.12);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06);
}
.caad-implications-header {
  padding: 1.25rem 1.375rem 1.125rem;
  background: linear-gradient(186deg, #f9d423 -49.14%, rgba(255, 255, 255, 0.98) 82.99%);
}
.caad-implications-header .caad-label {
  color: #2f6f64;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.caad-implications-header h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1a2820;
  margin: 0;
}
.caad-implications-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}
.caad-implication-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 16px;
  background: rgba(64, 119, 117, 0.06);
}
.caad-implication-item > div:last-child {
  min-width: 0;
}
@media (min-width: 640px) {
  .caad-implication-item { gap: 0.875rem; }
}
.caad-implication-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: #407775;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.caad-implication-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  display: block;
}
.caad-implication-item h4 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--caad-heading);
  margin-bottom: 0.25rem;
}
.caad-implication-item p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
  margin: 0;
}

/* ── What has not changed ── */
.caad-unchanged-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .caad-unchanged-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.caad-unchanged-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  border-radius: 1rem;
  background: var(--caad-card);
  border: 1px solid var(--caad-border);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 640px) {
  .caad-unchanged-card { padding: 1.8125rem 2.0625rem; }
}
.caad-unchanged-card > div:last-child {
  min-width: 0;
}
.caad-unchanged-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(47, 111, 100, 0.12);
}
.caad-unchanged-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: #407775;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.caad-unchanged-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  display: block;
}
.caad-unchanged-card h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--caad-heading);
  margin-bottom: 0.375rem;
}
.caad-unchanged-card p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--caad-body);
  margin: 0;
}

/* ── What to do now (subtle gold wash — matches csrd-bg-gold-wash) ── */
.caad-steps-section {
  background: linear-gradient(92deg, #f9d423 -26.68%, #fff 37.42%);
}
.caad-steps-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .caad-steps-grid {
    grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
    gap: 4rem;
  }
}
@media (min-width: 1280px) {
  .caad-steps-grid { gap: 6.8125rem; }
}
.caad-steps-grid > * {
  min-width: 0;
}
.caad-steps-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding-left: 0;
  min-width: 0;
}
.caad-steps-list::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.125rem;
  bottom: 1.125rem;
  width: 1px;
  background: linear-gradient(180deg, var(--caad-green) 0%, rgba(64, 119, 117, 0.15) 100%);
}
@media (min-width: 640px) {
  .caad-steps-list::before { left: 1.6875rem; }
}
.caad-step {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}
.caad-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #407775;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
}
@media (min-width: 640px) {
  .caad-step-num {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.caad-step-num--last {
  background: #407775;
}
.caad-step-content {
  flex: 1;
  min-width: 0;
  padding: 0.5625rem 0 0.8125rem;
  border-bottom: 1px solid var(--caad-border-light);
}
.caad-step:last-child .caad-step-content {
  border-bottom: none;
}
.caad-step-content p.caad-step-tag {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  margin: 0 0 0.5rem;
  max-width: none;
}
.caad-step-content p.caad-step-tag--urgent { color: #f23426; }
.caad-step-content p.caad-step-tag--default { color: #2f6f64; }
.caad-step-content h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--caad-heading);
  margin: 0 0 0.625rem;
}
@media (min-width: 640px) {
  .caad-step-content h3 { font-size: 1.0625rem; }
}
.caad-step-content p:not(.caad-step-tag) {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
  margin: 0;
  max-width: 43.75rem;
}

/* ── Explore more ── */
.caad-resources-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .caad-resources-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.caad-resource-card {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  padding: 1.5rem 1.375rem 1.5rem;
  border-radius: 1rem;
  background: var(--caad-card);
  border: 1px solid var(--caad-border);
  text-decoration: none;
  min-height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 640px) {
  .caad-resource-card {
    padding: 2rem 2.0625rem 2.0625rem;
  }
}
.caad-resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(47, 111, 100, 0.1);
}
.caad-resource-card .caad-label {
  margin-bottom: 0.125rem;
}
.caad-resource-card h3 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--caad-heading);
  flex: 1;
}
.caad-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caad-green-dark);
  margin-top: auto;
}
.caad-resource-link img {
  width: 0.875rem;
  height: 0.875rem;
}

/* ── FAQ ── */
.caad-faq-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .caad-faq-grid {
    grid-template-columns: minmax(0, 21.33rem) minmax(0, 1fr);
    gap: 5rem;
  }
}
.caad-faq-grid > * {
  min-width: 0;
}
.caad-faq-list {
  min-width: 0;
}
.caad-faq-item {
  border-top: 1px solid var(--caad-border);
}
.caad-faq-item:last-child {
  border-bottom: 1px solid var(--caad-border);
}
.caad-faq-trigger {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.caad-faq-trigger span {
  flex: 1;
  min-width: 0;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--caad-heading);
}
@media (min-width: 640px) {
  .caad-faq-trigger span { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .caad-faq-trigger span { font-size: 1.1875rem; }
}
.caad-faq-trigger img {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  transition: transform 0.3s ease;
}
.caad-faq-trigger[aria-expanded="true"] img {
  transform: rotate(180deg);
}
.caad-faq-trigger:focus-visible {
  outline: 2px solid var(--caad-gold);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.caad-faq-panel {
  overflow: hidden;
}
.caad-faq-panel p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--caad-body);
  padding-bottom: 1.5rem;
  margin: 0;
}

/* ── CTA ── */
.caad-cta {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
  background: var(--caad-green-dark);
}
@media (min-width: 640px) {
  .caad-cta { padding: 5rem 0; }
}
@media (min-width: 768px) {
  .caad-cta { padding: 7.5rem 0; }
}
.caad-cta-glow-right {
  pointer-events: none;
  position: absolute;
  right: -14.25rem;
  top: -10.6875rem;
  width: 44.1875rem;
  height: 39.1875rem;
  border-radius: 15.625rem;
  background: radial-gradient(ellipse at center, rgba(250, 180, 48, 0.12) 0%, rgba(250, 180, 48, 0) 70%);
}
.caad-cta-glow-left {
  pointer-events: none;
  position: absolute;
  left: -5rem;
  bottom: -5rem;
  width: 25rem;
  height: 25rem;
  border-radius: 12.5rem;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
}
.caad-cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .caad-cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .caad-cta-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 42rem;
    padding-right: 1rem;
  }
}
.caad-cta-text h2 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
  max-width: 16em;
}
@media (min-width: 640px) {
  .caad-cta-text h2 { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .caad-cta-text h2 { font-size: 2.5rem; }
}
.caad-cta-text p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 34rem;
  margin: 0;
}
@media (min-width: 640px) {
  .caad-cta-text p { font-size: 1.0625rem; }
}
.caad-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .caad-cta-actions { width: auto; }
}
.caad-cta-actions .app-btn {
  width: 100%;
  justify-content: center;
}
@media (min-width: 480px) {
  .caad-cta-actions .app-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .caad-unchanged-card:hover,
  .caad-resource-card:hover {
    transform: none;
  }
}
