/* /why-aeo: the once-a-year panel and the page text. Shared parts come from styles.css. */
.why-page { --why-panel: #1A1A18; --why-raised: #2C2C29; --why-on: #F6F6F3; --why-on-2: #A3A39B; --why-move: cubic-bezier(.32, .72, 0, 1); }

/* Hero: the shared yellow band, centered, with room for the panel to overlap it */
.why-hero { padding-bottom: 236px; }
.why-hero::before { -webkit-mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent 78%); mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent 78%); }
.why-hero-copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: 40px; }
.why-hero h1 span { display: block; }
.why-hero .hero-sub { max-width: 34em; text-wrap: pretty; }
.why-cta { order: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 32px; max-width: 100%; }
.why-cta .button { max-width: 100%; white-space: normal; }
.why-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.why-demo .arrow { transition: transform .35s var(--ease-out); }
.why-demo:hover .arrow { transform: translateX(3px); }
.why-demo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Panel */
.why-stage { position: relative; z-index: 2; margin-top: -172px; }
.why-year { margin: 0; padding: 28px 32px 26px; border-radius: 24px; background: var(--why-panel); color: var(--why-on); box-shadow: var(--shadow-3); }
.why-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.why-sample { font-size: 12.5px; line-height: 1.3; color: var(--why-on-2); white-space: nowrap; }

.why-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; min-width: 0; margin: 0; padding: 3px; border: 0; border-radius: 11px; background: var(--why-raised); }
.why-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--yellow); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .28s var(--why-move); }
.why-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.why-seg label { position: relative; display: block; padding: 9px 14px; border-radius: 8px; font-size: 14px; line-height: 1.2; font-weight: 500; text-align: center; white-space: nowrap; color: var(--why-on-2); cursor: pointer; transition: color .18s ease, transform .12s var(--ease-out); }
.why-seg label:active { transform: scale(.97); }
.why-seg input:checked + label { color: var(--ink); font-weight: 600; }
.why-seg input:focus-visible + label { outline: 2px solid var(--why-on); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .why-seg input:not(:checked) + label:hover { color: var(--why-on); } }

.why-read { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 22px; min-height: 80px; margin: 26px 0 24px; }
.why-figure { display: flex; align-items: center; gap: 14px; font-size: clamp(48px, 6vw, 76px); line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.why-after { display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateX(-10px); transition: opacity .28s ease, transform .4s var(--ease-out); }
.why-after svg { flex: none; width: .5em; height: .5em; }
.why-after b { font-weight: 700; color: var(--yellow); }
[data-mode="every"] .why-after { opacity: 1; transform: none; }
.why-caps { display: grid; min-width: 0; padding-bottom: 7px; }
.why-caps p { grid-area: 1 / 1; max-width: 30em; margin: 0; font-size: 16px; line-height: 1.35; color: var(--why-on-2); text-wrap: pretty; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; }
.why-caps b { font-weight: 600; color: var(--why-on); }
[data-mode="once"] .why-cap-once, [data-mode="every"] .why-cap-every { opacity: 1; visibility: visible; }

.why-months { position: relative; height: 20px; margin-bottom: 6px; font-size: 12.5px; color: var(--why-on-2); }
.why-months span { position: absolute; top: 0; }
.why-cells { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; aspect-ratio: 53 / 7; touch-action: pan-y; cursor: crosshair; }
.why-cells i { position: relative; display: block; border-radius: 3px; background: var(--why-raised); }
.why-cells i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--yellow); opacity: 0; transform: scale(.7); transition: opacity .24s ease, transform .36s var(--ease-out); transition-delay: calc((52 - var(--c)) * 5ms); }
[data-mode="every"] .why-cells i::after { opacity: var(--o); transform: none; transition-delay: calc(var(--c) * 13ms); }
[data-mode="once"] .why-cells i.one::after { opacity: 1; transform: none; transition-delay: 0s; }
[data-mode="once"] .why-cells i.one::before { content: ""; position: absolute; inset: -5px; z-index: 1; border-radius: 7px; box-shadow: 0 0 0 1.5px var(--yellow); animation: why-ping 1.5s var(--ease-out) 2 both; }
@keyframes why-ping { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

.why-brackets { position: relative; height: 36px; margin-top: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.why-bracket { position: absolute; top: 0; padding-top: 8px; box-shadow: inset 0 2px 0 var(--why-raised); white-space: nowrap; color: var(--why-on-2); cursor: default; clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease-out); }
.why-bracket b { font-weight: 600; color: var(--why-on); }
.why-bracket.post { box-shadow: inset 0 2px 0 var(--yellow); }
[data-mode="every"] .why-bracket { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-out) .55s; }
.why-ramp { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--why-on-2); }
.why-ramp span { margin-right: 6px; }
.why-ramp i { width: 11px; height: 11px; border-radius: 3px; background: var(--yellow); }

/* Page text */
.why-body { padding-bottom: 96px; }
.why-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 72px; padding-top: 88px; }
.why-sec > * { min-width: 0; }
.why-sec h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.why-prose { display: grid; gap: 18px; max-width: 39em; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.why-prose p { margin: 0; }
.why-prose strong { font-weight: 600; color: var(--ink); }
.why-rows { display: grid; gap: 30px; max-width: 44em; }
.why-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6px 28px; }
.why-row h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.why-row p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }

/* Close */
.why-close { display: grid; justify-items: center; gap: 26px; text-align: center; }
.why-close h2 { max-width: 18ch; }
.why-plans { margin: 0; font-size: 14px; color: #D9D9D2; }

@media (max-width: 860px) {
  .why-sec { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 64px; }
  .why-body { padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .why-hero { padding-bottom: 170px; }
  .why-hero-copy { padding-top: 20px; }
  .why-hero .hero-sub { font-size: 17.5px; }
  .why-stage { margin-top: -112px; }
  .why-year { padding: 18px 16px; border-radius: 20px; }
  .why-seg label { padding: 9px 10px; font-size: 13.5px; }
  .why-read { grid-template-columns: minmax(0, 1fr); min-height: 0; margin: 18px 0; }
  .why-figure, .why-after { gap: 9px; }
  .why-cells { gap: 1.5px; }
  .why-cells i { border-radius: 1.5px; }
  .why-months span:nth-child(even) { display: none; }
  .why-brackets { height: 54px; font-size: 12.5px; }
  .why-bracket b { display: block; font-size: 15px; }
  .why-ramp span { margin-right: auto; }
  .why-row { grid-template-columns: minmax(0, 1fr); }
  .why-prose { font-size: 17px; }
}
@media (pointer: coarse) {
  .why-seg label { padding-block: 14px; }
  .why-demo { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-thumb, .why-after, .why-caps p, .why-cells i::after, .why-bracket, .why-seg label { transition-duration: .01ms; transition-delay: 0s; }
  [data-mode="every"] .why-cells i::after, [data-mode="every"] .why-bracket { transition-duration: .01ms; transition-delay: 0s; }
  [data-mode="once"] .why-cells i.one::before { animation: none; opacity: 1; transform: none; }
}