@scope (#main) to (#top) {
/* Block 02 — Focus in Motion. Keep the approved field separate from live UI. */
#for-you.pain-section {
  width: var(--frame-width);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(46px, 4vw, 58px) 0 clamp(40px, 3.6vw, 52px);
  overflow: clip;
  border-radius: var(--radius-xl);
  background: #f8e9d5 url("imgs/generated/dari-recognition-focus-in-motion/background.webp") center / cover no-repeat;
  color: var(--dari-wine);
  box-shadow: none;
  animation: none;
  isolation: isolate;
}
#for-you.pain-section::before,
#for-you.pain-section::after { display: none; }
#for-you.pain-section > .recognition-heading {
  display: grid;
  justify-items: center;
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}
#for-you .recognition-heading > div { display: grid; justify-items: center; width: 100%; min-width: 0; }
#for-you .recognition-heading h2 { width: 100%; min-width: 0; }
#for-you.pain-section .eyebrow {
  margin: 0 0 8px;
  color: #9a744f;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
#for-you .recognition-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  margin-bottom: 14px;
  color: #b98644;
}
#for-you .recognition-rule::before,
#for-you .recognition-rule::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
#for-you .recognition-star { display: block; width: 12px; height: 12px; margin: 0; }
#for-you .recognition-star svg { display: block; width: 100%; height: 100%; fill: currentColor; }
#for-you.pain-section h2 {
  margin: 0;
  color: var(--dari-wine);
  font-size: clamp(44px, 3.7vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}
#for-you.pain-section .section-heading > p:not(.eyebrow) {
  max-width: 740px;
  margin: 14px auto 0;
  color: rgba(58, 3, 23, .72);
  font-size: 16px;
  line-height: 1.45;
}
#for-you .slider-shell { margin-top: clamp(10px, 1.2vw, 16px); overflow: visible; }
#for-you .card-track {
  padding: 40px max(24px, calc((100vw - 1660px) / 2 + 24px)) 88px;
  overflow-x: auto;
  overflow-y: hidden;
  perspective: none;
  scroll-behavior: auto;
  scroll-padding-left: 0;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
#for-you .card-track:focus-visible {
  outline: 1px solid rgba(58, 3, 23, .28);
  outline-offset: -1px;
}
#for-you .slider-marquee { gap: clamp(16px, 2vw, 30px); align-items: center; }
#for-you .pain-card {
  --focus: 0;
  --detail: 0;
  --angle: 0deg;
  --size: .9;
  --rise: 8px;
  --blur: 0px;
  --reveal: 50%;
  position: relative;
  flex: 0 0 clamp(320px, 23.5vw, 352px);
  height: 468px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(58,3,23,.11);
  border-radius: 24px;
  overflow: hidden;
  background: #fff9f0;
  color: var(--dari-wine);
  opacity: var(--opacity, 1);
  filter: blur(var(--blur));
  transform: translateY(var(--rise)) rotate(var(--angle)) scale(var(--size));
  transform-origin: 50% 52%;
  box-shadow: 0 18px 28px -17px rgba(72, 39, 24, .32), 0 7px 14px -10px rgba(84, 46, 27, .14);
  transition: box-shadow 240ms ease, border-color 240ms ease;
  backdrop-filter: none;
  will-change: transform;
}
#for-you .pain-card::before { display: none; }
#for-you .card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 25px;
  border-radius: inherit;
}
#for-you .card-face-paper { background: #fff9f0; color: #3a0317; }
#for-you .card-face-wine {
  z-index: 1;
  background: #3a0317;
  color: #f7e3ca;
  clip-path: inset(0 var(--reveal) 0 var(--reveal));
  pointer-events: none;
}
#for-you .card-face > * { position: relative; }
#for-you .card-face-paper .card-index,
#for-you .card-face-paper .card-summary,
#for-you .card-face-paper .pain-case { opacity: 0; }
#for-you .pain-card.is-centered {
  z-index: 2;
  border-color: rgba(230, 196, 145, .65);
  box-shadow: 0 31px 50px -24px rgba(58,3,23,.46), 0 11px 25px -17px rgba(58,3,23,.22);
}
#for-you .pain-card p { margin: 0; }
#for-you .card-index {
  min-height: 18px;
  align-self: center;
  color: inherit;
  opacity: var(--detail);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}
