/* Hero slider. Each slide sets --tint (background) and --accent (glow and card labels);
 * registered as colours so they cross-fade between slides. */
@property --tint { syntax: '<color>'; inherits: true; initial-value: #DDF4FC; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #1BB8EC; }
.sf-hero { --tint: #DDF4FC; --accent: #1BB8EC; position: relative; isolation: isolate; display: grid; gap: 28px; margin: 0 -16px; padding: 28px 16px 72px; background: var(--milk); overflow: hidden; transition: --tint 1.1s var(--ease), --accent 1.1s var(--ease); }
.sf-hero::before { content: ""; position: absolute; z-index: -1; right: -30%; top: -20%; width: 95%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--tint) 0%, transparent 68%); }

/* Text slides stack in one grid cell. */
.sf-hero__texts { display: grid; }
.sf-hero__text { grid-area: 1 / 1; align-self: end; }
html.js .sf-hero__text:not(.is-active):not(.is-out) { visibility: hidden; }
html.js .sf-hero__text:not(.is-active) .sf-eyebrow, html.js .sf-hero__text:not(.is-active) .sf-hero__lead, html.js .sf-hero__text:not(.is-active) .sf-hero__cta { opacity: 0; transform: translateY(14px); }
.sf-hero__text .sf-eyebrow, .sf-hero__lead, .sf-hero__cta { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sf-hero__text.is-active .sf-hero__lead { transition-delay: .35s; }
.sf-hero__text.is-active .sf-hero__cta { transition-delay: .45s; }

.sf-hero__title { margin: 0 0 14px; font: 900 clamp(2.1rem, 9vw, 4.6rem)/1.04 var(--head); letter-spacing: -.025em; color: var(--ink); }
.sf-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sf-w > span { display: inline-block; transition: transform .75s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--wi, 0) * 55ms + 80ms); }
html.js .sf-hero__text:not(.is-active) .sf-w > span { transform: translateY(110%); }
html.js .sf-hero__text.is-out .sf-w > span { transform: translateY(-110%); transition-duration: .45s; transition-delay: calc(var(--wi, 0) * 25ms); }
html.js .sf-hero__text.is-out .sf-eyebrow, html.js .sf-hero__text.is-out .sf-hero__lead, html.js .sf-hero__text.is-out .sf-hero__cta { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }
.sf-hero__title em { position: relative; font-style: normal; color: var(--primary); white-space: nowrap; }
.sf-hero__title em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .24em; z-index: -1; border-radius: 99px; background: var(--accent); opacity: .45; transform-origin: left; transition: transform .7s var(--ease) .55s, background .6s; }
html.js .sf-hero__text:not(.is-active) .sf-hero__title em::after { transform: scaleX(0); transition-delay: 0s; }
.sf-hero__lead { margin: 0 0 22px; max-width: 46ch; font-size: 1.05rem; color: var(--ink-2); }
.sf-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Slide tabs with progress, arrows, pause. */
.sf-hero__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.sf-hero__tabs { display: flex; gap: 6px; min-width: 0; flex: 1; }
.sf-hero__tab { position: relative; flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 0 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--mute); }
.sf-hero__tabn { font: 900 .78rem var(--head); }
.sf-hero__tabl { display: none; font: 800 .82rem var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-hero__tab.is-active, .sf-hero__tab:hover { color: var(--ink); }
.sf-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sf-hero__bar span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.sf-hero__tab.is-done .sf-hero__bar span { transform: scaleX(1); }
.sf-hero__tab.is-active .sf-hero__bar span { animation: sf-hero-fill var(--dur, 6.5s) linear forwards; }
.sf-hero.is-paused .sf-hero__tab.is-active .sf-hero__bar span { animation-play-state: paused; }
@keyframes sf-hero-fill { to { transform: scaleX(1); } }
.sf-hero__arrows { display: flex; gap: 6px; }
.sf-hero__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--milk); color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.sf-hero__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.sf-hero__arrow:active { transform: scale(.94); }
.sf-hero__arrow .sf-i { width: 18px; height: 18px; }
.sf-hero__pi { position: relative; width: 12px; height: 12px; }
.sf-hero__pi::before, .sf-hero__pi::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: currentColor; }
.sf-hero__pi::before { left: 1px; } .sf-hero__pi::after { right: 1px; }
.sf-hero__pause[aria-pressed="true"] .sf-hero__pi::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sf-hero__pause[aria-pressed="true"] .sf-hero__pi::after { display: none; }

.sf-hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.sf-hero__proof li { display: grid; }
.sf-hero__proof strong { font: 900 1.5rem/1.1 var(--head); color: var(--ink); }
.sf-hero__proof span { font-size: .85rem; color: var(--mute); }

/* The deck: one card per slide. The front card shows the whole photo (never cropped)
 * over a blurred copy of itself; the next slides fan out behind it. On change the
 * front card flies out and tucks in at the back while the next one rises forward. */
