/* Personalized Offers (personalized-offers) — content scoped under .nfo-root; vars on body */

/* Page canvas matches DCM case study: body.case-ad-creation (ad-creation.css) */
body.page-personalized-offers {
  --po-ink: var(--ink);
  --po-ink-soft: var(--ink-soft);
  --po-ink-muted: var(--ink-muted);
  --po-rule: var(--rule);
  --po-max: 1100px;
  --po-type-section-title: var(--type-section-title);
  --po-type-subhead: var(--type-section-subtitle);
  --po-type-eyebrow-size: var(--type-kicker);
  --po-type-eyebrow-tracking: 0.12em;
  --po-type-body-sm: 15px;
  --serif: "DM Sans", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", "Courier New", monospace;
  --gutter: clamp(24px, 5vw, 64px);
  --ffd-pin: var(--accent);
  background: var(--bg);
  color: var(--po-ink);
  font-family: var(--sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

body.page-personalized-offers .nfo-root *,
body.page-personalized-offers .nfo-root *::before,
body.page-personalized-offers .nfo-root *::after {
  box-sizing: border-box;
}

/* Section TOC: global `.floating-sidebar` + `body:has(.floating-sidebar) main` (styles.css, ≥1200px) */

/* Override global portfolio img chrome on case content only (not hero-strip previews) */
body.page-personalized-offers .nfo-root main.page img {
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: opacity 0.2s ease, filter 0.25s ease;
}

body.page-personalized-offers .nfo-root main.page img:hover,
body.page-personalized-offers .nfo-root main.page img:focus-visible {
  transform: none;
}

body.page-personalized-offers .nfo-root main.page {
  max-width: var(--po-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Anchor targets — clear fixed site header (matches IA case pages) */
body.page-personalized-offers .nfo-root main [id] {
  scroll-margin-top: 96px;
}

body.page-personalized-offers .nfo-root .hero {
  padding: 112px 0 28px;
  position: relative;
}

body.page-personalized-offers .nfo-root .hero + .section-major {
  padding-top: 48px;
}

body.page-personalized-offers .nfo-root .hero h1 {
  font-family: var(--serif);
  font-size: var(--type-case-hero-title);
  font-weight: var(--type-case-hero-weight);
  line-height: var(--type-case-hero-lh);
  letter-spacing: var(--type-case-hero-tracking);
  color: var(--po-ink);
  margin-bottom: 0;
  max-width: 780px;
}

body.page-personalized-offers .nfo-root .hero .nfo-overview-band {
  margin-top: var(--case-title-overview-gap);
  width: 100%;
}

/* Space after “01 Overview” — hero omits hr.case-section-rule */
body.page-personalized-offers .nfo-root .hero .nfo-overview-band > .case-section-header {
  margin-bottom: 1.25rem;
}

/* Overview strip — same pattern as Personalized Offers: Context / Problem / Opportunity */
body.page-personalized-offers .nfo-root .hero .intro-columns {
  margin-top: 0;
  max-width: none;
  width: 100%;
  border-top: none;
  padding-top: 1.5rem;
}

body.page-personalized-offers .nfo-root .hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--case-meta-gap, calc(1.75rem * 1.1));
  border-top: none;
  padding-top: 32px;
  justify-items: start;
  align-items: start;
}

/* Match `.intro-columns article` gutters so Role / Timeline / Impact line up with Context / Problem / Opportunity */
body.page-personalized-offers .nfo-root .meta-item {
  min-width: 0;
  padding-right: 0.5rem;
}

body.page-personalized-offers .nfo-root .meta-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--po-ink-muted);
  margin-bottom: 8px;
}

body.page-personalized-offers .nfo-root .meta-value {
  font-family: var(--serif);
  font-size: var(--type-body-size);
  color: var(--po-ink);
  font-weight: 400;
}

body.page-personalized-offers .nfo-root .section-major {
  padding: 72px 0 0;
}

body.page-personalized-offers .nfo-root main.page > .section-major:first-of-type {
  padding-top: var(--case-title-overview-gap);
}

