/* Benefits ring: N photo segments arranged in a ring with curved labels, the selected benefit explained in the centre.
   Segments draw in one by one when the ring scrolls into view; hover, focus, click or the list below selects one. */
.br{display:grid;justify-items:center;gap:2rem}
.br-ring{position:relative;width:min(100%,700px)}
.br-svg{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
.br-seg{cursor:pointer;outline:none;transform-origin:330px 330px;transform-box:view-box;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.br-shape{stroke:var(--bg);stroke-width:2}
.br-tint{fill:var(--deep);opacity:.45;pointer-events:none;transition:opacity .4s}
.br-label{font-family:var(--sans);font-size:15px;letter-spacing:.02em;fill:var(--muted);transition:fill .3s;pointer-events:none}
.br-seg:hover .br-tint,.br-seg:focus-visible .br-tint{opacity:.15}
.br-seg.is-on{transform:scale(1.045)}
.br-seg.is-on .br-tint{opacity:0}
.br-seg.is-on .br-label{fill:var(--cream);font-weight:600}
.br-seg:focus-visible .br-shape{stroke:var(--gold);stroke-width:4}
.br.is-pre .br-seg{opacity:0;transform:rotate(-14deg) scale(.86)}
.br.is-in .br-seg{transition-delay:calc(var(--i) * 90ms)}
.br-center{position:absolute;left:50%;top:50%;width:41%;translate:-50% -50%;text-align:center;display:grid}
.br-info{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
.br-info.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.br-num{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.2em;color:var(--olive)}
.br-t{margin:0 0 .5rem;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;line-height:1.1;color:var(--cream)}
.br-x{margin:0;font-size:.92rem;color:var(--muted);line-height:1.5}
.br-hint{grid-area:2/1;margin:.8rem 0 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.7}
.br-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:56rem}
.br-list button{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--cream);font-size:.85rem;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.br-list button span{font-size:.7rem;opacity:.65}
.br-list button[aria-pressed="true"],.br-list button:hover{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
@media (max-width:700px){
  .br-ring{width:100%}
  .br-label{font-size:24px}
  .br-center{position:static;translate:none;width:100%;margin-top:1.4rem}
  .br-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.br.is-pre .br-seg{opacity:1;transform:none}.br-seg,.br-info{transition:none}}