.sf-hero__visual { position: relative; justify-self: center; width: min(78%, 330px); margin: 10px 0 18px; touch-action: pan-y; perspective: 1200px; }
.sf-hero__visual::before { content: ""; position: absolute; z-index: -1; inset: 8% -14% -6% -14%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent), transparent); opacity: .35; filter: blur(30px); transition: background .8s var(--ease); }
.sf-hero__deck { position: relative; aspect-ratio: 4 / 5; transform-style: preserve-3d; }
.sf-hero__frame { --x: 0px; --y: 0px; --r: 0deg; --s: 1; position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 50% 38%, #fff 0, var(--tint) 75%); box-shadow: 0 30px 60px -28px rgba(16,35,46,.55), 0 0 0 1px rgba(255,255,255,.7) inset; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s)); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.9,.25,1), filter .9s var(--ease), opacity .6s var(--ease); will-change: transform; }
.sf-hero__frame[data-pos="0"] { z-index: 4; }
.sf-hero__frame[data-pos="1"] { z-index: 3; --x: 26px; --y: -16px; --r: 5deg; --s: .93; filter: saturate(.85) brightness(.97); }
.sf-hero__frame[data-pos="2"] { z-index: 2; --x: 48px; --y: -30px; --r: 10deg; --s: .86; filter: saturate(.7) brightness(.94); }
.sf-hero__frame[data-pos="3"] { z-index: 1; --x: 64px; --y: -42px; --r: 14deg; --s: .8; filter: saturate(.6) brightness(.9); opacity: .9; }
.sf-hero__frame.is-leaving { animation: sf-deck-out 1s cubic-bezier(.55,0,.25,1) both; }
@keyframes sf-deck-out {
	0% { z-index: 6; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
	45% { z-index: 6; transform: translate3d(-78%, 6%, 0) rotate(-16deg) scale(.96); }
	55% { z-index: 0; }
	100% { z-index: 0; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s)); }
}
.sf-hero__frame.is-active { transform: translate3d(0, 0, 0) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .9s cubic-bezier(.2,.9,.25,1) .08s, filter .9s var(--ease); }
.sf-hero__visual.is-tilting .sf-hero__frame.is-active { transition: transform .18s linear; }
/* Blurred copy fills the card around the photo. */
.sf-hero__bg { position: absolute; inset: -12%; background: center / cover no-repeat; filter: blur(26px) saturate(1.5); opacity: .55; transform: scale(1.1); }
.sf-hero__fit { position: absolute; inset: 7% 7% 17%; }
.sf-hero__fit picture { display: contents; }
.sf-hero__img { position: absolute; inset: 0; margin: auto; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 16px; filter: drop-shadow(0 18px 24px rgba(16,35,46,.28)); transform: scale(.94) translateY(10px); opacity: .6; transition: transform 1.2s cubic-bezier(.16,1,.3,1) .25s, opacity .8s var(--ease) .2s; }
.sf-hero__frame.is-active .sf-hero__img, html:not(.js) .sf-hero__frame[data-pos="0"] .sf-hero__img { transform: none; opacity: 1; }
.sf-hero__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.18) 100%); mix-blend-mode: soft-light; }
.sf-hero__label { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); font: 900 .9rem var(--head); }
.sf-hero__label span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .74rem; }
.sf-hero__art { display: grid; place-items: center; width: 100%; height: 100%; }
.sf-hero__art img { width: 78%; height: auto; filter: drop-shadow(0 18px 24px rgba(16,35,46,.22)); }


/* Price cards: the slide's card swaps, the deal card stays. */
.sf-hero__chip { position: absolute; z-index: 4; display: grid; gap: 2px; min-width: 150px; padding: 10px 14px; border-radius: 14px; background: var(--milk); box-shadow: 0 14px 30px -12px rgba(16,35,46,.35); color: var(--ink); text-decoration: none; }
.sf-hero__chip:hover { color: var(--ink); }
.sf-hero__chips .sf-hero__chip { opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .4s var(--ease), transform .6s var(--ease); pointer-events: none; }
.sf-hero__chips .sf-hero__chip.is-active { opacity: 1; transform: none; transition-delay: .6s; pointer-events: auto; }
.sf-hero__chipname { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.sf-hero__chipprice { display: flex; align-items: center; gap: 8px; font: 900 1.05rem var(--head); font-variant-numeric: tabular-nums; }
.sf-hero__chipprice em { font-style: normal; padding: 1px 7px; border-radius: 6px; background: var(--berry); font-size: .72rem; }
.sf-hero__chipprice em.is-soft { background: var(--cream); color: var(--ink-2); }
.sf-hero__chip--1 { right: 0; top: 4%; }
.sf-hero__chip--2 { display: none; animation: sf-float 6s ease-in-out infinite; }
@keyframes sf-float { 50% { transform: translateY(-8px); } }
.sf-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40px; color: var(--cream); }

@media (min-width: 720px) {
	.sf-hero { grid-template-columns: 1.15fr 1fr; align-items: center; margin: 0 -24px; padding: 48px 32px 96px; }
	.sf-hero__visual { width: 82%; max-width: 380px; }
	.sf-hero__chip--1 { right: auto; left: -22%; top: 14%; }
	.sf-hero__chip--2 { display: grid; right: -4%; bottom: 10%; }
	.sf-hero__tabl { display: block; }
}
@media (min-width: 720px) and (max-width: 1023px) { .sf-hero__title { font-size: 2.9rem; } }
@media (min-width: 1024px) {
	.sf-hero { margin: -24px calc(50% - 50vw) 0; padding: 64px max(32px, calc(50vw - 568px)) 120px; gap: 64px; min-height: min(760px, calc(100dvh - 112px)); }
	.sf-hero__lead { font-size: 1.18rem; }
	.sf-hero__visual { max-width: 440px; }
	.sf-hero__chip--1 { left: -30%; top: 12%; }
	.sf-hero__chip--2 { right: -6%; bottom: 14%; }
	.sf-hero__wave { height: 64px; }
}
@media (min-width: 1400px) { .sf-hero { padding-inline: calc(50vw - 628px); } }
@media (prefers-reduced-motion: reduce) { .sf-hero__frame, .sf-hero__img { transition: none; } .sf-hero__frame.is-leaving { animation: none; } }