/* World Sky scroll kit: hero (photo bloom + glass cards + boarding-pass form), TL;DR strip, and the five scroll beats.
   Modeled on Awwwards pack 4 / scroll 21 and pack 2 / hero 1. Used by every AEO page via <link href="sx-kit.css">. */
  .sx { --ink: #0C0C0C; --line: rgba(255,255,255,.12); --dim: rgba(255,255,255,.62); --hdr: 80px;
    --grad: linear-gradient(123deg, #B600A8 0%, #7621B0 45%, #BE4C00 100%);
    background: var(--ink); color: #fff; font-family: 'Inter', sans-serif; overflow-x: clip; }
  .sx h1, .sx h2, .sx h3, .sx-k { font-family: 'Kanit', sans-serif; }
  .sx-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }
  .sx-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Hero, modeled on Awwwards pack 2 / hero 1 ("Aurela"): text lands first, a photo slot sits inside the headline,
     then the photo blooms to fill the hero. Words sit on solid glass cards, never straight on the photo. */
  .sx-herobg { position: relative; isolation: isolate; overflow: clip; background: var(--ink); }
  .sx-herobg .ph { position: absolute; inset: 0; z-index: -1; clip-path: inset(0 round 0); animation: sx-bloom 1.7s .55s cubic-bezier(.7, 0, .2, 1) both; }
  .sx-herobg .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, #0C0C0C 100%); }
  .sx-herobg .ph img, .sx-chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: sx-slide 18s infinite both; }
  .sx-herobg .ph img { animation: sx-slide 18s infinite both, sx-drift 30s ease-in-out infinite alternate; }
  .sx-herobg .ph img:first-child, .sx-chip img:first-child { opacity: 1; }
  .sx-herobg .ph img:nth-child(2), .sx-chip img:nth-child(2) { animation-delay: 6s; }
  .sx-herobg .ph img:nth-child(3), .sx-chip img:nth-child(3) { animation-delay: 12s; }
  @keyframes sx-bloom { from { clip-path: inset(40% 41% 40% 41% round 32px); } to { clip-path: inset(0 round 0); } }
  @keyframes sx-slide { 0% { opacity: 0; } 7% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes sx-drift { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.2%, -.8%, 0); } }
  .sx-hcard { background: rgba(10,10,14,.74); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; padding: clamp(1.4rem, 3vw, 2.5rem); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); max-width: 720px; animation: sx-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .sx-form { animation: sx-rise .9s .15s cubic-bezier(.2, .8, .2, 1) both; background: rgba(10,10,14,.8); }
  @keyframes sx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .sx-hcard h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
  .sx-hcard .sx-grad, .sx-hcard + .sx-grad { background: linear-gradient(90deg, #ff6bd6, #ffb14d); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sx-chip { display: inline-block; position: relative; overflow: hidden; width: 1.85em; height: .74em; border-radius: .38em; vertical-align: -.02em; margin: 0 .1em; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
  .sx-glance { position: relative; margin-top: -1px; padding-bottom: clamp(1rem, 3vw, 2.5rem); }
  .sx-glance .sx-tldr { display: block; max-width: none; margin-top: 0; padding-top: 0; border-top: 0; }
  .sx-glance .sx-tldr h2 { margin-bottom: 1rem; }
  .sx-glance .sx-tldr ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }
  .sx-glance .sx-tldr li { margin: 0; padding-left: 1rem; border-left: 2px solid #c35cff; }
  /* Hero */
  .sx-hero { padding-top: calc(var(--hdr) + clamp(2rem, 5vw, 4.5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .sx-crumbs { font-size: .78rem; letter-spacing: .06em; color: var(--dim); }
  .sx-crumbs a:hover { color: #fff; }
  .sx-claim { display: inline-flex; align-items: center; gap: .6rem; margin: 1.4rem 0 1.6rem; animation: sx-pulse 2.2s ease-in-out infinite; }
  .sx-claim svg { width: 18px; height: 18px; }
  @keyframes sx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(182,0,168,.55), 4px 4px 12px #7721B1 inset; } 50% { box-shadow: 0 0 0 16px rgba(182,0,168,0), 4px 4px 12px #7721B1 inset; } }
  .sx-hero h1 { font-weight: 300; font-size: clamp(3rem, 7.4vw, 7rem); line-height: .92; letter-spacing: -.02em; }
  .sx-answer { margin-top: 2rem; max-width: 40rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgba(255,255,255,.88); padding-left: 1.2rem; border-left: 3px solid; border-image: var(--grad) 1; }
  .sx-tldr { margin-top: 2rem; max-width: 40rem; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
  .sx-tldr h2 { font-size: .8rem; font-weight: 500; letter-spacing: .14em; color: var(--dim); }
  .sx-tldr ul { list-style: none; margin: 0; padding: 0; }
  .sx-tldr li { font-size: .95rem; line-height: 1.55; color: var(--dim); margin-bottom: .55rem; }
  .sx-tldr strong { color: #fff; font-weight: 600; }

  .sx-form { background: rgba(10,10,14,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 1.6rem 1.5rem 1.3rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scroll-margin-top: calc(var(--hdr) + 1.5rem); }
  .sx-form .tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #e59bff; }
  .sx-form h2 { font-weight: 400; font-size: 1.7rem; line-height: 1.08; margin: .4rem 0 .5rem; }
  .sx-form > p { font-size: .9rem; line-height: 1.55; color: var(--dim); margin-bottom: 1rem; }
  .sx-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  .sx-form .fld { margin-bottom: .75rem; }
  .sx-form label { display: block; font-size: .74rem; letter-spacing: .06em; color: var(--dim); margin-bottom: .3rem; }
  .sx-form input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: .72rem .9rem; font-size: 1rem; color: #fff; font-family: 'Inter', sans-serif; }
  .sx-form input:focus { outline: none; border-color: #c35cff; background: rgba(255,255,255,.1); }
  .sx-form input.bad { border-color: #ff5a6e; }
  .sx-form button { width: 100%; margin-top: .3rem; cursor: pointer; }
  .sx-form button:disabled { opacity: .6; }
  .sx-form small { display: block; font-size: .7rem; line-height: 1.5; color: rgba(255,255,255,.45); margin-top: .8rem; }
  .sx-form .msg { font-size: .9rem; font-weight: 600; margin-top: .6rem; }
  .sx-form .msg.ok { color: #6be3a4; } .sx-form .msg.err { color: #ff8a98; }

  /* Boarding-pass lead form */
  @property --tka { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  .tk-wrap { position: relative; align-self: start; filter: drop-shadow(0 22px 34px rgba(0,0,0,.5)); animation: sx-rise .9s .15s cubic-bezier(.2, .8, .2, 1) both, sx-float 6s 1.2s ease-in-out infinite; }
  .tk-wrap::before { content: ''; position: absolute; inset: -12px; border-radius: 34px; z-index: -1; background: conic-gradient(from var(--tka), #ff6bd6, #ffb14d, #6be3ff, #c35cff, #ff6bd6); filter: blur(20px); opacity: .6; animation: sx-spin 7s linear infinite, sx-glow 2.4s ease-in-out infinite; }
  @keyframes sx-spin { to { --tka: 360deg; } }
  @keyframes sx-glow { 0%, 100% { opacity: .38; } 50% { opacity: .78; } }
  @keyframes sx-float { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
  .sx-form.tkt { --stub: 172px; --nr: 14px; position: relative; padding: 0; border: 0; border-radius: 20px; color: #1b1424; background: #fff8ec; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; transition: transform .15s ease-out; will-change: transform;
    -webkit-mask: radial-gradient(circle var(--nr) at 0 calc(100% - var(--stub)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% calc(100% - var(--stub)), #0000 97%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--nr) at 0 calc(100% - var(--stub)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--nr) at 100% calc(100% - var(--stub)), #0000 97%, #000) right / 51% 100% no-repeat; }
  .tk-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1.3rem; color: #fff; background: linear-gradient(110deg, #18011F 0%, #B600A8 45%, #BE4C00 100%); font-family: 'Kanit', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; position: relative; overflow: hidden; }
  .tk-top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform: translateX(-120%); animation: sx-shine 3.6s 1.4s ease-in-out infinite; }
  .tk-top b { font-weight: 500; display: flex; align-items: center; gap: .5rem; }
  .tk-top svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(45deg); }
  .tk-top span { opacity: .85; }
  @keyframes sx-shine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
  .tk-body { padding: 1.1rem 1.3rem .9rem; }
  .tk-route { display: grid; grid-template-columns: 1fr 1fr; font-family: 'Kanit', sans-serif; text-transform: uppercase; line-height: 1.15; }
  .tk-route small { display: block; font-family: 'Inter', sans-serif; font-size: .6rem; letter-spacing: .16em; color: rgba(27,20,36,.5); margin-bottom: .2rem; }
  .tk-route b { font-weight: 500; font-size: 1.02rem; }
  .tk-route div:last-child { text-align: right; }
  .tk-arc { position: relative; height: 44px; margin: -2px auto 2px; width: 300px; max-width: 100%; }
  .tk-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .tk-arc path { fill: none; stroke: rgba(27,20,36,.4); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
  .tk-arc i { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; offset-path: path("M 4 38 Q 150 -18 296 38"); offset-rotate: auto 90deg; animation: sx-fly 4.2s 1s cubic-bezier(.45, 0, .35, 1) infinite both; }
  .tk-arc i svg { fill: #B600A8; filter: drop-shadow(0 3px 3px rgba(182,0,168,.35)); }
  @keyframes sx-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  .sx-form.tkt h2 { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.08; margin: .5rem 0 .3rem; color: #1b1424; }
  .sx-form.tkt .tk-note { font-size: .84rem; line-height: 1.45; color: rgba(27,20,36,.72); margin: 0 0 .9rem; }
  .sx-form.tkt .row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sx-form.tkt .fld { margin-bottom: .6rem; }
  .sx-form.tkt label { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(27,20,36,.55); margin-bottom: .2rem; font-weight: 600; }
  .sx-form.tkt input:not([name="_honey"]) { background: #fff; color: #1b1424; border: 0; border-bottom: 2px solid rgba(27,20,36,.28); border-radius: 6px 6px 0 0; padding: .6rem .6rem; font-size: 1rem; }
  .sx-form.tkt input:focus { background: #fff; border-color: #B600A8; box-shadow: 0 6px 14px -8px rgba(182,0,168,.7); }
  .sx-form.tkt input.bad { border-color: #d11a2a; background: #fff1f2; }
  .sx-form.tkt .msg { min-height: 1.2rem; margin: 0 0 .4rem; font-size: .85rem; }
  .sx-form.tkt .msg.ok { color: #14783f; } .sx-form.tkt .msg.err { color: #c8102e; }
  .tk-code { display: flex; align-items: center; gap: .8rem; color: #1b1424; }
  .tk-code span { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(27,20,36,.55); white-space: nowrap; font-weight: 600; }
  .tk-scan { position: relative; flex: 1; height: 34px; overflow: hidden; }
  .tk-bars { width: 100%; height: 100%; display: block; }
  .tk-scan::after { content: ''; position: absolute; top: -2px; bottom: -2px; width: 3px; left: 0; background: #ff2d55; box-shadow: 0 0 10px 2px rgba(255,45,85,.7); animation: sx-scan 2.4s ease-in-out infinite alternate; }
  @keyframes sx-scan { from { left: 0; } to { left: calc(100% - 3px); } }
  .tk-stub { position: relative; height: var(--stub); padding: 1.15rem 1.3rem .6rem; border-top: 2px dashed rgba(27,20,36,.3); }
  .tk-stub::before { content: '\2702  tear here'; position: absolute; left: 1.3rem; top: -.72rem; padding: 0 .5rem; background: #fff8ec; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(27,20,36,.45); font-weight: 600; }
  .tk-stub .btn-gradient { position: relative; overflow: hidden; width: 100%; margin: 0; padding: .95rem 1rem; font-size: .9rem; animation: sx-btnpulse 2.2s ease-in-out infinite; }
  .tk-stub .btn-gradient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform: translateX(-120%); animation: sx-shine 2.8s 1s ease-in-out infinite; }
  .tk-stub .btn-gradient svg { display: inline-block; width: 16px; height: 16px; fill: currentColor; vertical-align: -2px; margin-left: .5rem; transform: rotate(45deg); }
  @keyframes sx-btnpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(182,0,168,.55), 4px 4px 12px #7721B1 inset; } 55% { box-shadow: 0 0 0 12px rgba(182,0,168,0), 4px 4px 12px #7721B1 inset; } }
  .tk-stub small { display: block; margin-top: .6rem; font-size: .62rem; line-height: 1.4; color: rgba(27,20,36,.55); }
  .tk-stamp { position: absolute; left: 50%; top: 42%; z-index: 5; padding: .5rem 1rem; border: 4px solid #14783f; border-radius: 10px; color: #14783f; font-family: 'Kanit', sans-serif; font-size: 1.5rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: rgba(255,248,236,.92); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-10deg) scale(2.2); }
  .sx-form.sent .tk-stamp { animation: sx-stamp .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
  @keyframes sx-stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } }
  /* Top button: a ticket-shaped CTA with notches, a shine and a plane that taxis */
  .sx-claim { position: relative; overflow: hidden; -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 10px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
  .sx-claim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%); transform: translateX(-120%); animation: sx-shine 3s 1.2s ease-in-out infinite; }
  .sx-claim svg { fill: currentColor; stroke: none; transform: rotate(45deg); animation: sx-taxi 2.2s ease-in-out infinite; }
  @keyframes sx-taxi { 0%, 100% { translate: 0 0; } 50% { translate: 4px -3px; } }

  /* Pinned stages: the section is tall, the stage sticks under the header while --p runs 0 -> 1 */
  .sx-pin { position: relative; height: var(--len, 260vh); }
  .sx-stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden; }

  /* Beat 1: center photo grows to fill the screen */
  .sx-zoom { --e: clamp(0, calc(var(--p, 0) / .7), 1); }
  .sx-zoom img { position: absolute; left: 50%; top: 50%; object-fit: cover; border-radius: 4px; }
  .sx-zoom .side { width: var(--w); aspect-ratio: var(--ar, 3 / 4); transform: translate(-50%, -50%) translate(calc(var(--x) * (1 + var(--e) * .9)), var(--y)); opacity: calc(1 - var(--e) * .7); }
  .sx-zoom .main { z-index: 2; width: calc(26% + 74% * var(--e)); height: calc(46% + 54% * var(--e)); transform: translate(-50%, -50%); border-radius: calc(4px * (1 - var(--e))); }
  .sx-zoom .shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.58) 30%, rgba(0,0,0,0) 64%); opacity: clamp(0, calc((var(--p, 0) - .6) * 4), 1); pointer-events: none; }
  .sx-zoom .lead { position: absolute; left: clamp(1.25rem, 5vw, 4rem); top: 1.6rem; z-index: 1; display: grid; grid-template-columns: 7rem 20rem; gap: 1rem; font-size: .78rem; line-height: 1.6; color: var(--dim); opacity: calc(1 - var(--e) * 2); }
  .sx-zoom .lead b { color: #fff; font-weight: 500; }
  .sx-zoom .cap { position: absolute; left: clamp(1.25rem, 5vw, 4rem); bottom: 7%; z-index: 4; max-width: 36rem; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.5; opacity: clamp(0, calc((var(--p, 0) - .72) * 5), 1); transform: translateY(calc(24px * (1 - clamp(0, calc((var(--p, 0) - .72) * 5), 1)))); }
  .sx-zoom .cap small { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .5rem; }

  /* Beat 2: sparse text blocks, small label on the left */
  .sx-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(1rem, 4vw, 4rem); padding: clamp(4rem, 9vw, 8rem) 0 1rem; }
  .sx-block > .lbl { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding-top: .9rem; }
  .sx-block > .lbl span { display: block; color: rgba(255,255,255,.35); margin-bottom: .4rem; }
  .sx-body { max-width: 46rem; }
  .sx-body h2 { font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: 1.4rem; scroll-margin-top: calc(var(--hdr) + 2rem); }
  .sx-body h3 { font-weight: 400; font-size: 1.45rem; margin: 2.2rem 0 .3rem; }
  .sx-body p, .sx-body li { font-size: 1.04rem; line-height: 1.78; color: rgba(255,255,255,.74); }
  .sx-body p { margin: .9rem 0; }
  .sx-body strong { color: #fff; font-weight: 600; }
  .sx-body a:not(.btn-gradient) { color: #fff; text-decoration: underline; text-decoration-color: #c35cff; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .sx-body a:not(.btn-gradient):hover { text-decoration-color: #fff; }
  .sx-list { list-style: none; padding: 0; margin: 1rem 0; }
  .sx-list li { position: relative; padding-left: 1.5rem; margin: .5rem 0; }
  .sx-list li::before { content: ''; position: absolute; left: 0; top: .78em; width: .8rem; height: 1px; background: #c35cff; }

  .sx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2.5rem 0 1rem; }
  .sx-pair figure { margin: 0; }
  .sx-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 4px; }
  .sx-pair figcaption { font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.5); margin-top: .8rem; }

  .sx-tablewrap { overflow-x: auto; margin: 2rem 0; border-top: 1px solid var(--line); }
  .sx-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .92rem; }
  .sx-table th, .sx-table td { padding: 1rem .9rem 1rem 0; text-align: left; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--line); }
  .sx-table thead th { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  .sx-table td { color: rgba(255,255,255,.72); }
  .sx-table tbody th { font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 1.1rem; width: 11rem; }
  .sx-table code { font-family: 'Kanit', sans-serif; color: #e59bff; }

  /* Beat 3: scattered photos gather into a stack, then the stack fans out into the coast cards */
  .sx-gather { --a: clamp(0, calc(var(--p, 0) / .42), 1); --b: clamp(0, calc((var(--p, 0) - .58) / .3), 1); }
  .sx-gather .sc { position: absolute; left: 50%; top: 50%; width: 8.5vw; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
    transform: translate(-50%, -50%) translate(calc(var(--x) * (1 - var(--a))), calc(var(--y) * (1 - var(--a)))) rotate(calc(var(--r) * (1 - var(--a) * .6)));
    opacity: clamp(0, calc((.7 - var(--p, 0)) * 7), 1); }
  .sx-gather .q { position: absolute; left: 0; right: 0; top: 7%; text-align: center; font-family: 'Kanit', sans-serif; font-weight: 300; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.01em; opacity: clamp(0, calc((var(--p, 0) - .3) * 6), 1); }
  .sx-coasts { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(1180px, 92vw); display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 1rem; }
  .sx-card { display: block; border-radius: 14px; padding: 1.1rem 1.1rem 1.2rem; background: #17151d; border: 1px solid var(--line); position: relative; overflow: hidden;
    transform: translate(calc(var(--sx, 0px) * (1 - var(--b))), calc(var(--sy, 0px) * (1 - var(--b)))) rotate(calc(var(--cr, 0deg) * (1 - var(--b))));
    opacity: clamp(0, calc((var(--p, 0) - .52) * 9), 1); transition: border-color .2s, background .2s; }
  .sx-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
  .sx-card:hover { border-color: rgba(255,255,255,.4); background: #201d28; }
  .sx-card small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .4rem; }
  .sx-card b { display: block; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
  .sx-card p { font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.7); margin: .45rem 0 .7rem; }
  .sx-card em { font-style: normal; font-size: .8rem; letter-spacing: .06em; border-bottom: 1px solid var(--c); }

  /* Beat 4: filmstrip rows slide against each other and spread apart */
  .sx-film { overflow-x: clip; padding: clamp(3rem, 7vw, 6rem) 0 1rem; }
  .sx-row { position: relative; left: 50%; width: max-content; display: flex; margin: 1.2vw 0; transform: translateX(calc(-50% + (var(--p, .5) - .5) * var(--spd))); }
  .sx-row img { width: 15vw; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; box-shadow: -14px 0 30px rgba(0,0,0,.55); }
  .sx-row img + img { margin-left: calc(-7vw + 8.2vw * clamp(0, calc(var(--p, .5) * 1.6 - .2), 1)); }
  .sx-film .tag { text-align: center; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.4rem; }

  /* Beat 5: gray photo grid turns to color under a question */
  .sx-mosaic { --c: clamp(0, calc(var(--p, 0) * 1.7), 1); }
  .sx-mosaic .grid { position: absolute; inset: -4%; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; transform: scale(calc(1.18 - .18 * var(--c))); filter: grayscale(calc(1 - var(--c))) brightness(calc(.45 + .2 * var(--c))); }
  .sx-mosaic .grid img { width: 100%; height: 100%; object-fit: cover; }
  .sx-mosaic .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1.5rem; z-index: 2; background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%); }
  .sx-mosaic .mid h2 { font-weight: 300; font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
  .sx-mosaic .mid p { max-width: 30rem; margin: 1rem auto 1.6rem; color: rgba(255,255,255,.85); line-height: 1.6; opacity: clamp(0, calc((var(--p, 0) - .35) * 4), 1); }
  .sx-mosaic .mid .btn-gradient { justify-self: center; opacity: clamp(0, calc((var(--p, 0) - .45) * 4), 1); }

  /* CTA 1 (horizontal): wide ticket strip */
  .sx-ticket { margin: 4rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.8rem 2rem; border-radius: 18px; position: relative; background: linear-gradient(#141217, #141217) padding-box, var(--grad) border-box; border: 1px solid transparent; }
  .sx-ticket::before, .sx-ticket::after { content: ''; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--ink); }
  .sx-ticket::before { left: -14px; } .sx-ticket::after { right: -14px; }
  .sx-ticket h3 { margin: 0 0 .7rem !important; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; }
  .sx-ticket .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
  .sx-ticket .chips span { font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: rgba(255,255,255,.8); }

  /* CTA 2 (vertical): tall photo card that sticks beside the text */
  .sx-side { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .sx-tall { position: sticky; top: calc(var(--hdr) + 1.5rem); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #141217; }
  .sx-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
  .sx-tall div { padding: 1.2rem 1.2rem 1.4rem; }
  .sx-tall h3 { margin: 0 0 .6rem !important; font-weight: 400; font-size: 1.6rem; line-height: 1.05; }
  .sx-tall ul { list-style: none; padding: 0; margin: 0 0 1.1rem; }
  .sx-tall li { font-size: .88rem !important; line-height: 1.4 !important; padding: .45rem 0; border-top: 1px solid var(--line); }
  .sx-tall .btn-gradient { display: block; text-align: center; padding: .85rem .6rem; font-size: .78rem; }

  /* CTA 3 (flashing): beacon */
  .sx-beacon { margin: 4rem 0 1rem; text-align: center; padding: 3rem 1.5rem; border-radius: 22px; background: radial-gradient(60% 90% at 50% 100%, rgba(182,0,168,.35), transparent 70%), #121014; border: 1px solid var(--line); }
  .sx-beacon h3 { margin: 0 0 .5rem !important; font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.02; }
  .sx-beacon p { max-width: 30rem; margin: 0 auto 1.8rem !important; }
  .sx-beacon .ring { position: relative; display: inline-block; }
  .sx-beacon .ring::before, .sx-beacon .ring::after { content: ''; position: absolute; inset: -8px; border-radius: 999px; border: 2px solid #c35cff; animation: sx-ring 2s ease-out infinite; pointer-events: none; }
  .sx-beacon .ring::after { animation-delay: 1s; }
  .sx-beacon .btn-gradient { animation: sx-flash 2s ease-in-out infinite; }
  @keyframes sx-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.8); } }
  @keyframes sx-flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }

  .sx-quote { margin: 3rem 0; font-family: 'Kanit', sans-serif; font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; }
  .sx-quote p { color: #fff !important; font-size: inherit !important; line-height: inherit !important; }
  .sx-quote cite { display: block; margin-top: .8rem; font-family: 'Inter', sans-serif; font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  .sx-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
  .sx-reviews figure { margin: 0; padding: 1.3rem; border-radius: 14px; border: 1px solid var(--line); }
  .sx-reviews blockquote { font-size: .96rem; line-height: 1.6; color: rgba(255,255,255,.78); }
  .sx-reviews figcaption { margin-top: .7rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #e59bff; }

  .sx-faq details { border-bottom: 1px solid var(--line); }
  .sx-faq summary { cursor: pointer; list-style: none; padding: 1.2rem 2.2rem 1.2rem 0; position: relative; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.3; }
  .sx-faq summary::-webkit-details-marker { display: none; }
  .sx-faq summary::after { content: '+'; position: absolute; right: 0; top: .9rem; font-size: 1.6rem; font-weight: 300; color: #c35cff; transition: transform .25s; }
  .sx-faq details[open] summary::after { transform: rotate(45deg); }
  .sx-faq details p { margin: 0 0 1.2rem; }
  .sx-disclaimer { font-size: .78rem !important; line-height: 1.6 !important; color: rgba(255,255,255,.42) !important; margin-top: 3rem !important; }

  /* Closing: the page ends on white, like the reference */
  .sx-close { margin-top: clamp(4rem, 8vw, 7rem); background: #f4f2f7; color: #0C0C0C; padding: clamp(4rem, 8vw, 7rem) 0; }
  .sx-close h2 { font-weight: 300; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; letter-spacing: -.02em; max-width: 14ch; }
  .sx-close .intro { max-width: 34rem; margin: 1.2rem 0 2.4rem; font-size: 1.1rem; line-height: 1.6; color: rgba(12,12,12,.7); }
  .sx-close .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(12,12,12,.15); }
  .sx-close .grid3 a { display: block; padding: 1.4rem 1.2rem 1.4rem 0; border-bottom: 1px solid rgba(12,12,12,.15); transition: color .2s; }
  .sx-close .grid3 a:hover { color: #7621B0; }
  .sx-close .grid3 small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(12,12,12,.5); margin-bottom: .4rem; }
  .sx-close .grid3 span { font-family: 'Kanit', sans-serif; font-size: 1.25rem; line-height: 1.25; }
  .sx-close .acts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; align-items: center; }
  .sx-close .ghost { display: inline-block; border: 1px solid #0C0C0C; border-radius: 999px; padding: .85rem 2rem; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
  .sx-close .ghost:hover { background: #0C0C0C; color: #fff; }

  .sx-top { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0C0C0C; box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
  .sx-top.show { opacity: 1; transform: none; pointer-events: auto; }

  @media (max-width: 1060px) {
    .sx-hero { grid-template-columns: minmax(0, 1fr); }
    .sx-form { max-width: 480px; }
    .sx-coasts { grid-template-columns: repeat(min(var(--n, 5), 3), minmax(0, 1fr)); gap: .7rem; }
  }
  @media (max-width: 760px) {
    .sx-form.tkt .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sx-form.tkt { --stub: 190px; }
    .sx-glance .sx-tldr ul { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .sx-block { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .sx-block > .lbl { padding-top: 0; }
    .sx-zoom .main { width: calc(58% + 42% * var(--e)); height: calc(36% + 64% * var(--e)); }
    .sx-zoom .side.far { display: none; }
    .sx-zoom .lead { grid-template-columns: minmax(0, 1fr); right: 1.25rem; }
    .sx-gather .sc { width: 22vw; }
    .sx-gather .q { top: 4%; padding: 0 1rem; }
    .sx-coasts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; bottom: 3%; }
    .sx-card { padding: .7rem .8rem .8rem; }
    .sx-card b { font-size: 1.1rem; }
    .sx-card p { display: none; }
    .sx-card:last-child:nth-child(odd) { grid-column: span 2; }
    .sx-row img { width: 34vw; }
    .sx-row img + img { margin-left: calc(-16vw + 18vw * clamp(0, calc(var(--p, .5) * 1.6 - .2), 1)); }
    .sx-mosaic .grid { grid-template-columns: repeat(3, 1fr); }
    .sx-pair, .sx-reviews, .sx-side, .sx-close .grid3 { grid-template-columns: minmax(0, 1fr); }
    .sx-tall { position: relative; top: 0; max-width: 320px; }
    .sx-ticket { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.4rem; }
    .sx-form .row { grid-template-columns: 1fr; gap: 0; }
  }
  /* Reduced motion: no pinning, no scrubbing, every beat shows its finished state */
  @media (prefers-reduced-motion: reduce) {
    .sx-pin { height: auto; }
    .sx-stage { position: relative; top: 0; height: calc(100vh - var(--hdr)); min-height: 560px; }
    .tk-wrap, .tk-wrap::before, .tk-top::after, .tk-arc i, .tk-scan::after, .tk-stub .btn-gradient, .tk-stub .btn-gradient::after, .sx-claim::after, .sx-claim svg { animation: none; }
    .tk-arc i { offset-distance: 50%; }
    .sx-herobg .ph, .sx-herobg .ph img, .sx-chip img, .sx-hcard, .sx-form { animation: none; }
    .sx-claim, .sx-beacon .btn-gradient, .sx-beacon .ring::before, .sx-beacon .ring::after { animation: none; }
    .sx-card, .sx-top, .sx-faq summary::after { transition: none; }
  }

/* ===== Conversion experiments (set with <div class="sx" data-exp="sticky|quiz|steps|when|control">) ===== */
/* A: sticky mobile bar */
.sx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; display: none; align-items: center; gap: .8rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(12,12,12,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.14); transform: translateY(110%); transition: transform .35s ease; }
.sx-bar.show { transform: none; }
.sx-bar span { flex: 1; min-width: 0; font-size: .74rem; line-height: 1.3; color: rgba(255,255,255,.75); }
.sx-bar span b { display: block; color: #fff; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: .95rem; }
.sx-bar .btn-gradient { flex: none; padding: .8rem 1.2rem; font-size: .8rem; animation: sx-btnpulse 2.2s ease-in-out infinite; }
@media (max-width: 900px) { .sx[data-exp="sticky"] .sx-bar { display: flex; } .sx[data-exp="sticky"] { padding-bottom: 76px; } .sx[data-exp="sticky"] .sx-top { bottom: 96px; } }
/* B: 3-tap quiz inside the ticket */
.tk-quiz { color: #1b1424; }
.tk-quiz .prog { display: flex; align-items: center; gap: .35rem; margin-bottom: .55rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(27,20,36,.55); font-weight: 600; }
.tk-quiz .prog i { flex: 1; height: 4px; border-radius: 4px; background: rgba(27,20,36,.15); }
.tk-quiz .prog i.on { background: linear-gradient(90deg, #B600A8, #BE4C00); }
.tk-quiz h3 { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 1.15rem; line-height: 1.15; margin: 0 0 .6rem; }
.tk-quiz .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tk-quiz .opts button { padding: .75rem .6rem; border-radius: 10px; border: 2px solid rgba(27,20,36,.18); background: #fff; color: #1b1424; font: 500 .92rem/1.2 'Inter', sans-serif; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s; }
.tk-quiz .opts button:hover, .tk-quiz .opts button:focus-visible { border-color: #B600A8; background: #fdf1ff; transform: translateY(-2px); outline: none; }
.tk-quiz .back { margin-top: .5rem; background: none; border: 0; padding: 0; font-size: .74rem; color: rgba(27,20,36,.55); text-decoration: underline; cursor: pointer; }
.tk-quiz .hint { font-size: .68rem; color: rgba(27,20,36,.5); margin-top: .4rem; }
.sx-form.is-quiz .row, .sx-form.is-quiz .tk-code { display: none; }
.sx-form.is-quiz .tk-stub .btn-gradient { visibility: hidden; }
.sx-form.quiz-done .fld { animation: sx-rise .5s both; }
.tk-quiz-note { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #14783f; font-weight: 600; margin: 0 0 .5rem; }
/* C: how it works + honest answer */
.sx-how { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.sx-how h2 { font-family: 'Kanit', sans-serif; font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.05; margin-bottom: 1.4rem; }
.sx-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sx-how li { position: relative; padding: 1.3rem 1.2rem 1.2rem; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.03); }
.sx-how li b { display: block; font-family: 'Kanit', sans-serif; font-weight: 300; font-size: 2.4rem; line-height: 1; background: linear-gradient(123deg, #ff6bd6, #ffb14d); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .4rem; }
.sx-how li strong { display: block; font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 1.15rem; margin-bottom: .3rem; }
.sx-how li p { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.7); margin: 0; }
.sx-honest { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); border-left: 4px solid #c35cff; background: rgba(195,92,255,.07); }
.sx-honest h3 { font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 1.25rem; margin: 0 0 .35rem; }
.sx-honest p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.sx-honest a { color: #fff; text-decoration: underline; text-decoration-color: #c35cff; text-underline-offset: 3px; white-space: nowrap; font-weight: 600; }
/* D: best-time chips */
.tk-when { border: 0; margin: 0 0 .6rem; padding: 0; min-width: 0; }
.tk-when legend { padding: 0; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(27,20,36,.55); margin-bottom: .3rem; font-weight: 600; }
.tk-when div { display: flex; flex-wrap: wrap; gap: .4rem; }
.tk-when label { margin: 0 !important; }
.tk-when input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-when span { display: inline-block; padding: .4rem .8rem; border-radius: 999px; border: 2px solid rgba(27,20,36,.18); background: #fff; font: 500 .82rem/1 'Inter', sans-serif; text-transform: none; letter-spacing: 0; color: #1b1424; cursor: pointer; transition: all .15s; }
.tk-when input:checked + span { background: linear-gradient(110deg, #B600A8, #BE4C00); border-color: transparent; color: #fff; }
.tk-when input:focus-visible + span { outline: 2px solid #B600A8; outline-offset: 2px; }
@media (max-width: 760px) { .sx-how ol { grid-template-columns: minmax(0, 1fr); } .sx-honest { grid-template-columns: minmax(0, 1fr); } .tk-quiz .opts { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .sx-bar, .tk-quiz .opts button, .sx-form.quiz-done .fld, .sx-bar .btn-gradient { transition: none; animation: none; } }