body.page-personalized-offers .nfo-root .section-major-header {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0;
  align-items: baseline;
  margin-bottom: 52px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 16px;
}

body.page-personalized-offers .nfo-root .section-major-num {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  color: var(--po-ink-muted);
  letter-spacing: var(--po-type-eyebrow-tracking);
  padding-top: 0;
}

body.page-personalized-offers .nfo-root .section-major-title {
  font-family: var(--serif);
  font-size: var(--po-type-section-title);
  line-height: var(--type-section-title-lh);
  font-weight: 400;
  color: var(--po-ink);
  margin: 0;
  border-top: none;
  padding-top: 0;
}

body.page-personalized-offers .nfo-root .section-sub {
  margin-top: 56px;
}

body.page-personalized-offers .nfo-root .section-sub-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

body.page-personalized-offers .nfo-root .section-sub-title {
  font-family: var(--serif);
  font-size: var(--po-type-subhead);
  line-height: var(--type-section-subtitle-lh);
  font-weight: 400;
  color: var(--po-ink);
  margin-bottom: 14px;
}

body.page-personalized-offers .nfo-root .prose p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
  margin-bottom: 20px;
  text-wrap: pretty;
  max-width: 780px;
}

body.page-personalized-offers .nfo-root .prose p:last-child {
  margin-bottom: 0;
}

body.page-personalized-offers .nfo-root .pull-quote {
  margin: 48px 0;
  padding: 32px 40px;
  background: var(--bg-warm);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

body.page-personalized-offers .nfo-root .pull-quote p {
  font-family: var(--serif);
  font-size: var(--type-goal-text);
  font-style: italic;
  color: var(--po-ink);
  line-height: var(--type-goal-text-lh);
  max-width: none;
}

body.page-personalized-offers .nfo-root .insight-panel {
  background: var(--bg-warm);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 56px var(--gutter);
  margin: 72px calc(-1 * var(--gutter));
}

body.page-personalized-offers .nfo-root .insight-panel-inner {
  max-width: var(--po-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

body.page-personalized-offers .nfo-root .insight-rule {
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 14px;
}

body.page-personalized-offers .nfo-root .insight-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

body.page-personalized-offers .nfo-root .insight-heading {
  font-family: var(--serif);
  font-size: var(--type-prose-subhead);
  font-weight: 400;
  color: var(--po-ink);
  line-height: var(--type-prose-subhead-lh);
  margin-bottom: 14px;
}

body.page-personalized-offers .nfo-root .insight-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
}

body.page-personalized-offers .nfo-root .flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
  margin: 36px calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: 36px max(var(--gutter), env(safe-area-inset-left)) 40px
    max(var(--gutter), env(safe-area-inset-right));
  box-sizing: border-box;
  background: #0a0a0a;
}

body.page-personalized-offers .nfo-root .flow-strip > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

/* Equal tile size in one row; contain keeps full UI visible */
body.page-personalized-offers .nfo-root .flow-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;
  object-position: top center;
  background: #ffffff;
  display: block;
  border-radius: 6px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.page-personalized-offers .nfo-root .flow-strip-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: 0.08em;
  color: rgba(245, 243, 240, 0.72);
  margin-top: 10px;
  text-align: center;
}

/* Lightbox — click any case image to enlarge */
body.page-personalized-offers .nfo-root img {
  cursor: zoom-in;
}

body.page-personalized-offers .nfo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

body.page-personalized-offers .nfo-lightbox[hidden] {
  display: none !important;
}

body.page-personalized-offers .nfo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

body.page-personalized-offers .nfo-lightbox-panel {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
}

body.page-personalized-offers .nfo-lightbox-img {
  display: block;
  max-width: min(96vw, 1400px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  cursor: default;
}

body.page-personalized-offers .nfo-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fafaf8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

body.page-personalized-offers .nfo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.page-personalized-offers .nfo-root .solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 40px 0;
}

