/*
  YOY! Events case study — verified via get_design_context on node 768:13234
  (fileKey DU3fuTo8QXIJ0uMcI3jh91, page containing "YOY Case"). Pixel
  values (padding, gaps, radii, colors) below are the literal values read
  from that node, same convention as css/case-atj-2.css.

  Case-specific only: does not touch home.css/nav.css/footer.css/tokens.css.
  Reuses --page-px (home.css) and the shared type scale (typography.css).

  COLOR: local, case-scoped tokens — never added to tokens.css:
    --yoy-bg      #242424 — page background
    --yoy-tint    #2e2e2e — alternating section background
    --yoy-accent  #ffb800 — eyebrows/headings, matches the product's own
                             brand yellow (not a portfolio-wide token)
    --yoy-muted   #b3b3b3 — secondary body text on dark backgrounds

  This is the FIRST pass of this case (2026-09-09) — Roman explicitly
  flagged more content/changes are coming. Every phone "Screens" slot
  currently reuses one shared placeholder mockup image, matching Figma's
  own source file, which has the identical placeholder repeated in every
  screen slot (no per-screen screenshots exported yet).

  Note on Key Decisions cards: Figma's own fill data has the "problem/
  solution/why" cards at the exact same #1a1a1a as the panel they sit in
  (768:13321 direct children, no bg on the wrapper, cards at #1a1a1a
  inside a #1a1a1a outer panel) — literally invisible against each other
  in a flat render. Used --yoy-bg (#242424, one step darker) for the
  cards instead so they read as distinct cards; a deliberate legibility
  call, not a verified Figma value.
*/

.yoy-page {
  background-color: #242424;
  color: #fffefe;
}

:root {
  --yoy-bg: #242424;
  --yoy-tint: #2e2e2e;
  --yoy-accent: #ffb800;
  --yoy-muted: #b3b3b3;
}

/* ---------- Shared primitives ---------- */

.yoy-section {
  padding: 48px var(--page-px);
}