#for-you .card-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 16px;
  min-height: 16px;
  margin: 13px auto 20px;
  color: #b58c57;
  transform: translateY(calc((1 - var(--focus)) * 62px));
}
#for-you .card-rule::before,
#for-you .card-rule::after {
  content: "";
  width: 27px;
  height: 1px;
  background: currentColor;
  opacity: .75;
}
#for-you .card-glint { display: block; width: 9px; height: 9px; opacity: var(--detail); }
#for-you .card-glint svg { display: block; width: 100%; height: 100%; fill: currentColor; }
#for-you .pain-card h3 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: clamp(26px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  transform: translateY(calc((1 - var(--focus)) * 62px));
}
#for-you .pain-card .card-summary {
  max-width: 320px;
  min-height: 78px;
  margin: 14px auto 0;
  color: inherit;
  opacity: var(--detail);
  font-size: 14.5px;
  line-height: 1.42;
  text-align: center;
  pointer-events: none;
}
#for-you .pain-case {
  display: block;
  max-height: none;
  min-height: 0;
  margin-top: auto;
  padding: 14px 0 0;
  overflow: visible;
  border-top: 1px solid currentColor;
  color: inherit;
  opacity: var(--detail);
  transform: none;
  visibility: visible;
  transition: none;
  pointer-events: none;
}
#for-you .pain-case span {
  display: block;
  margin-bottom: 8px;
  color: inherit;
  opacity: .78;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
#for-you .pain-case q {
  display: block;
  color: inherit;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  quotes: none;
}
#for-you .pain-case q::before,
#for-you .pain-case q::after { content: none; }
#for-you .slider-controls {
  width: min(450px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 44px 38px minmax(90px, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin: -22px auto 0;
}
#for-you .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(58, 3, 23, .25);
  border-radius: 50%;
  background: rgba(255, 248, 237, .44);
  color: var(--dari-wine);
  box-shadow: none;
  backdrop-filter: none;
}
#for-you .icon-button:hover { background: #fff8ed; border-color: rgba(58,3,23,.5); box-shadow: none; }
#for-you .slider-arrow {
  display: block;
  width: 26px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}
#for-you .slider-arrow::before { display: none; }
#for-you .slider-position {
  color: var(--dari-wine);
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#for-you .slider-position [data-slider-current] { font-size: 12px; }
#for-you .slider-progress {
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(58,3,23,.2);
}
#for-you .slider-progress span {
  display: block;
  height: 100%;
  background: var(--dari-wine);
  transition: width 240ms ease;
}
@media (max-width: 700px) {
  #for-you.pain-section {
    width: calc(100vw - 28px);
    min-height: 0;
    padding: 56px 0 44px;
    background-position: 52% center;
  }
  #for-you.pain-section > .recognition-heading { width: min(540px, calc(100% - 32px)); }
  #for-you.pain-section h2 { font-size: clamp(38px, 11vw, 48px); }
  #for-you.pain-section .section-heading > p:not(.eyebrow) { margin-top: 15px; font-size: 15px; }
  #for-you .slider-shell { margin-top: 12px; }
  #for-you .card-track { padding: 40px 6vw 88px; }
  #for-you .slider-marquee { gap: 16px; }
  #for-you .pain-card { flex-basis: 84vw; max-width: 352px; height: 500px; padding: 0; }
  #for-you .card-face { padding: 25px 23px 23px; }
  #for-you .pain-card h3 { font-size: clamp(25px, 7vw, 29px); }
  #for-you .pain-card .card-summary { font-size: 14px; min-height: 96px; }
  #for-you .pain-case q { font-size: 14px; line-height: 1.32; }
  #for-you .slider-controls { grid-template-columns: 44px 38px minmax(60px,1fr) 44px; }
}
@media (max-width: 380px) {
  #for-you .pain-card { height: 540px; }
  #for-you .pain-card h3 { font-size: 25px; }
  #for-you .pain-case q { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #for-you .pain-card,
  #for-you .pain-card.is-centered { transition: none; filter: none; }
  #for-you .slider-progress span { transition: none; }
}

}