body.page-personalized-offers .nfo-root .solution-item {
  padding: 32px 32px 32px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

body.page-personalized-offers .nfo-root .solution-item:nth-child(2n) {
  padding-left: 32px;
  padding-right: 0;
  border-right: none;
}

body.page-personalized-offers .nfo-root .solution-item:nth-last-child(-n + 2) {
  border-bottom: none;
}

body.page-personalized-offers .nfo-root .solution-num {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--numeral-ink);
  margin-bottom: 10px;
}

body.page-personalized-offers .nfo-root .solution-title {
  font-family: var(--serif);
  font-size: var(--po-type-subhead);
  line-height: var(--type-section-subtitle-lh);
  font-weight: 400;
  color: var(--po-ink);
  margin-bottom: 10px;
}

body.page-personalized-offers .nfo-root .solution-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
}

body.page-personalized-offers .nfo-root .img-block {
  margin: 36px 0;
}

body.page-personalized-offers .nfo-root .img-block img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body.page-personalized-offers .nfo-root .img-caption {
  font-family: var(--mono);
  font-size: var(--po-type-body-sm);
  color: var(--po-ink-muted);
  margin-top: 10px;
  letter-spacing: 0.04em;
}

body.page-personalized-offers .nfo-root .img-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin: 36px 0;
}

body.page-personalized-offers .nfo-root .img-row.two-col {
  grid-template-columns: 1fr 1fr;
}

/* Early explorations: four equal tiles in one row (full-bleed for legibility) */
body.page-personalized-offers .nfo-root .img-row.img-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
  margin: 36px calc(50% - 50vw) 0;
  width: 100vw;
  max-width: 100vw;
  padding: 36px max(var(--gutter), env(safe-area-inset-left)) 16px
    max(var(--gutter), env(safe-area-inset-right));
  box-sizing: border-box;
  background: #0a0a0a;
}

body.page-personalized-offers .nfo-root .img-row.img-row--four img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;
  object-position: top center;
  background: #ffffff;
  border-radius: 6px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.page-personalized-offers .nfo-root .img-row.img-row--four + .img-caption {
  margin: 0 calc(50% - 50vw) 36px;
  width: 100vw;
  max-width: 100vw;
  padding: 4px max(var(--gutter), env(safe-area-inset-left)) 40px
    max(var(--gutter), env(safe-area-inset-right));
  box-sizing: border-box;
  background: #0a0a0a;
  color: rgba(245, 243, 240, 0.72);
}

body.page-personalized-offers .nfo-root .img-row img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body.page-personalized-offers .nfo-root .design-detail {
  padding: 64px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

body.page-personalized-offers .nfo-root .design-detail:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

body.page-personalized-offers .nfo-root .design-detail-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}

body.page-personalized-offers .nfo-root .design-detail-meta {
  position: sticky;
  top: 120px;
}

body.page-personalized-offers .nfo-root .design-detail-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

body.page-personalized-offers .nfo-root .design-detail-title {
  font-family: var(--serif);
  font-size: var(--po-type-subhead);
  line-height: var(--type-section-subtitle-lh);
  font-weight: 400;
  color: var(--po-ink);
  margin-bottom: 16px;
}

body.page-personalized-offers .nfo-root .design-detail-meta p {
  font-size: var(--po-type-body-sm);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
}

/* Phone / screen exports — only the last Final Designs mockup stays ~48% rail (first two stay full column width) */
body.page-personalized-offers .nfo-root #designs > .design-detail:last-child .design-detail-visual {
  max-width: min(100%, 52%, 480px);
  margin-left: 0;
  margin-right: auto;
}

body.page-personalized-offers .nfo-root .design-detail-visual img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

body.page-personalized-offers .nfo-root .design-detail-visual p {
  font-size: var(--po-type-body-sm);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
  margin-bottom: 14px;
}

body.page-personalized-offers .nfo-root .annotated-img {
  --ffd-pin: var(--accent);
  position: relative;
  margin: 32px 0;
  display: block;
}