@media (min-width: 1280px) {
  .yoy-section {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
  Fixed 2026-09-10 (correction pass): the tint fill must run edge-to-edge
  of the viewport even though .yoy-section itself is capped to 1280px at
  wide desktop widths — box-shadow spread paints past the element's own
  box without affecting its layout size, clip-path stops that spread
  from creating horizontal overflow/scrollbars.
*/
.yoy-section--tint {
  background-color: var(--yoy-tint);
  box-shadow: 0 0 0 100vmax var(--yoy-tint);
  clip-path: inset(0 -100vmax);
}

.yoy-heading {
  color: var(--yoy-accent);
  margin: 0 0 16px;
}

@media (min-width: 1024px) {
  .yoy-heading {
    margin-bottom: 24px;
  }
}

.yoy-heading--spaced {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .yoy-heading--spaced {
    margin-top: 48px;
  }
}

.yoy-subheading {
  color: #fffefe;
  margin: 0 0 8px;
}

.yoy-label {
  color: #fffefe;
  margin: 0 0 16px;
}

.yoy-body-muted {
  color: var(--yoy-muted);
}

.yoy-body-muted + .yoy-body-muted {
  margin-top: 16px;
}

.yoy-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .yoy-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.yoy-media img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.yoy-media--wide img {
  border-radius: 16px;
}

/*
  New 2026-09-10: the "How I Approached It" deep-dive image links out to
  the live FigJam board — hover feedback (dim + zoom + a small hint
  label) so it reads as clickable, not just a static screenshot.
*/
.yoy-media--linked {
  overflow: hidden;
}

.yoy-media--linked a {
  position: relative;
  display: block;
}

.yoy-media--linked img {
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.yoy-media--linked a:hover img,
.yoy-media--linked a:focus-visible img {
  transform: scale(1.02);
  filter: brightness(0.85);
}

.yoy-media__hint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 6px;
  color: var(--yoy-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yoy-media--linked a:hover .yoy-media__hint,
.yoy-media--linked a:focus-visible .yoy-media__hint {
  opacity: 1;
  transform: translateY(0);
}

.yoy-panel {
  background-color: var(--yoy-tint);
  border-radius: 16px;
  padding: 24px;
}

.yoy-section--tint .yoy-panel {
  background-color: var(--yoy-bg);
}

.yoy-panel + .yoy-panel {
  margin-top: 24px;
}

/*
  Fixed 2026-09-10 (correction pass): both widened to 32px — Roman
  flagged the "Before" screenshot → "The Challenge" panel gap and the
  panel → lower .yoy-row gap as too tight.
*/
.yoy-media + .yoy-panel,
.yoy-panel + .yoy-row {
  margin-top: 32px;
}

.yoy-section--tint > .yoy-label + .yoy-media {
  margin-top: 0;
}

/* Screens strip: reused wherever the design shows 3 phone mockups in a
   row. Below the desktop breakpoint it stacks vertically and centers
   (per Roman) instead of scrolling horizontally. */
.yoy-screens {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.yoy-screens img {
  flex-shrink: 0;
  width: 172px;
  height: 352px;
  border-radius: 8px;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .yoy-screens {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    /* Safety net: 3 fixed-width screens can outgrow a narrow desktop
       column right at this breakpoint — scroll instead of pushing the
       page wide. */
    overflow-x: auto;
  }

  .yoy-screens img {
    width: 230px;
    height: 470px;
    border-radius: 12px;
  }
}

/* ---------- Hero (768:13235) ---------- */

/*
  "Hero gradient for YOY and ATJ2" (Roman's own name for this, 2026-09-10)
  — a slow, barely-visible flow along the gradient's own diagonal, via
  background-position rather than repainting colors. To make it static
  again: delete the `animation` line and the @keyframes block below (the
  gradient itself stays). To remove entirely: delete the `background`
  declaration too. The matching gradient on ATJ2's hero (case-atj-2.css,
  same search term in a comment there) should be treated identically —
  Roman asked for both to behave the same way.

  Fixed 2026-09-10 (correction pass): the section itself must bleed
  edge-to-edge of the viewport while its media+content row stays on the
  standard 1280px column grid — same full-bleed ::before breakout as
  .yoy-panel--dark, so the gradient (and its animation) moved onto the
  pseudo-element instead of the element's own background.
*/
.yoy-hero {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px var(--page-px);
}

.yoy-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: linear-gradient(120.11deg, #111111 0%, #222222 50%, #111111 100%);
  background-size: 200% 200%;
  animation: yoy-hero-gradient-flow 14s ease-in-out infinite;
}

@keyframes yoy-hero-gradient-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yoy-hero::before {
    animation: none;
  }
}

@media (min-width: 1280px) {
  .yoy-hero {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .yoy-hero {
    flex-direction: row;
    align-items: flex-start;
    padding: 64px var(--page-px) 48px;
  }
}

/*
  New 2026-09-10 ("gray line"/"orange line", 806:12926): decorative
  vectors from get_design_context, positioned as percentages of the
  1280x734 canvas they were authored against. Desktop-only — they were
  never authored for the mobile stacked layout, and .yoy-hero's height
  is content-driven there rather than a fixed 734px canvas the
  percentages could map onto. `d` is natively animatable in current
  browsers for same-command paths; three jittered variants of each path
  loop for a slow, organic "alive thread" wiggle, each line on its own
  independent duration so they don't move in lockstep.
*/
.yoy-hero__lines {
  display: none;
}

/*
  Fixed 2026-09-10 (correction pass): container widened from the hero's
  own box (max-width:1280 at wide screens) to a full 100vw breakout
  (same left:50%/-50vw trick as the gradient), and the two lines
  repositioned so orange reaches the viewport's left edge and gray
  reaches its right edge, per Roman.
*/
@media (min-width: 1024px) {
  .yoy-hero__lines {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
}

.yoy-hero__line {
  position: absolute;
  overflow: visible;
}

.yoy-hero__line--gray {
  left: 58%;
  top: -32.09%;
  width: 44%;
  height: 83.12%;
  transform: rotate(-141.16deg) scaleY(-1);
}

.yoy-hero__line--orange {
  left: -4%;
  top: 4.97%;
  width: 106%;
  height: 134.49%;
  transform: rotate(-10.24deg);
}

/* Fixed 2026-09-10: sped up again, 3x this round (8s/11s -> 2.7s/3.7s)
   per Roman, on top of the earlier 12s/16s -> 8s/11s pass. */
.yoy-hero__line--gray path {
  animation: yoy-line-wiggle-gray 2.7s ease-in-out infinite;
}

.yoy-hero__line--orange path {
  animation: yoy-line-wiggle-orange 3.7s ease-in-out infinite;
}

@keyframes yoy-line-wiggle-gray {
  0%,
  100% {
    d: path("M6.00055 9.8113C35.1869 -10.3227 57.9417 52.9622 27.4215 113.99C-3.09863 175.019 112.136 109.046 176.812 128.742C241.487 148.438 21.3473 254.426 139.309 260.774C257.27 267.123 286.907 232.051 364.704 231.279C442.5 230.507 502.248 392.256 584.174 289.563");
  }
  33% {
    d: path("M6.00055 9.8113C27.87 -3.37 63.22 48.06 27.33 112.98C-0.07 180.79 104.01 99.61 183.53 127.40C246.73 138.48 20.26 258.86 133.88 269.68C265.30 257.73 277.42 232.88 373.49 228.90C436.83 228.95 492.83 386.69 584.174 289.563");
  }
  66% {
    d: path("M6.00055 9.8113C44.31 -1.37 49.07 44.66 34.13 118.71C0.30 171.18 114.25 111.18 178.44 121.91C240.10 146.31 25.81 264.32 148.30 261.66C256.17 262.49 277.63 222.60 364.00 227.65C440.10 238.34 502.76 393.47 584.174 289.563");
  }
}

@keyframes yoy-line-wiggle-orange {
  0%,
  100% {
    d: path("M6 39.3048C108.478 39.3048 245.701 -39.2487 312.61 44.9151C379.519 129.079 368.592 240.953 315.305 288.879C262.018 336.805 103.183 278.337 107.491 191.392C111.799 104.446 362.217 193.244 400.289 228.008C438.361 262.771 426.773 262.453 392.126 355.425C357.479 448.397 539.043 609.965 676.683 526.52C814.324 443.074 888.463 647.282 989.785 647.42C1091.11 647.558 1073.9 608.757 1109.47 637.883C1145.03 667.01 1224.07 844.964 1267.99 757.112");
  }
  33% {
    d: path("M6 39.3048C101.14 40.54 242.06 -36.34 316.13 32.75C365.89 138.53 361.85 233.51 329.18 288.05C271.44 336.14 107.08 268.55 111.27 201.70C112.45 111.20 367.02 181.04 407.52 230.56C432.80 249.64 437.01 261.69 398.25 366.03C363.47 460.19 536.10 618.39 675.13 538.72C824.93 431.80 878.27 639.36 1002.82 645.63C1094.66 641.99 1074.10 605.56 1105.30 640.27C1147.39 678.33 1229.17 856.97 1267.99 757.112");
  }
  66% {
    d: path("M6 39.3048C101.09 28.19 242.79 -48.91 300.47 42.16C391.22 137.49 376.02 233.17 316.33 282.63C252.85 325.78 95.19 290.31 116.70 199.98C120.21 95.86 356.89 196.80 406.78 237.94C449.00 251.20 429.74 267.26 392.29 346.40C356.74 436.90 551.21 620.20 678.02 520.93C825.77 445.10 899.17 657.03 990.02 645.01C1093.88 645.63 1064.42 603.30 1118.22 625.09C1132.33 670.55 1217.92 845.93 1267.99 757.112");
  }
}

@media (prefers-reduced-motion: reduce) {
  .yoy-hero__line--gray path,
  .yoy-hero__line--orange path {
    animation: none;
  }
}

.yoy-hero__media {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .yoy-hero__media {
    width: 548px;
    max-width: none;
    margin: 0;
  }
}

/*
  Fixed 2026-09-10 (correction pass): mobmocup is a transparent-background
  composite PNG (two angled phones, no fill to crop into), not a photo —
  the earlier oversized-crop-cover technique clipped part of it. Roman
  re-exported the source with more headroom and asked to stop cropping,
  so this now just contains the image inside its slot; no shadow either
  (the "gradient" instruction was about the Hero section background
  above, not a shadow under the mockup).
*/
.yoy-hero__media-frame {
  position: relative;
  aspect-ratio: 548 / 622;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yoy-hero__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/*
  New 2026-09-10 ("mascotte", 806:12937): pinned onto the mockup like a
  sticker — position/size are percentages of .yoy-hero__media-frame's
  own 548x622 box, converted from Figma's absolute coordinates (mascotte
  was positioned 290.5/22.22 within the 548x622 mobmocup box), so it
  scales together with the mockup at every breakpoint. Same
  oversized-crop technique as the mockup itself for the inner image.
*/
.yoy-hero__mascotte {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  left: 53.01%;
  top: 3.57%;
  width: 36.11%;
  height: 23.09%;
  transform: rotate(8.87deg);
}

.yoy-hero__mascotte img {
  position: absolute;
  left: -9%;
  top: -12.41%;
  width: 119.93%;
  height: 124.44%;
  max-width: none;
}

.yoy-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .yoy-hero__content {
    gap: 24px;
    flex: 1;
  }
}

/*
  Placeholder tags, added 2026-09-09 (Roman: "all tags are a template,
  I'll replace them later"). Own yellow-tinted chip, matching this
  case's own accent instead of the generic gray .tag (css/home.css) —
  same visual language as .yoy-facts__card's border. Radius verified
  against Figma's shared "Tag" component (2:13460): 16px, same as every
  other tag on the site.
*/
.yoy-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 10px;
  background-color: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.0028px;
  color: var(--yoy-accent);
  white-space: nowrap;
}

.yoy-hero__title-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yoy-hero__title {
  color: var(--yoy-accent);
  font-size: 40px;
  margin: 0;
}

@media (min-width: 1024px) {
  .yoy-hero__title {
    font-size: var(--h1-size);
  }
}

.yoy-hero__desc {
  color: #fffefe;
}

/*
  Synced 2026-09-10: Figma's Meta list is now a plain bulleted <ul>
  (get_design_context on 796:12776) — was a boxed dt/dd table before.
  No background/border on the list itself in the current design; it
  just sits on the hero's own (now gradient) background.
*/
.yoy-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoy-details li {
  color: var(--yoy-muted);
  font-size: 16px;
  line-height: 25px;
}

.yoy-details b {
  color: var(--yoy-accent);
  font-weight: 500;
}

/* ---------- Three Facts (768:13259) ---------- */

.yoy-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .yoy-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
  }
}

/*
  Fixed 2026-09-10 (correction pass): border verified via
  get_design_context on 768:13259 as gray (#4f4f4f), not the accent
  yellow it was guessed at originally.
*/
.yoy-facts__card {
  background-color: var(--yoy-bg);
  border: 1px solid #4f4f4f;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  min-height: 140px;
}

.yoy-facts__card p {
  color: #fffefe;
  margin: 0;
}

/* ---------- The Challenge (768:13283) ---------- */

.yoy-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .yoy-row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .yoy-row .yoy-media {
    flex-shrink: 0;
    width: 548px;
  }
}

.yoy-row__text {
  color: #fffefe;
  margin: 0;
}

/*
  New 2026-09-10 ("content"/"mascot", 806:12939): wraps the mascot icon
  above the paragraph — added as-is, no special animation treatment.
*/
.yoy-row__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .yoy-row__content {
    gap: 48px;
  }
}

/*
  Fixed 2026-09-10 (correction pass): switched from a zoomed sprite-sheet
  crop to a standalone extracted character (mascot-peek.webp — cropped
  out of the same source, own file), and dropped overflow:hidden — Roman
  wants this mascot spilling past its disc like the Results one, not
  contained.
*/
.yoy-row__mascot {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background-color: #2a2b2c;
  position: relative;
}

.yoy-row__mascot img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  max-width: none;
  transform: translate(-50%, -50%);
}