@scope (#footer) {
/* Block 02 — Focus in Motion. Keep the approved field separate from live UI. */
#for-you.pain-section {
  width: var(--frame-width);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(46px, 4vw, 58px) 0 clamp(40px, 3.6vw, 52px);
  overflow: clip;
  border-radius: var(--radius-xl);
  background: #f8e9d5 url("imgs/generated/dari-recognition-focus-in-motion/background.webp") center / cover no-repeat;
  color: var(--dari-wine);
  box-shadow: none;
  animation: none;
  isolation: isolate;
}
#for-you.pain-section::before,
#for-you.pain-section::after { display: none; }
#for-you.pain-section > .recognition-heading {
  display: grid;
  justify-items: center;
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}
#for-you .recognition-heading > div { display: grid; justify-items: center; width: 100%; min-width: 0; }
#for-you .recognition-heading h2 { width: 100%; min-width: 0; }
#for-you.pain-section .eyebrow {
  margin: 0 0 8px;
  color: #9a744f;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
#for-you .recognition-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  margin-bottom: 14px;
  color: #b98644;
}
#for-you .recognition-rule::before,
#for-you .recognition-rule::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
#for-you .recognition-star { display: block; width: 12px; height: 12px; margin: 0; }
#for-you .recognition-star svg { display: block; width: 100%; height: 100%; fill: currentColor; }
#for-you.pain-section h2 {
  margin: 0;
  color: var(--dari-wine);
  font-size: clamp(44px, 3.7vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}
#for-you.pain-section .section-heading > p:not(.eyebrow) {
  max-width: 740px;
  margin: 14px auto 0;
  color: rgba(58, 3, 23, .72);
  font-size: 16px;
  line-height: 1.45;
}
#for-you .slider-shell { margin-top: clamp(10px, 1.2vw, 16px); overflow: visible; }
#for-you .card-track {
  padding: 40px max(24px, calc((100vw - 1660px) / 2 + 24px)) 88px;
  overflow-x: auto;
  overflow-y: hidden;
  perspective: none;
  scroll-behavior: auto;
  scroll-padding-left: 0;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
#for-you .card-track:focus-visible {
  outline: 1px solid rgba(58, 3, 23, .28);
  outline-offset: -1px;
}
#for-you .slider-marquee { gap: clamp(16px, 2vw, 30px); align-items: center; }
#for-you .pain-card {
  --focus: 0;
  --detail: 0;
  --angle: 0deg;
  --size: .9;
  --rise: 8px;
  --blur: 0px;
  --reveal: 50%;
  position: relative;
  flex: 0 0 clamp(320px, 23.5vw, 352px);
  height: 468px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(58,3,23,.11);
  border-radius: 24px;
  overflow: hidden;
  background: #fff9f0;
  color: var(--dari-wine);
  opacity: var(--opacity, 1);
  filter: blur(var(--blur));
  transform: translateY(var(--rise)) rotate(var(--angle)) scale(var(--size));
  transform-origin: 50% 52%;
  box-shadow: 0 18px 28px -17px rgba(72, 39, 24, .32), 0 7px 14px -10px rgba(84, 46, 27, .14);
  transition: box-shadow 240ms ease, border-color 240ms ease;
  backdrop-filter: none;
  will-change: transform;
}
#for-you .pain-card::before { display: none; }
#for-you .card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 25px;
  border-radius: inherit;
}
#for-you .card-face-paper { background: #fff9f0; color: #3a0317; }
#for-you .card-face-wine {
  z-index: 1;
  background: #3a0317;
  color: #f7e3ca;
  clip-path: inset(0 var(--reveal) 0 var(--reveal));
  pointer-events: none;
}
#for-you .card-face > * { position: relative; }
#for-you .card-face-paper .card-index,
#for-you .card-face-paper .card-summary,
#for-you .card-face-paper .pain-case { opacity: 0; }
#for-you .pain-card.is-centered {
  z-index: 2;
  border-color: rgba(230, 196, 145, .65);
  box-shadow: 0 31px 50px -24px rgba(58,3,23,.46), 0 11px 25px -17px rgba(58,3,23,.22);
}
#for-you .pain-card p { margin: 0; }
#for-you .card-index {
  min-height: 18px;
  align-self: center;
  color: inherit;
  opacity: var(--detail);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}
