.sv-phs__track{--gap:24px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1)*var(--gap))/var(--per));gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0}
.sv-phs__track::-webkit-scrollbar{display:none}
.sv-phs__card{position:relative;overflow:hidden;min-height:440px;border-radius:var(--radius-md);scroll-snap-align:start;cursor:default;outline-offset:-2px}
.sv-phs--teal .sv-phs__card{background:linear-gradient(165deg,var(--sv-teal) 0%,#1c3039 100%);color:var(--sv-sand)}
@supports (color:color-mix(in srgb,red,blue)){.sv-phs--teal .sv-phs__card{background:linear-gradient(165deg,var(--sv-teal) 0%,color-mix(in srgb,var(--sv-teal) 45%,var(--sv-dark-blue)) 100%)}}
.sv-phs--glass .sv-phs__card{background:var(--glass);border:1px solid var(--line);color:var(--ink)}
.sv-phs__front{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;height:100%;padding:32px}
.sv-phs__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sv-phs__num{margin:0;font:400 clamp(56px,5vw,76px)/.9 var(--font-inktrap);color:var(--sv-yellow)}
.sv-phs--glass .sv-phs__num{color:var(--highlight)}
.sv-phs__num span{font-size:.3em;margin-left:6px;opacity:.6;color:currentColor}
.sv-phs__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0;font:500 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.8;text-align:right}
.sv-phs__when{font-weight:600;opacity:1}
.sv-phs__title{margin:0;padding:4px 48px 4px 18px;border-left:3px solid var(--sv-yellow);font:500 clamp(22px,2vw,28px)/1.15 var(--font-display);text-transform:var(--sv-case)}
.sv-phs--glass .sv-phs__title{border-left-color:var(--highlight)}
.sv-phs__hint{position:absolute;right:28px;bottom:28px;width:36px;height:36px;border-radius:50%;border:1px solid currentColor;opacity:.6}
.sv-phs__hint::before,.sv-phs__hint::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.sv-phs__hint::after{transform:translate(-50%,-50%) rotate(90deg)}
.sv-phs__detail{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;padding:32px;overflow:auto;background:var(--sv-sand);color:var(--sv-dark-blue);transform:translateY(101%);transition:transform .55s var(--ease)}
.sv-phs__dtitle{margin:0;font:600 13px/1.35 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-teal)}
.sv-phs__points{display:grid;gap:12px;margin:0;padding:0;list-style:none;font:400 16px/1.45 var(--font-sans)}
.sv-phs__points li{position:relative;padding-left:22px}
.sv-phs__points li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--sv-green-moss)}
.sv-phs__outcome{margin:auto 0 0;padding-top:16px;font:400 15px/1.45 var(--font-sans)}
.sv-phs__outcome strong{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sv-teal)}
.sv-phs__card.is-open .sv-phs__detail,.sv-phs__card:focus-visible .sv-phs__detail{transform:none}
@media (hover:hover){.sv-hover .sv-phs__card:hover .sv-phs__detail{transform:none}}
.sv-phs__nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:36px}
.sv-phs__nav[hidden]{display:none}
.sv-phs__arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.sv-phs__arrow svg{width:18px;height:18px;fill:currentColor}
.sv-phs__arrow:disabled{opacity:.35;cursor:default}
@media (hover:hover){.sv-hover .sv-phs__arrow:not(:disabled):hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}}
.sv-phs__dots{display:flex;gap:10px}
.sv-phs__dot{width:10px;height:10px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--line-strong);opacity:.5;cursor:pointer;transition:width .3s var(--ease),opacity .3s}
.sv-phs__dot.is-on{width:28px;opacity:1;background:var(--accent)}
@media (max-width:1000px){.sv-phs__track{--per:2!important}}
@media (max-width:640px){.sv-phs__track{grid-auto-columns:86%;--gap:16px}.sv-phs__card{min-height:400px}.sv-phs__front,.sv-phs__detail{padding:26px}}