/* DCM-style pins + popovers (matches New Product Switch / ad-creation); no image dimming */
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 2;
  outline: none;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin.is-open {
  z-index: 4;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ffd-pin) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--ffd-pin) 80%, #fff 20%);
  animation: nfoFfPulse 2.4s ease-in-out infinite;
  pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ffd-pin) 35%, transparent);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--accent .ad-ff-pulse {
  background: color-mix(in srgb, var(--ffd-pin) 18%, transparent);
  border-color: color-mix(in srgb, var(--ffd-pin) 75%, #fff 25%);
  animation: nfoFfPulseBlue 2.4s ease-in-out infinite;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:hover .ad-ff-pulse,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:focus-visible .ad-ff-pulse,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin.is-open .ad-ff-pulse {
  animation: none;
  filter: none;
  transform: scale(1.1);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--ffd-pin) 32%, transparent),
    0 3px 10px color-mix(in srgb, var(--ffd-pin) 25%, transparent);
  background: color-mix(in srgb, var(--ffd-pin) 38%, transparent);
  border-color: color-mix(in srgb, var(--ffd-pin) 92%, #fff 8%);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--accent:hover .ad-ff-pulse,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--accent:focus-visible .ad-ff-pulse,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--accent.is-open .ad-ff-pulse {
  animation: none;
  transform: scale(1.14);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--ffd-pin) 26%, transparent),
    0 4px 14px color-mix(in srgb, var(--ffd-pin) 32%, transparent);
  background: color-mix(in srgb, var(--ffd-pin) 48%, transparent);
  border-color: color-mix(in srgb, var(--ffd-pin) 95%, #fff 5%);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:hover .ad-ff-lbl,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:focus-visible .ad-ff-lbl,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin.is-open .ad-ff-lbl {
  transform: scale(1.1);
  color: #fff;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:active .ad-ff-pulse {
  transform: scale(1.06);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: min(16.5rem, calc(100vw - 3rem));
  max-width: none;
  margin: 0;
  padding: 0.65rem 0.8rem 0.7rem;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--po-ink);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transform: translateX(-50%) translateY(4px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pop-title {
  display: block;
  font-family: var(--sans);
  font-size: var(--po-type-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ffd-pin);
  margin: 0 0 0.4rem;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pop-body {
  display: block;
  margin: 0;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin.is-open .ad-ff-pop,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:hover .ad-ff-pop,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:focus-visible .ad-ff-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below .ad-ff-pop {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px) scale(0.97);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below.is-open .ad-ff-pop,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below:hover .ad-ff-pop,
body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below:focus-visible .ad-ff-pop {
  transform: translateX(-50%) translateY(0) scale(1);
}

body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below .ad-ff-pop::after {
  top: -8px;
  bottom: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

@media (hover: none) {
  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:hover .ad-ff-pop {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px) scale(0.97);
    pointer-events: none;
  }

  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below:hover .ad-ff-pop {
    transform: translateX(-50%) translateY(-4px) scale(0.97);
  }

  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin.is-open .ad-ff-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin--below.is-open .ad-ff-pop {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pin:not(.ad-ff-pin--below).is-open .ad-ff-pop {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes nfoFfPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ffd-pin) 45%, transparent);
  }

  50% {
    box-shadow: 0 0 0 10px transparent;
  }
}

@keyframes nfoFfPulseBlue {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ffd-pin) 40%, transparent);
  }

  50% {
    box-shadow: 0 0 0 10px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pulse {
    animation: none !important;
  }

  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pulse,
  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-lbl,
  body.page-personalized-offers .nfo-root .annotated-img .ad-ff-pop {
    transition: none;
  }
}

body.page-personalized-offers .nfo-root .annotated-img img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body.page-personalized-offers .nfo-root .annotation-hint {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  color: var(--po-ink-muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.page-personalized-offers .nfo-root .annotation-hint::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ffd-pin);
  flex-shrink: 0;
}

body.page-personalized-offers .nfo-root .results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 48px 0;
}

