/* =========================================================================================
   #why  (P2) · sand · CALL-E P09 "Pegged notes wall" (two cords of paper cards) + P04 self-ticking list.
   DOM order = source order: A plan, B tools, C day, D rating, E certificates (phones stack it, one cord per card).
   Desktop >=1200: cord 1 = A (wide, 2 pegs) + D (yellow) · cord 2 = B + C + E (ink = selected card).
   Tablet 768-1199: A | B C | D E (three cords). Each card is its own reveal group (.hrow[data-rv]).
   Kit parts used: .split-head .head .eyebrow .t-h2 .mk .lead.note .line-row.stack .hrow .hg(.wide) .pin .paperl
   (.yel .ink) .t-h3 .t-body .btn .wpill(.sel .acc) .box.sm .itile .t-num .t-label. Semantic variables only.
   ========================================================================================= */

#why .split-head .t-h2 { max-width: 15ch; }
#why .wy-wall { margin-top: 48px; }

/* tilt + hang-in delay per card (left -> right inside a cord) */
#why .wy-a > .hg { --r: -0.8deg; --d: 0.1s; }
#why .wy-d > .hg { --r: 2deg; --d: 0.28s; }
#why .wy-b > .hg { --r: 1.2deg; --d: 0.1s; }
#why .wy-c > .hg { --r: -1.5deg; --d: 0.23s; }
#why .wy-e > .hg { --r: 1deg; --d: 0.36s; }

/* ---------- the wall: grid of cards hung from per-row cords (phones: kit .stack, one cord per card) ---------- */
@media (width >= 768px) {
  #why .wy-wall {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a a" "b c" "d e";
    gap: 48px 24px; align-items: start; padding-top: 0;
  }
  #why .wy-wall > .hrow { display: block; position: relative; min-width: 0; padding-top: 36px; }
  #why .wy-a { grid-area: a; }
  #why .wy-b { grid-area: b; }
  #why .wy-c { grid-area: c; }
  #why .wy-d { grid-area: d; }
  #why .wy-e { grid-area: e; }
  /* one full-bleed cord per row, painted by the first card of the row (same geometry as the kit's cords) */
  #why :is(.wy-a, .wy-b, .wy-d)::before {
    content: ""; position: absolute; z-index: 1; top: 12px; left: -100vw; right: -100vw; height: 28px;
    background: var(--cord-img) repeat-x 0 0 / 12px 28px; pointer-events: none;
  }
}
@media (768px <= width <= 1199px) {
  #why .wy-d > .hg { --d: 0.1s; }
  #why .wy-e > .hg { --d: 0.23s; }
}
@media (width >= 1200px) {
  #why .wy-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a a d" "b c e"; gap: 56px 28px; }
  #why .wy-d::before { content: none; }
}
@media (width <= 767px) {
  #why .wy-wall { margin-top: 40px; row-gap: 18px; }
  #why .wy-wall > .hrow > .hg { --d: 0.1s; }
}

/* ---------- cards ---------- */
#why .wy-card { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 34px 28px 28px; }
#why .wy-card > *, #why .wy-copy > * { max-width: 100%; }
#why .wy-card .btn { margin-top: 10px; }
#why .wy-card .t-h3 { text-wrap: balance; }
@media (width <= 767px) { #why .wy-card { padding: 30px 22px 24px; } }
/* narrow cards (tablet 2-up): keep the pill on one line */
#why .wy-card { container-type: inline-size; }
#why .wy-card .btn { white-space: nowrap; }
@container (width < 250px) { #why .wy-card .btn { padding-inline: 16px; font-size: 13px; } }

/* A · plan: copy left, "Your AI path" mini UI right once the card is wide enough (source layout: >= 620) */
#why .wy-plan { container: wy-plan / inline-size; justify-items: stretch; }
#why .wy-plan-in { display: grid; gap: 28px; }
#why .wy-copy { display: grid; gap: 12px; align-content: start; justify-items: start; }
@container wy-plan (width >= 540px) {
  #why .wy-plan-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; align-items: center; }
}
#why .wy-path { padding: 16px 16px 18px; border-radius: 14px; background: var(--paper-sand); }
#why .wy-path-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 16px; }
#why .wy-path-head .t-label { color: var(--fg2); }
#why .wy-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; }
#why .wy-days > li { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; }
#why .wy-tile { display: grid; place-items: center; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 10px; background: var(--paper-ivory); }
#why .wy-tile img { display: block; width: 26px; height: 26px; filter: var(--logo-filter); }
#why .wy-tile.yel { background: var(--y); color: var(--n); box-shadow: var(--sh-tag); }
#why .wy-tile svg { display: block; width: 44%; height: 44%; }
#why .wy-cap { font: 400 11px/1.2 var(--mono); letter-spacing: -0.01em; text-align: center; text-transform: uppercase; color: var(--fg3); }

/* B · tools: 4 x 3 icon tiles (phones: the first 4, as the source below 640) */
#why .wy-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 64px)); gap: 10px; margin-bottom: 14px; }
#why .wy-marks .itile { width: 100%; height: auto; aspect-ratio: 1; }
#why .wy-marks .itile img { width: 26px; height: 26px; }
@media (width <= 767px) { #why .wy-marks .itile:nth-child(n + 5) { display: none; } }

/* C · your day: CALL-E to-do rows on a sand slip; the AISkillCertificate row is the raised one */
#why .wy-day { justify-self: stretch; margin-bottom: 14px; padding: 14px 12px 12px; border-radius: 14px; background: var(--paper-sand); }
#why .wy-day-h { padding: 2px 6px 12px; border-bottom: 1px solid var(--hair); color: var(--fg3); }
#why .wy-day ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
#why .wy-day li {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 10px; border-radius: 10px;
  font-size: 18px; line-height: 1.25; color: var(--fg2);
}
#why .wy-day li.hi { background: var(--paper); color: var(--fg); box-shadow: var(--sh-tag); }
#why .wy-task { flex: 1; min-width: 0; }

/* D · rating: yellow note, ink laurels (the yellow paper keeps ink text in both themes) */
#why .wy-rate { justify-items: center; gap: 14px; padding: 40px 28px 34px; text-align: center; }
#why .wy-score { display: flex; align-items: center; justify-content: center; gap: 14px; }
#why .wy-score img { display: block; width: 30px; height: auto; filter: brightness(0); opacity: 0.88; }
#why .wy-rate .t-num { letter-spacing: -0.09em; }
#why .wy-rate .t-body { max-width: 30ch; }
/* dark: card E (selected) already turns yellow, so the rating note becomes dark paper with a yellow score
   instead of a second yellow card next to it */
html.dark #why .wy-rate { background: var(--card); color: var(--card-fg); }
html.dark #why .wy-rate .t-num { color: var(--y); }
html.dark #why .wy-rate .t-body { color: #f9f9f0cc; }
html.dark #why .wy-score img { filter: brightness(0) invert(1); opacity: 0.9; }

/* E · certificates: the selected (ink) card, five seals in a 3 + 2 honeycomb */
#why .wy-seals {
  --s: clamp(56px, 4.8vw, 74px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  width: calc(3 * var(--s) + 20px); max-width: 100%; margin-bottom: 14px;
}
#why .wy-seals img { display: block; width: var(--s); height: var(--s); filter: grayscale(1) var(--sh-drop); }