#for-you .card-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 16px;
  min-height: 16px;
  margin: 13px auto 20px;
  color: #b58c57;
  transform: translateY(calc((1 - var(--focus)) * 62px));
}
#for-you .card-rule::before,
#for-you .card-rule::after {
  content: "";
  width: 27px;
  height: 1px;
  background: currentColor;
  opacity: .75;
}
#for-you .card-glint { display: block; width: 9px; height: 9px; opacity: var(--detail); }
#for-you .card-glint svg { display: block; width: 100%; height: 100%; fill: currentColor; }
#for-you .pain-card h3 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: clamp(26px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  transform: translateY(calc((1 - var(--focus)) * 62px));
}
#for-you .pain-card .card-summary {
  max-width: 320px;
  min-height: 78px;
  margin: 14px auto 0;
  color: inherit;
  opacity: var(--detail);
  font-size: 14.5px;
  line-height: 1.42;
  text-align: center;
  pointer-events: none;
}
#for-you .pain-case {
  display: block;
  max-height: none;
  min-height: 0;
  margin-top: auto;
  padding: 14px 0 0;
  overflow: visible;
  border-top: 1px solid currentColor;
  color: inherit;
  opacity: var(--detail);
  transform: none;
  visibility: visible;
  transition: none;
  pointer-events: none;
}
#for-you .pain-case span {
  display: block;
  margin-bottom: 8px;
  color: inherit;
  opacity: .78;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
#for-you .pain-case q {
  display: block;
  color: inherit;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  quotes: none;
}
#for-you .pain-case q::before,
#for-you .pain-case q::after { content: none; }
#for-you .slider-controls {
  width: min(450px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 44px 38px minmax(90px, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin: -22px auto 0;
}
#for-you .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(58, 3, 23, .25);
  border-radius: 50%;
  background: rgba(255, 248, 237, .44);
  color: var(--dari-wine);
  box-shadow: none;
  backdrop-filter: none;
}
#for-you .icon-button:hover { background: #fff8ed; border-color: rgba(58,3,23,.5); box-shadow: none; }
#for-you .slider-arrow {
  display: block;
  width: 26px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}
#for-you .slider-arrow::before { display: none; }
#for-you .slider-position {
  color: var(--dari-wine);
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#for-you .slider-position [data-slider-current] { font-size: 12px; }
#for-you .slider-progress {
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(58,3,23,.2);
}
#for-you .slider-progress span {
  display: block;
  height: 100%;
  background: var(--dari-wine);
  transition: width 240ms ease;
}
@media (max-width: 700px) {
  #for-you.pain-section {
    width: calc(100vw - 28px);
    min-height: 0;
    padding: 56px 0 44px;
    background-position: 52% center;
  }
  #for-you.pain-section > .recognition-heading { width: min(540px, calc(100% - 32px)); }
  #for-you.pain-section h2 { font-size: clamp(38px, 11vw, 48px); }
  #for-you.pain-section .section-heading > p:not(.eyebrow) { margin-top: 15px; font-size: 15px; }
  #for-you .slider-shell { margin-top: 12px; }
  #for-you .card-track { padding: 40px 6vw 88px; }
  #for-you .slider-marquee { gap: 16px; }
  #for-you .pain-card { flex-basis: 84vw; max-width: 352px; height: 500px; padding: 0; }
  #for-you .card-face { padding: 25px 23px 23px; }
  #for-you .pain-card h3 { font-size: clamp(25px, 7vw, 29px); }
  #for-you .pain-card .card-summary { font-size: 14px; min-height: 96px; }
  #for-you .pain-case q { font-size: 14px; line-height: 1.32; }
  #for-you .slider-controls { grid-template-columns: 44px 38px minmax(60px,1fr) 44px; }
}
@media (max-width: 380px) {
  #for-you .pain-card { height: 540px; }
  #for-you .pain-card h3 { font-size: 25px; }
  #for-you .pain-case q { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #for-you .pain-card,
  #for-you .pain-card.is-centered { transition: none; filter: none; }
  #for-you .slider-progress span { transition: none; }
}

}