body.page-personalized-offers .nfo-root .result-item {
  padding: 48px 48px 48px 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

body.page-personalized-offers .nfo-root .result-item:last-child {
  border-right: none;
  padding-left: 48px;
  padding-right: 0;
}

body.page-personalized-offers .nfo-root .result-label {
  font-family: var(--mono);
  font-size: var(--po-type-eyebrow-size);
  letter-spacing: var(--po-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--po-ink-muted);
  margin-bottom: 16px;
}

body.page-personalized-offers .nfo-root .result-stat {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 88px);
  color: var(--po-ink);
  line-height: 0.95;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

body.page-personalized-offers .nfo-root .result-stat span {
  color: var(--accent);
}

body.page-personalized-offers .nfo-root .result-desc {
  font-size: var(--po-type-body-sm);
  line-height: var(--type-body-lh);
  color: var(--po-ink-soft);
  max-width: 340px;
}

body.page-personalized-offers .nfo-root .learnings-list {
  list-style: none;
  margin: 28px 0;
}

body.page-personalized-offers .nfo-root .learnings-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: var(--type-body-size);
  color: var(--po-ink-soft);
  line-height: var(--type-body-lh);
}

body.page-personalized-offers .nfo-root .learnings-list li:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

body.page-personalized-offers .nfo-root .learning-num {
  font-family: var(--mono);
  font-size: var(--type-section-num);
  color: var(--numeral-ink);
  padding-top: 3px;
}

body.page-personalized-offers .nfo-root .learning-body strong {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--po-ink);
  font-size: var(--po-type-body-sm);
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  body.page-personalized-offers .nfo-root .hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  body.page-personalized-offers .nfo-root .flow-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, calc(88vw - 2 * var(--gutter)));
    gap: 12px;
    margin: 36px calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding: 28px max(var(--gutter), env(safe-area-inset-left)) 32px
      max(var(--gutter), env(safe-area-inset-right));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: #0a0a0a;
  }

  body.page-personalized-offers .nfo-root .flow-strip > div {
    scroll-snap-align: start;
    min-width: 0;
  }

  body.page-personalized-offers .nfo-root .solution-item,
  body.page-personalized-offers .nfo-root .solution-item:nth-child(2n) {
    padding: 24px 0;
    border-right: none;
  }

  body.page-personalized-offers .nfo-root .solution-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }

  body.page-personalized-offers .nfo-root .solution-item:last-child {
    border-bottom: none;
  }

  body.page-personalized-offers .nfo-root .img-row {
    grid-template-columns: 1fr;
  }

  body.page-personalized-offers .nfo-root .img-row.img-row--four {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, calc(88vw - 2 * var(--gutter)));
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
    padding: 28px max(var(--gutter), env(safe-area-inset-left)) 16px
      max(var(--gutter), env(safe-area-inset-right));
    background: #0a0a0a;
  }

  body.page-personalized-offers .nfo-root .img-row.img-row--four + .img-caption {
    padding-top: 0;
    padding-bottom: 32px;
  }

  body.page-personalized-offers .nfo-root .img-row.img-row--four img {
    scroll-snap-align: start;
  }

  body.page-personalized-offers .nfo-root .solution-grid {
    grid-template-columns: 1fr;
  }

  body.page-personalized-offers .nfo-root .design-detail-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.page-personalized-offers .nfo-root .design-detail-meta {
    position: static;
  }

  body.page-personalized-offers .nfo-root .design-detail-visual {
    max-width: 100%;
  }

  body.page-personalized-offers .nfo-root .results-grid {
    grid-template-columns: 1fr;
  }

  body.page-personalized-offers .nfo-root .result-item {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 32px 0 !important;
  }

  body.page-personalized-offers .nfo-root .result-item:last-child {
    border-bottom: none;
  }

  body.page-personalized-offers .nfo-root .insight-panel-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body.page-personalized-offers .nfo-lightbox-close {
    top: -52px;
    right: -4px;
  }
}