/* ---------- Research / Approach (768:13294) ---------- */

/*
  Fixed 2026-09-14: per Figma (768:13300) the row is a centered group with
  a flat 32px gap, all logos sharing one vertical center line — not
  stretched edge-to-edge. Mobile wraps to 2-per-row, still centered.
*/
.yoy-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 32px;
}

@media (max-width: 767px) {
  .yoy-logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .yoy-logos {
    flex-wrap: nowrap;
  }
}

/*
  Synced 2026-09-10: real analog logos (were empty gray placeholder
  boxes). Every source file is a light/white-colored mark (confirmed via
  pixel sampling — avg RGB in the 240-255 range for 4 of 5), meant to
  sit directly on the section's own dark background, not inside a light
  box — so no bg-color here, just natural sizing by height.
*/
.yoy-logos__item {
  height: 32px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .yoy-logos__item {
    height: 40px;
  }
}

/*
  Fixed 2026-09-10 (correction pass): consistent gap between every block
  in this section — several transitions here previously had zero top
  margin. First pass used the 16/24px heading-to-paragraph gap; Roman
  said it was still too tight, bumped to a flat 32px. Scoped to
  .yoy-research so it doesn't touch .yoy-subheading/.yoy-panel/
  .yoy-body-muted usages elsewhere on the page that already have their
  own deliberate spacing.
*/
.yoy-research > .yoy-subheading,
.yoy-research > .yoy-logos,
.yoy-research > .yoy-logos + .yoy-body-muted,
.yoy-research > .yoy-body-muted + .yoy-panel,
.yoy-research > .yoy-two-col + .yoy-media {
  margin-top: 32px;
}

