
.home main { position: relative; }
.results { border-top: var(--bw) solid var(--line); isolation: isolate; overflow: clip; }
.results::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: min(900px, 100%); background: radial-gradient(56% 64% at 88% 0%, rgba(61, 107, 255, .2), rgba(61, 107, 255, .05) 52%, rgba(61, 107, 255, 0) 78%); pointer-events: none; }
.results .figures { margin-top: 0; }
.results .block-more { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.results .case-list { margin: var(--section) 0 0; }
.grt { margin: clamp(40px, 6vw, 80px) 0; }
.grt-title { margin: 0 0 var(--s-4); font: 500 var(--f-sm)/1 var(--font); letter-spacing: 0; color: var(--text-3); }
.grt-list { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: var(--s-3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.grt-list::-webkit-scrollbar { display: none; }
.grt-list li { scroll-snap-align: start; display: grid; }
.grt-list a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-content: stretch; gap: var(--s-5) var(--s-3); min-height: 236px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-tile); border: var(--bw) solid var(--line-2); background: var(--bg-1); text-decoration: none; color: inherit; transition: border-color var(--dur-2) var(--ease-in-out), background var(--dur-2) var(--ease-in-out); }
.grt-list a:hover { border-color: var(--acid); background-color: var(--bg-2); }
.grt-list a::after { content: '\2197'; grid-column: 2; grid-row: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--line-2); font: 500 18px/1 var(--font); color: var(--text); transition: background var(--dur-2) var(--ease), color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.grt-list a:hover::after { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); transform: rotate(45deg); }
.grt-list .grt-all a { border-style: dashed; background: transparent; }
.grt-list .grt-all b { color: var(--acid); }
.grt-list .grt-all span { color: var(--text-2); font-weight: 500; }
.grt-list .grt-all a::after { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
@media (min-width: 1101px) {
  .grt-list { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .grt-list a { min-height: 212px; }
}
.grt-list b { grid-column: 1; grid-row: 1; font: 500 var(--f-sm)/1.3 var(--font); color: var(--text-2); }
.grt-list span { grid-column: 1 / -1; grid-row: 2; font: 600 var(--f-lg)/1.25 var(--font); letter-spacing: -.015em; color: var(--text); }
.grt-list i { grid-column: 2; grid-row: 1; font: 600 var(--f-md)/1.3 var(--font); font-style: normal; color: var(--acid); }
.results .roster-stage { margin-top: clamp(40px, 6vw, 80px); }
.refund { margin: clamp(40px, 6vw, 80px) 0 0; }
.refund-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-4); }
.refund-list li { display: flex; flex-direction: column; gap: var(--s-4); min-height: 240px; padding: clamp(22px, 2.6vw, 34px); border: var(--bw) solid var(--line); border-radius: var(--r-tile); background: var(--bg-1); }
.refund-list b { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--font); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.refund-list span { margin-top: auto; font: 400 var(--t-body)/1.5 var(--font); color: var(--text-2); }
.refund-more { margin: var(--s-4) 0 0; font: 500 var(--f-sm)/1.4 var(--font); color: var(--text-3); }
.refund-more a { color: var(--text); }
.how { border-top: var(--bw) solid var(--line); }
.steps { --p: 1; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--bw) solid var(--line-2); }
.steps::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--acid); transform-origin: left; transform: scaleX(var(--p)); }
.steps li { display: grid; gap: var(--s-3); align-content: start; padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px) 0 0; }
.steps li + li { padding-left: clamp(16px, 2.4vw, 32px); border-left: var(--bw) solid var(--line); }
.steps li { --on: clamp(0, (var(--p) - .12) * 9, 1); }
.steps li:nth-child(2) { --on: clamp(0, (var(--p) - .34) * 9, 1); }
.steps li:nth-child(3) { --on: clamp(0, (var(--p) - .56) * 9, 1); }
.steps li > :not(.step-no) { opacity: calc(.5 + .5 * var(--on)); }
.step-no { font: 600 clamp(56px, 8vw, 128px)/.86 var(--display); letter-spacing: -.06em; color: var(--acid); opacity: calc(.28 + .72 * var(--on)); margin-bottom: var(--s-4); }
.steps p { color: var(--fg-2); max-width: 26em; }
.how .block-more { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; border-top: 0; padding-left: 18px; }
  .steps::before { top: 0; left: 0; width: 2px; height: 100%; transform-origin: top; transform: scaleY(var(--p)); }
  .steps::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--line-2); z-index: -1; }
  .steps li, .steps li + li { grid-template-columns: 64px minmax(0, 1fr); gap: 6px var(--s-3); padding: var(--s-5) 0; border-left: 0; border-bottom: var(--bw) solid var(--line); }
  .steps .step-no { grid-row: 1 / span 2; font-size: 52px; margin: 0; }
  .how .block-more .btn { flex: 1 1 100%; }
}
.faq { border-top: var(--bw) solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq-side { display: grid; gap: var(--s-5); justify-items: start; position: sticky; top: calc(var(--header-h) + var(--pv-h) + 32px); }
.faq-side .sec-head { grid-template-columns: 1fr; margin-bottom: 0; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-side { position: static; } }
.rail { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; contain: strict; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.rail.is-on { opacity: 1; }
.rail-disc { position: absolute; left: 0; top: 0; width: 720px; height: 720px; opacity: 0; will-change: transform, opacity; }
.rail-disc canvas { width: 100%; height: 100%; }
.rail-on .sm-hero.is-done { visibility: hidden; }
.rail-on.scripted .sm-portal.is-open:not(.is-flow) { background: none; }
.rail-on.scripted .sm-portal.is-open:not(.is-flow)::before { content: none; }
.rail-on .outro-disc { visibility: hidden; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) { .rail { display: none; } .rail-on .outro-disc { visibility: visible; } }
.home .site-footer { content-visibility: auto; contain-intrinsic-size: auto 760px; }
@media (min-width: 1101px) { .roster-home { padding-bottom: 96px; } .roster-home .artist:nth-child(3n + 2) { translate: 0 48px; } .roster-home .artist:nth-child(3n) { translate: 0 96px; } }
.reviews-title { font: 600 clamp(26px, 2.8vw, 40px)/1.1 var(--font); letter-spacing: -.03em; margin: 0 0 var(--s-5); }
.reviews-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.review { display: grid; gap: var(--s-4); align-content: space-between; padding: var(--s-5); border: var(--bw) solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.review blockquote { margin: 0; color: var(--fg); line-height: 1.5; }
.review-by { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--t-small); color: var(--fg-2); }
.review-by a, .reviews-more a { color: var(--acid); }
.reviews-more { margin: var(--s-5) 0 0; }
.case-metrics s { color: var(--fg-3); }
.why { border-top: var(--bw) solid var(--line); }
.why-head { display: grid; gap: var(--s-5); justify-items: center; max-width: 900px; margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; }
.why-head h2 { font-size: clamp(48px, 7vw, 112px); letter-spacing: -.05em; }
.why-sub { max-width: 28em; font: 500 var(--t-sub)/1.3 var(--font); letter-spacing: -.02em; color: var(--text-2); text-wrap: balance; }
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.tile { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-4); min-height: 300px; padding: clamp(24px, 3vw, 44px); border: var(--bw) solid var(--line); border-radius: var(--r-tile); background: var(--bg-1); overflow: hidden; }
.tile > :last-child { margin-top: auto; }
.tile-half { grid-column: span 3; }
.tile-k { font: 600 var(--f-sm)/1.3 var(--font); color: var(--text-2); }
.tile-m { font: 500 clamp(28px, 2.6vw, 40px)/1.08 var(--font); letter-spacing: -.035em; color: var(--text); text-wrap: balance; }
.tile-t { max-width: 30em; font-size: var(--t-body); line-height: 1.5; color: var(--text-2); }
.tile-price { position: relative; isolation: isolate; grid-column: span 4; grid-row: span 2; background: radial-gradient(80% 90% at 100% 0%, rgba(199, 255, 61, .13), rgba(199, 255, 61, 0) 62%), var(--bg-1); }
.tile-price::after { content: ''; position: absolute; z-index: -1; right: clamp(24px, 3vw, 44px); bottom: clamp(24px, 3vw, 44px); width: 194px; height: 44%; opacity: .34; pointer-events: none;
  background: linear-gradient(var(--acid), var(--acid)) 0 100% / 12px 30% no-repeat, linear-gradient(var(--acid), var(--acid)) 26px 100% / 12px 52% no-repeat, linear-gradient(var(--acid), var(--acid)) 52px 100% / 12px 40% no-repeat, linear-gradient(var(--acid), var(--acid)) 78px 100% / 12px 76% no-repeat, linear-gradient(var(--acid), var(--acid)) 104px 100% / 12px 58% no-repeat, linear-gradient(var(--acid), var(--acid)) 130px 100% / 12px 100% no-repeat, linear-gradient(var(--acid), var(--acid)) 156px 100% / 12px 68% no-repeat, linear-gradient(var(--acid), var(--acid)) 182px 100% / 12px 44% no-repeat; }
.tile-big { font: 500 clamp(72px, 10vw, 168px)/.9 var(--font); letter-spacing: -.06em; color: var(--acid); white-space: nowrap; }
.tile-price .tile-t { max-width: 26em; font-size: var(--t-lead); }
.tile-price .btn { align-self: flex-start; }
.tile-logos { display: flex; gap: var(--s-3); margin: var(--s-2) 0 0; }
.tile-logos img { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2); }
.tile-rate { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tile-rate svg { width: 16px; height: 16px; flex: none; }
.tile-rate b { color: var(--acid); }
.tile-rate:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile-half { grid-column: span 1; min-height: 260px; }
  .tile-price { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; gap: var(--s-3); }
  .tile, .tile-half, .tile-price { grid-column: 1 / -1; min-height: 0; }
  .tile > :last-child { margin-top: var(--s-2); }
  .tile-price::after { content: none; }
  .why-head { justify-items: start; text-align: left; }
}
