/* the 2X Points flywheel: ring + nodes (SVG), detail panel, mobile cards. Tokens only. */
.fy-fw{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(28px,4vw,64px);align-items:center}
.fy-fw--compact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fy-fw__wheel{width:100%;max-width:540px;margin-inline:auto}
.fy-fw__svg{display:block;width:100%;height:auto;overflow:visible}
.fy-fw__ring{fill:none;stroke:var(--fy-line);stroke-width:3}
.fy-fw__arc{fill:none;stroke:var(--fy-line);stroke-width:3;stroke-linecap:round;transition:stroke .5s var(--fy-ease)}
.fy-fw__arc.is-in{stroke:var(--c)}
.fy-fw__ah{fill:var(--fy-text-2)}
.fy-fw__hub{fill:var(--fy-aud-hub)}
.fy-fw__hubt{font:600 13px var(--fy-font-body);fill:#fff;letter-spacing:.01em}
.fy-fw__badge rect{fill:var(--fy-violet-tint)}
.fy-fw__badge text{font:600 14px var(--fy-font-body);fill:var(--fy-navy)}
.fy-fw__b2x{font:800 14px var(--fy-font-display);fill:var(--fy-violet-deep)}
.fy-fw__lab{font:700 14px var(--fy-font-display);fill:var(--fy-navy);letter-spacing:-.005em}
.fy-fw__fo{overflow:visible}
.fy-fw__node{all:unset;box-sizing:border-box;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;position:relative;cursor:pointer;background:#fff;color:var(--fy-navy);box-shadow:inset 0 0 0 3px var(--c),var(--fy-shadow);transition:transform .45s var(--fy-ease),background .35s var(--fy-ease),color .35s var(--fy-ease)}
.fy-fw__node svg{width:34px;height:34px}
.fy-fw__num{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--fy-navy);color:#fff;font:800 12px/24px var(--fy-font-display);text-align:center}
.fy-fw__node[aria-pressed=true]{transform:scale(1.1);background:var(--c);color:var(--ink);box-shadow:var(--fy-shadow-lift)}
.fy-fw__node[aria-pressed=true] .fy-fw__num{background:#fff;color:var(--fy-navy)}
.fy-fw__node:hover{transform:scale(1.06)}.fy-fw__node[aria-pressed=true]:hover{transform:scale(1.1)}
.fy-fw__node:focus-visible{outline:3px solid var(--fy-violet);outline-offset:4px}
.fy-fw__dot{fill:var(--fy-aud-hub);stroke:#fff;stroke-width:2;opacity:0;pointer-events:none}
.fy-fw.is-moving .fy-fw__dot{opacity:1}

/* detail panel (desktop) */
.fy-fw__panel{background:#fff;border-radius:var(--fy-r-card);box-shadow:var(--fy-shadow);padding:clamp(24px,2.6vw,34px);border-top:5px solid var(--c);transition:border-color .4s var(--fy-ease);min-height:320px;display:grid;gap:14px;align-content:start}
.fy-fw__panel .fy-fw__who{font:600 14px var(--fy-font-body);color:var(--fy-text-2)}
.fy-fw__panel h3{margin:0;font:800 28px/1.15 var(--fy-font-display);letter-spacing:-.02em;color:var(--fy-navy)}
.fy-fw__panel p{margin:0;font:400 17px/1.6 var(--fy-font-body);color:var(--fy-text-2)}
.fy-fw__gg{margin:4px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fy-fw__gg div{background:var(--fy-cloud);border-radius:var(--fy-r-sm);padding:12px 14px}
.fy-fw__gg dt{font:700 12.5px var(--fy-font-body);color:var(--fy-text-2);margin:0 0 4px}.fy-fw__gg dd{margin:0;font:600 15px/1.4 var(--fy-font-display);color:var(--fy-navy)}
.fy-fw__panel a,.fy-fw__card a{color:var(--fy-violet-deep);font:700 15.5px var(--fy-font-body);text-decoration:underline;text-underline-offset:3px}
.fy-fw__panel.is-swap>*{animation:fy-fw-in .5s var(--fy-ease) both}
@keyframes fy-fw-in{from{opacity:0;transform:translateY(6px)}}

/* the ordered list: the accessible source, visually hidden on desktop once JS has built the panel; cards on phones */
.fy-fw.is-ready .fy-fw__list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fy-fw__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.fy-fw__card{background:#fff;border-radius:var(--fy-r-card);box-shadow:var(--fy-shadow);padding:22px;border-top:5px solid var(--c);display:grid;gap:10px;align-content:start}
.fy-fw__card h3{margin:0;font:800 21px/1.2 var(--fy-font-display);letter-spacing:-.015em;color:var(--fy-navy)}
.fy-fw__card p{margin:0;font:400 16px/1.55 var(--fy-font-body);color:var(--fy-text-2)}
.fy-fw__card .fy-fw__who{font:600 13.5px var(--fy-font-body);color:var(--fy-text-2)}
.fy-fw__dots{display:none}

/* compact: wheel plus one caption (the selected stage), no panel chrome */
.fy-fw--compact .fy-fw__panel{min-height:0;box-shadow:none;background:var(--fy-cloud)}
.fy-fw--compact .fy-fw__gg div{background:#fff}

@media (max-width:767px){
  .fy-fw,.fy-fw--compact{grid-template-columns:minmax(0,1fr);gap:24px}
  .fy-fw__wheel{max-width:300px}
  .fy-fw__node{width:88px;height:88px}
  .fy-fw__node svg{display:none}.fy-fw__num{position:static;background:none;color:inherit;font:800 28px var(--fy-font-display);width:auto;height:auto;line-height:1}
  .fy-fw__node[aria-pressed=true] .fy-fw__num{background:none;color:inherit}
  .fy-fw__lab{display:none}
  .fy-fw__panel{display:none}
  .fy-fw.is-ready .fy-fw__list,.fy-fw__list{position:static;width:auto;height:auto;overflow:auto;clip-path:none;white-space:normal;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -4px;padding:6px 4px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fy-fw__list::-webkit-scrollbar{display:none}
  .fy-fw__card{flex:0 0 min(86%,340px);scroll-snap-align:center}
  .fy-fw--compact .fy-fw__card:not(.is-on){display:none}
  .fy-fw--compact .fy-fw__list{display:block}
  .fy-fw__dots{display:flex;justify-content:center;gap:8px}
  .fy-fw__dots i{width:8px;height:8px;border-radius:50%;background:var(--fy-line);transition:background .25s,transform .25s}
  .fy-fw__dots i.is-on{background:var(--fy-violet);transform:scale(1.25)}
  .fy-fw--compact .fy-fw__dots{display:none}
}
@media (prefers-reduced-motion:reduce){.fy-fw__node,.fy-fw__arc{transition:none}.fy-fw__panel.is-swap>*{animation:none}}