/* ---------- Key Decisions (768:13317) ---------- */

/*
  Fixed 2026-09-10 (correction pass): same edge-to-edge bug as
  .yoy-section--tint above, plus the gradient fill verified via
  get_design_context on 768:13317 (was flat #1a1a1a, missing the
  gradient entirely). box-shadow can't paint a gradient, so the bleed
  here uses a ::before breakout instead — sized to 100vw via the
  left:50%/-50vw margin trick, sitting behind the content (z-index:-1).
  Edge-to-edge and the panel's previous rounded corners are mutually
  exclusive at wide viewports, so the radius is dropped.
*/
.yoy-panel--dark {
  position: relative;
  z-index: 0;
  padding: 32px var(--page-px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.yoy-panel--dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-image: linear-gradient(141.72deg, #111111 0%, #1d1c1c 100%);
}

@media (min-width: 1024px) {
  .yoy-panel--dark {
    padding: 48px 80px;
  }
}

/*
  Fixed 2026-09-10 (correction pass): gap between the decision title
  ("Tickets: the builder...", "Networking: from a dead end...") and its
  body widened from 16px to 32px — Roman flagged the titles as too
  cramped against the cards/screens below them.
*/
.yoy-decision {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.yoy-decision h3 {
  color: #fffefe;
  margin: 0;
}

.yoy-decision__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .yoy-decision__body {
    flex-direction: row;
    align-items: center;
  }

  .yoy-decision__body--reverse {
    flex-direction: row-reverse;
  }
}

.yoy-decision__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .yoy-decision__cards {
    width: 333px;
    flex-shrink: 0;
  }
}

.yoy-decision__card {
  background-color: var(--yoy-bg);
  border-radius: 10px;
  padding: 16px;
}

.yoy-decision__card h4 {
  color: var(--yoy-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}

.yoy-decision__card p {
  color: var(--yoy-muted);
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

/* ---------- Core Features (768:13355) ---------- */

/*
  Fixed 2026-09-10 (correction pass): each row is its own card, full
  width of the content column (not inset from it) — verified via
  get_design_context on 768:13358. Figma alternates a solid fill on the
  non-reverse rows with a barely-visible radial vignette on the reverse
  ones (rgba(40,40,40)->rgba(46,46,46), nearly flat); approximated here
  as a CSS radial-gradient. Figma's own padding was asymmetric (24px
  right/top/bottom, 0 left) and one row had a different gap (24px vs
  12px everywhere else) — per Roman, simplified to symmetric padding and
  one consistent gap instead of replicating those, content stays
  centered via justify-content as already fixed above.
*/
.yoy-feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background-color: #272727;
}

.yoy-feature--reverse {
  background-color: transparent;
  background-image: radial-gradient(ellipse at center, #282828 8%, #2e2e2e 90%);
}

.yoy-feature + .yoy-feature {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .yoy-feature + .yoy-feature {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .yoy-feature {
    flex-direction: row;
    align-items: center;
    /* Fixed 2026-09-10 (correction pass): rows with a single, narrower
       screen (the 4 recently-added Core Features images) left a big gap
       of empty space on one side instead of sitting as a centered unit —
       Roman asked for the text+screens pair to stay centered. */
    justify-content: center;
  }

  .yoy-feature--reverse {
    flex-direction: row-reverse;
  }
}

.yoy-feature__text {
  min-width: 0;
}

@media (min-width: 1024px) {
  .yoy-feature__text {
    width: 333px;
    flex-shrink: 0;
  }
}

.yoy-feature__text h3 {
  color: #fffefe;
  margin: 0 0 12px;
}

/* ---------- UIKit (768:13407) ---------- */

.yoy-uikit {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .yoy-uikit {
    flex-direction: row;
    align-items: flex-start;
  }
}

.yoy-uikit__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .yoy-uikit__text {
    width: 548px;
    flex-shrink: 0;
  }
}

.yoy-uikit__media {
  width: 100%;
}

@media (min-width: 1024px) {
  .yoy-uikit__media {
    width: 548px;
  }
}

/*
  Fixed 2026-09-10 (correction pass): aspect-ratio now matches the
  updated uikit-overview.webp's own dimensions (822x410, ~2:1) instead
  of the old 548/320 (1.71:1) ratio, which cropped the new asset under
  object-fit:cover.
*/
.yoy-uikit__media img {
  aspect-ratio: 822 / 410;
}

/* ---------- Results (768:13414) ---------- */

/*
  Fixed 2026-09-10 (correction pass): the Results panel sits inside a
  .yoy-section--tint section, and `.yoy-section--tint .yoy-panel`
  (higher specificity via the descendant combinator) was silently
  overriding this panel's own accent color back to --yoy-bg — the
  #FFB800 fill from get_design_context on 768:13415 was in the CSS but
  never actually rendered. Re-declared here at matching specificity.
*/
.yoy-section--tint .yoy-panel--accent,
.yoy-panel--accent {
  background-color: var(--yoy-accent);
  color: #242424;
}

.yoy-panel--accent .yoy-two-col {
  margin-top: 24px;
}

.yoy-panel--accent .body-large {
  color: #2e2e2e;
}

.yoy-results__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: #242424;
  margin: 0 0 20px;
}

/*
  New 2026-09-10 (get_design_context on 795:12768): a short note plus a
  link out to the actual live product, sitting below the yellow Results
  panel on the section's own dark background. Row layout added for the
  "mascot" (806:12949) — its rocket flame/smoke intentionally overflows
  the disc past the left edge; overflow is NOT clipped here, per Roman.
*/
.yoy-results__focus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .yoy-results__focus {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
}

.yoy-results__mascot {
  width: 108px;
  height: 105px;
  border-radius: 50%;
  background-color: #2a2b2c;
  flex-shrink: 0;
  position: relative;
}

.yoy-results__mascot img {
  position: absolute;
  left: -22%;
  top: -32.5%;
  width: 157.3%;
  height: 154.5%;
  max-width: none;
  transform: rotate(178.64deg) scaleY(-1);
}

.yoy-results__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.yoy-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--yoy-accent);
  border: 1px solid #4f4c61;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: #1a1a1a;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.yoy-btn-primary:hover {
  background-color: #e6a600;
}