/* Sprint 25 – premium UI preview layer (loaded last, preview builds only). Presentation only. */
@media (min-width: 1100px) { :root { --s25-cols: 40px 170px minmax(110px, .8fr) 150px minmax(180px, 1fr) minmax(0, 1.1fr) 250px; } }
:root { --s25-bg: #070A12; --s25-surface: #0D111C; --s25-line: rgba(255,255,255,.08); --s25-line-2: rgba(255,255,255,.14); --s25-mint: #3CE6A6; --s25-violet: #7C5CFF; --s25-r: 18px; }
body { background: radial-gradient(1200px 520px at 78% -6%, rgba(124,92,255,.14), transparent 62%), radial-gradient(900px 480px at 8% 4%, rgba(60,230,166,.08), transparent 60%), var(--s25-bg); }

/* header */
.site-header { background: rgba(7,10,18,.82); border-bottom: 1px solid var(--s25-line); }
.s25-search { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 0 18px; height: 40px; font-weight: 700; }

/* hero */
.i-hero .i-eyebrow { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(60,230,166,.35); background: rgba(60,230,166,.08); font: 700 11px/1 var(--f-b); letter-spacing: .12em; }
.i-hero .i-eyebrow::before { display: none; }
.i-hero h1 { font-size: clamp(36px, 4.1vw, 58px); line-height: 1.04; }
.i-hero .lede { font-size: 17px; }
.i-pill { background: rgba(255,255,255,.03); border-color: var(--s25-line); backdrop-filter: blur(8px); }
.i-float { border-radius: 22px; }

/* top four cards */
.s25-top { padding: 18px 0 8px; position: relative; z-index: 2; }
.s25-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s25-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px 18px; text-align: center; border-radius: var(--s25-r);
  border: 1px solid var(--s25-line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--s25-surface); box-shadow: 0 30px 60px -40px #000, 0 1px 0 rgba(255,255,255,.06) inset; transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.s25-card::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--accent, var(--s25-mint)), transparent); }
@media (hover: hover) and (pointer: fine) { .s25-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent, var(--s25-mint)) 55%, transparent); box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--accent, #3CE6A6) 60%, #000); } }
.s25-lg { display: grid; place-items: center; height: 56px; }
.s25-lg .clogo-img { height: 36px; width: auto; max-width: 150px; }
.s25-card h3 { margin: 0; font: 700 19px/1.2 var(--f-d); letter-spacing: -.01em; }
.s25-ring, .s25-ring svg { width: 112px; height: 112px; }
.s25-of { margin: 2px 0 0; display: grid; gap: 2px; min-height: 52px; align-content: start; }
.s25-of b { font: 700 clamp(18px, 1.6vw, 22px)/1.15 var(--f-d); color: #fff; font-variant-numeric: lining-nums; }
.s25-of i { font: 500 12.5px/1.3 var(--f-b); font-style: normal; color: var(--tx2, #aeb3c2); }
.s25-of.none b { color: var(--tx2, #aeb3c2); font-size: 16px; }
.s25-act { width: 100%; margin-top: 4px; }
.s25-act .btn, .s25-act .cta-stack { width: 100%; justify-content: center; }
@media (max-width: 1099px) { .s25-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .s25-top { padding-top: 12px; }
  .s25-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .s25-cards::-webkit-scrollbar { display: none; }
  .s25-card { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
}

/* trust strip */
.s25-trust { padding: 14px 0 6px; }
.s25-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--s25-line); border-radius: var(--s25-r); background: rgba(255,255,255,.025); }
.s25-trust li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; }
.s25-trust li + li { border-left: 1px solid var(--s25-line); }
.s25-ti { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--s25-mint); background: rgba(60,230,166,.09); border: 1px solid rgba(60,230,166,.22); }
.s25-trust b { display: block; font: 700 14px/1.25 var(--f-b); color: #fff; }
.s25-trust small { display: block; margin-top: 2px; font: 500 12px/1.35 var(--f-b); color: var(--tx2, #aeb3c2); }
@media (max-width: 1023px) { .s25-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s25-trust li:nth-child(3) { border-left: 0; } .s25-trust li:nth-child(n+3) { border-top: 1px solid var(--s25-line); } }
@media (max-width: 559px) { .s25-trust ul { grid-template-columns: 1fr; } .s25-trust li + li { border-left: 0; border-top: 1px solid var(--s25-line); } }

/* ranked table */
@media (min-width: 1100px) {
  .s25-th { display: grid; grid-template-columns: var(--s25-cols); gap: 16px; padding: 0 10px 8px 17px; font: 700 11px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; color: var(--tx3, #8b90a0); }
  .s25-th .c2 { grid-column: 2 / span 2; }
  .s25-th .r { text-align: center; }
  .t10-main { grid-template-columns: var(--s25-cols); gap: 16px; padding: 12px 10px 12px 16px; }
}
@media (max-width: 1099px) { .s25-th { display: none; } }
.t10 { border-radius: var(--s25-r); border: 1px solid var(--s25-line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), var(--s25-surface); }
@media (hover: hover) and (pointer: fine) { .t10:hover { border-color: var(--s25-line-2); } }

/* profile */
.s25-cats { margin: 0 0 28px; padding: 20px; border-radius: var(--s25-r); border: 1px solid var(--s25-line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), var(--s25-surface); }
.s25-cats h3 { margin: 0 0 14px; font: 700 18px/1.2 var(--f-d); }
.s25-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.s25-cats li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.s25-cats li b { position: absolute; top: 22px; font: 700 18px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.s25-cats li svg { width: 64px; height: 64px; }
.s25-cats li span { margin-top: 4px; font: 600 12.5px/1.25 var(--f-b); color: #fff; }
.s25-cats li small { font: 500 11px/1.2 var(--f-b); color: var(--tx3, #8b90a0); }
.s25-cats .subtle { margin: 14px 0 0; font-size: 12px; }
@media (max-width: 639px) { .s25-cats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } }
.pv .p-hero-bg { opacity: 1; background: radial-gradient(900px 340px at 20% 0%, color-mix(in srgb, var(--accent, #3CE6A6) 26%, transparent), transparent 70%), radial-gradient(700px 320px at 90% 10%, rgba(124,92,255,.18), transparent 70%); }
.pv-nav { background: rgba(7,10,18,.9); }
@media (prefers-reduced-motion: reduce) { .s25-card { transition: none; } .s25-card:hover { transform: none; } }

/* hero: art + message only (the featured offer is the first card below) */
.i-hero .i-float { display: none; }
@media (min-width: 1000px) {
  .i-hero { padding-top: 28px; padding-bottom: 14px; }
  .i-hero .i-pill { display: none; }
  .i-hero h1 { font-size: clamp(34px, 3.7vw, 52px); margin: 14px 0 12px; }
  .i-hero .lede { margin-bottom: 20px; }
  .i-hero .i-stage.i-d { width: 74%; right: 2%; top: -6px; }
}
@media (min-width: 1000px) { .i-hero .i-copy { min-height: 0; padding-top: 18px; padding-bottom: 8px; } .i-hero .i-stage.i-d { top: 0; width: 70%; } }
.hx-ticker, .i-stats { display: none; }
@media (max-width: 559px) {
  .s25-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s25-trust li { padding: 12px; gap: 10px; }
  .s25-trust li + li { border-top: 0; }
  .s25-trust li:nth-child(odd) { border-left: 0; } .s25-trust li:nth-child(even) { border-left: 1px solid var(--s25-line); } .s25-trust li:nth-child(n+3) { border-top: 1px solid var(--s25-line); }
  .s25-ti { width: 34px; height: 34px; border-radius: 10px; } .s25-ti svg { width: 18px; height: 18px; }
  .s25-trust b { font-size: 13px; } .s25-trust small { display: none; }
  .t10 .btn { min-height: 46px; height: 46px; }
  .t10-main { padding-top: 12px; padding-bottom: 10px; gap: 8px 12px; }
}

/* directory / list cards share the card surface of the home cards */
.rcard.rc3 { background: linear-gradient(180deg, #161926, #0C0E17 78%) padding-box, linear-gradient(165deg, color-mix(in srgb, var(--accent, #3CE6A6) 55%, #3CE6A6) 0%, rgba(60,230,166,.16) 38%, rgba(255,255,255,.08) 100%) border-box; }
/* profile: the score ring card is a compact companion of the offer card */
.pv-dl-score .dial.xl { --sz: 236px !important; }

/* compact ranked rows (desktop): two key facts, tighter rhythm – the full facts stay in the expandable panel */
@media (min-width: 1100px) {
  .t10-main { min-height: 84px; padding-top: 10px; padding-bottom: 10px; }
  .t10-bl li:nth-child(n+3) { display: none; }
  .t10-logo { padding: 6px 12px; min-height: 0; }
  .t10-act .cta-geo, .t10-act [data-cta-geo] { font-size: 11.5px; }
}

/* ================= iteration 2 ================= */
/* ---------- profile hero ---------- */
.pv { padding-top: 6px; }
.s25-ph { position: relative; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 216px minmax(0, 430px); align-items: stretch; margin: 6px 0 26px; padding: 26px; border-radius: 26px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--s25-line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--s25-surface); box-shadow: 0 50px 90px -60px #000, 0 1px 0 rgba(255,255,255,.07) inset; }
.s25-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 260px at 6% 0%, color-mix(in srgb, var(--accent, #3CE6A6) 30%, transparent), transparent 70%), radial-gradient(520px 300px at 62% 110%, rgba(124,92,255,.22), transparent 70%), radial-gradient(420px 220px at 100% 0%, rgba(60,230,166,.12), transparent 70%); }
.s25-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 90% at 30% 20%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 30% 20%, #000, transparent 75%); }
.s25-ph-main { display: grid; align-content: start; gap: 16px; min-width: 0; }
.s25-ph-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.s25-ph-id .ph-logo { flex: none; display: grid; place-items: center; min-width: 96px; height: 76px; padding: 0 16px; border-radius: 18px; background: linear-gradient(180deg, #0B0D15, #07080D); border: 1px solid var(--s25-line-2); box-shadow: 0 18px 30px -20px #000; }
.s25-ph-id .clogo-img { height: 44px; width: auto; max-width: 200px; }
.s25-ph-id h1 { margin: 0; font: 700 clamp(30px, 3.3vw, 46px)/1.05 var(--f-d); letter-spacing: -.025em; overflow-wrap: anywhere; }
.s25-ph-id .dm { display: block; margin-top: 6px; font: 500 13px var(--f-m); color: var(--tx3, #8b90a0); }
.s25-ph-attrs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s25-ph-attrs li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--s25-line-2); background: rgba(255,255,255,.04); font: 600 12px/1 var(--f-b); color: #D7DCE8; }
.s25-ph-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: 16px; background: var(--s25-line); border: 1px solid var(--s25-line); }
.s25-ph-facts > div { padding: 12px 14px; background: rgba(9,12,20,.82); min-width: 0; }
.s25-ph-facts dt { margin: 0 0 4px; font: 700 10.5px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; color: var(--tx3, #8b90a0); }
.s25-ph-facts dd { margin: 0; font: 600 14px/1.3 var(--f-b); color: #fff; overflow-wrap: anywhere; }
.s25-ph-facts small { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--f-b); color: var(--tx3, #8b90a0); }
.s25-st { display: inline-block; margin-left: 6px; font: 600 11.5px/1 var(--f-b); color: var(--s25-mint); }
.s25-ph-score { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; color: inherit; text-decoration: none; }
.s25-ph-ring, .s25-ph-ring svg { width: 188px; height: 188px; }
.s25-ph-cap b { display: block; font: 700 14px/1.2 var(--f-b); color: #fff; }
.s25-ph-cap small { display: block; margin-top: 3px; font: 500 12px/1.3 var(--f-b); color: var(--tx2, #aeb3c2); }
.s25-ph-offer .pv-offerc { height: 100%; margin: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(60,230,166,.1), rgba(124,92,255,.07)), rgba(7,10,18,.7); backdrop-filter: blur(8px); }
.s25-ph-offer .pvo-t { font-size: clamp(20px, 1.9vw, 25px); }
/* the key facts now live in the hero; the layer below keeps good-to-know, watch-outs and actions */
.pv-dl-facts { display: none; }
@media (min-width: 760px) and (max-width: 1180px) { .s25-ph { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; } .s25-ph-main { grid-column: 1 / -1; grid-row: 1; } .s25-ph-score { grid-column: 1; grid-row: 2; align-self: center; justify-items: center; text-align: center; } .s25-ph-ring, .s25-ph-ring svg { width: 168px; height: 168px; } .s25-ph-offer { grid-column: 2; grid-row: 2; } .s25-ph-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .s25-ph { grid-template-columns: 1fr; padding: 16px; gap: 14px; border-radius: 22px; margin-bottom: 18px; }
  .s25-ph-main { display: contents; } .s25-ph-main .s25-ph-facts { margin-top: 0; }
  .s25-ph-id { grid-row: 1; gap: 12px; } .s25-ph-id .ph-logo { min-width: 72px; height: 58px; padding: 0 10px; border-radius: 14px; } .s25-ph-id .clogo-img { height: 32px; max-width: 120px; }
  .s25-ph-id h1 { font-size: 28px; }
  .s25-ph-attrs { grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .s25-ph-attrs::-webkit-scrollbar { display: none; } .s25-ph-attrs li { flex: none; }
  .s25-ph-score { grid-row: 3; grid-column: 1; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--s25-line); background: rgba(255,255,255,.035); }
  .s25-ph-ring, .s25-ph-ring svg { width: 112px; height: 112px; }
  .s25-ph-offer { grid-row: 4; grid-column: 1; }
  .s25-ph-facts { grid-row: 5; grid-template-columns: 1fr 1fr; }
}

/* ---------- mobile Top-10: compact cards ---------- */
@media (max-width: 899px) {
  .t10-main { grid-template-columns: 26px 54px minmax(0, 1fr) auto; grid-template-areas: "rk logo nm sc" "of of of of" "act act act act"; gap: 8px 10px; padding: 12px 12px 10px; align-items: center; }
  .t10-rk { display: grid; grid-area: rk; width: 26px; height: 26px; font-size: 12px; align-self: center; }
  .t10-logo { display: flex; grid-area: logo; padding: 4px 6px; min-height: 0; height: 40px; border-radius: 10px; width: 54px; }
  .t10-logo .clogo-img { height: auto; max-height: 28px; width: auto; max-width: 100%; }
  .t10-nm { grid-area: nm; gap: 2px; } .t10-n { font-size: 16px; } .t10-meta, .t10-nm .dm { display: none; }
  .t10-sc { grid-area: sc; display: flex; align-items: center; gap: 8px; } .t10-sc small { display: none; } .t10-d, .t10-d svg { width: 40px; height: 40px; } .t10-sc b { font-size: 24px; }
  .t10-of { grid-area: of; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 0; }
  .t10-of b { font-size: 20px; } .t10-of small { font-size: 11.5px; }
  .t10-of .t10-ch, .t10-of .chips, .t10-of span.chip:nth-of-type(n+2) { display: none; }
  .t10-act { grid-area: act; display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 8px; align-items: center; }
  .t10-act .cta-stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "geo geo" "btn rv"; gap: 4px 12px; align-items: center; }
  .t10-act .cta-geo { grid-area: geo; font-size: 11.5px; margin: 0; justify-content: flex-start; text-align: left; }
  .t10-act .cta-int, .t10-act .cta-wait { grid-area: btn; }
  .t10-act .cta-rv { grid-area: rv; min-height: 36px; white-space: nowrap; font-size: 13px; }
  .t10-act .btn { min-height: 44px; height: 44px; }
  .t10-b { width: 40px; height: 40px; }
}

/* ---------- homepage hero: composition, light and type ---------- */
.i-hero { background: radial-gradient(900px 480px at 82% 10%, rgba(124,92,255,.22), transparent 65%), radial-gradient(700px 420px at 4% 90%, rgba(60,230,166,.14), transparent 70%), #06080F; }
.i-hero .i-fade { background: linear-gradient(90deg, #06080Fee 0, #06080Fb0 38%, transparent 70%), linear-gradient(180deg, transparent 70%, var(--s25-bg)); }
.i-hero h1 { font-weight: 700; letter-spacing: -.035em; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.i-hero h1 em { background: linear-gradient(95deg, #A6F7D6 0%, #3CE6A6 45%, #7C5CFF 105%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.i-hero .lede { color: #C9D0E0; max-width: 46ch; }
.i-hero .i-btn.primary, .i-hero .i-btn:first-child { box-shadow: 0 18px 40px -16px rgba(60,230,166,.65), 0 1px 0 rgba(255,255,255,.5) inset; }
.i-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(60,230,166,.5), rgba(124,92,255,.5), transparent); }
@media (min-width: 1000px) { .i-hero .i-stage.i-d { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 14%), radial-gradient(70% 90% at 62% 48%, #000 40%, transparent 82%); mask-image: linear-gradient(270deg, transparent 0, #000 14%), radial-gradient(70% 90% at 62% 48%, #000 40%, transparent 82%); -webkit-mask-composite: source-in; mask-composite: intersect; } }
.s25-ph-main { display: flex; flex-direction: column; gap: 16px; }
.s25-ph-main .s25-ph-facts { margin-top: auto; }
.s25-ph-offer .pvo-t { font-size: clamp(19px, 1.7vw, 22px); }
.s25-ph-id h1 { font-size: clamp(28px, 2.7vw, 40px); }
@media (max-width: 759px) { .s25-ph-id h1 { font-size: 26px; } }
@media (min-width: 1181px) {
  .s25-ph { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto 1fr; column-gap: 28px; }
  .s25-ph-main { display: contents; }
  .s25-ph-id { grid-column: 1 / span 2; grid-row: 1; }
  .s25-ph-attrs { grid-column: 1 / span 2; grid-row: 2; }
  .s25-ph-score { grid-column: 1; grid-row: 3; align-self: center; }
  .s25-ph-facts { grid-column: 2; grid-row: 3; align-self: center; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .s25-ph-offer { grid-column: 3; grid-row: 1 / span 3; }
  .s25-ph-ring, .s25-ph-ring svg { width: 176px; height: 176px; }
}
/* offer card: conditions compact (full wording stays under "All conditions" and in the Bonus tab) */
.s25-ph-offer .pvo-chips { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.s25-ph-offer .pvo-chips li:nth-child(3) { grid-column: 1 / -1; }
.s25-ph-offer .pvo-chips li { font-size: 13px; }
.s25-ph-offer .pvo-chips li small { display: block; margin-bottom: 2px; }
@media (min-width: 1181px) { .s25-ph-score, .s25-ph-facts { align-self: center; } .s25-ph { grid-template-rows: auto auto 1fr; } }
@media (max-width: 899px) { .t10-n { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font: 700 16px/1.2 var(--f-d); letter-spacing: -.01em; } }
@media (min-width: 1181px) { .s25-ph { grid-template-rows: auto auto auto; align-content: space-between; } .s25-ph-score, .s25-ph-facts { align-self: start; } .s25-ph-offer { align-self: stretch; } }
@media (min-width: 1181px) { .s25-ph-id, .s25-ph-attrs { align-self: start; } .s25-ph-attrs li { align-self: start; } }
@media (max-width: 420px) { .s25-search { padding: 0; width: 40px; justify-content: center; } .s25-search span { display: none; } }
@media (max-width: 759px) { .s25-ph-attrs { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }

.s25-search svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 359px) { .site-header .brand b { font-size: 16px; } .s25-search { width: 36px; height: 36px; } .site-header .hdr { gap: 8px; } }

/* ================= final polish ================= */
/* hero: cinematic integration of the Higgsfield roulette loop (video, poster, loading logic and reduced-motion handling are unchanged) */
.i-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 360px at 78% 46%, rgba(255,150,70,.10), transparent 70%), radial-gradient(620px 420px at 94% 8%, rgba(124,92,255,.26), transparent 70%), radial-gradient(520px 380px at 2% 100%, rgba(60,230,166,.16), transparent 70%); }
.i-hero .i-stage .poster, .i-hero .i-stage video { background-position: center; }
@media (max-width: 1099px) {
  .i-hero { display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 0; overflow: hidden; }
  .i-hero .i-w { order: 1; width: 100%; }
  .i-hero .i-copy { min-height: 0; padding-top: 6px; padding-bottom: 6px; max-width: 640px; }
  .i-hero .i-bottom { display: none; }
  .i-hero .i-stage { order: 2; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; z-index: 0; width: 100% !important; margin: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important; -webkit-mask-composite: source-in !important; mask-composite: intersect !important; }
  .i-hero .i-stage.i-d { aspect-ratio: 1600 / 780 !important; width: 138% !important; margin: -6px 0 0 -40% !important; }
  .i-hero .i-fade { background: linear-gradient(180deg, transparent 72%, var(--s25-bg)); }
  .i-hero .i-copy::before { display: none; }
}
@media (max-width: 760px) {
  .i-hero .i-stage.i-m { aspect-ratio: 720 / 540 !important; width: calc(100% + 32px) !important; margin: -6px -16px 0 !important; }
  .i-hero .i-stage .poster { background-size: cover; }
  .i-hero .i-stage video { object-fit: cover; }
  .i-hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
}
/* tablet/mobile cards: compact proportions */
@media (max-width: 1099px) { .s25-card { padding: 18px 16px 16px; gap: 6px; } .s25-ring, .s25-ring svg { width: 96px; height: 96px; } .s25-lg { height: 44px; } .s25-of { min-height: 44px; } }
.s25-search svg { width: 18px !important; min-width: 18px; height: 18px !important; flex: none; }
.s25-ph-facts > div:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 760px) and (max-width: 1180px) { .s25-ph-facts > div:last-child:nth-child(odd) { grid-column: auto; } .s25-ph-facts > div:nth-child(5) { grid-column: span 2; } }

/* micro-interactions (transform/opacity only, hover only on hover-capable devices, off with reduced motion) */
.s25-card .btn, .t10 .btn, .s25-ph-offer .btn, .i-hero .i-btn { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.s25-card .btn:active, .t10 .btn:active, .s25-ph-offer .btn:active, .i-hero .i-btn:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .i-hero .i-btn:hover { transform: translateY(-2px); }
  .s25-ph-attrs li, .s25-trust li { transition: border-color .2s ease, background-color .2s ease; }
  .s25-ph-attrs li:hover { border-color: rgba(60,230,166,.5); background: rgba(60,230,166,.08); }
}
:focus-visible { outline-color: var(--s25-mint); }
@media (prefers-reduced-motion: reduce) { .s25-card .btn, .t10 .btn, .s25-ph-offer .btn, .i-hero .i-btn { transition: none; } .s25-card .btn:active, .t10 .btn:active, .s25-ph-offer .btn:active, .i-hero .i-btn:active { transform: none; } }
/* phones: one simple vertical mask (cheaper to paint than the two-layer composite) */
@media (max-width: 760px) { .i-hero .i-stage.i-m { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%) !important; -webkit-mask-composite: source-over !important; mask-composite: add !important; } }
/* phones: the offer and its single CTA come before the facts grid; two chips only */
@media (max-width: 759px) {
  .s25-ph-attrs li:nth-child(n+3) { display: none; }
  .s25-ph-facts { grid-row: 6; }
}
@media (max-width: 759px) { .s25-ph-main { display: contents; } .s25-ph-id { grid-row: 1; } .s25-ph-attrs { grid-row: 2; } .s25-ph-score { grid-row: 3; } .s25-ph-offer { grid-row: 4; } .s25-ph-facts { grid-row: 5; } }