/* ==========================================================================
   CardLinkr — template showcase (/vcard-templates)
   Loaded after cardlinkr.css; uses its tokens (--indigo, --saffron, --mint, ...).
   Signature: a dark "showroom" stage — phones on a reflective floor under a
   spotlight, with a slowly moving perspective grid.
   ========================================================================== */

.tg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:root, .tg { --tg-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Hero / showroom ---------- */
.tg-hero {
  --ph: clamp(320px, calc(100svh - 430px), 580px); /* carousel phone height: what is left of the screen */
  --pw: calc(var(--ph) * .49);                 /* carousel phone width  */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(100svh - var(--header-h)), 1080px); /* full screen, but not a huge empty hero on tall portrait monitors */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 4svh, 52px) 0 clamp(18px, 3svh, 32px);
  color: #c9cbe4;
  background:
    radial-gradient(1200px 640px at 50% -12%, #2e348a 0%, rgba(46, 52, 138, 0) 62%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 68%, #0c0f2e 100%);
}
.tg-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: tg-drift 22s ease-in-out infinite alternate; will-change: transform; }
.tg-orb--a { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(255, 107, 44, .45), transparent 70%); }
.tg-orb--b { width: 600px; height: 600px; right: -200px; top: 8%; background: radial-gradient(circle, rgba(61, 123, 255, .5), transparent 70%); animation-duration: 28s; animation-delay: -6s; }
.tg-orb--c { width: 420px; height: 420px; left: 38%; bottom: -260px; background: radial-gradient(circle, rgba(18, 184, 134, .32), transparent 70%); animation-duration: 32s; animation-delay: -12s; }
@keyframes tg-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(50px, -30px, 0) scale(1.08); } 100% { transform: translate3d(-40px, 30px, 0) scale(.94); } }

/* spotlight cone from above the centre phone */
.tg-beam { position: absolute; left: 50%; top: -6%; width: 1100px; height: 112%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(190, 200, 255, .07) 172deg, rgba(220, 226, 255, .13) 180deg, rgba(190, 200, 255, .07) 188deg, transparent 198deg);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); }

/* perspective floor that slowly moves towards the viewer */
.tg-floor { position: absolute; left: -60%; right: -60%; bottom: -2%; height: 58%;
  transform-origin: 50% 100%; transform: perspective(520px) rotateX(74deg);
  background-image: linear-gradient(rgba(150, 160, 255, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 160, 255, .2) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 80%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 80%);
  animation: tg-floor 5s linear infinite; }
@keyframes tg-floor { to { background-position: 0 72px, 0 0; } }
/* pool of light under the centre phone */
.tg-pool { position: absolute; left: 50%; bottom: 7%; width: 760px; height: 170px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 107, 44, .28), rgba(61, 123, 255, .12) 55%, transparent 100%); filter: blur(8px); }

.tg-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tg-hero__copy { max-width: 1100px; }
.tg-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #dfe1f5; font: 600 .8125rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.tg-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(18, 184, 134, .22); }
.tg-hero h1 { margin-top: 16px; color: #fff; font-size: clamp(2.125rem, 3.9vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.tg-hero h1 span { color: #4fdcae; white-space: nowrap; }
.tg-hero__copy p { margin: 14px auto 0; max-width: 640px; font-size: 1.0625rem; color: #b9bce0; text-wrap: pretty; }

/* ---------- Carousel ---------- */
.tg-stage { position: relative; width: 100%; height: calc(var(--ph) + 50px); margin-top: clamp(10px, 2.2svh, 28px); perspective: 1700px; perspective-origin: 50% 40%; touch-action: pan-y; -webkit-user-select: none; user-select: none; border-radius: 24px; }
.tg-stage:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.tg-stage.is-dragging { cursor: grabbing; }
.tg-stage.is-dragging .tg-cf { transition: opacity .6s ease, filter .6s ease; }
.tg-stage { perspective-origin: calc(50% + var(--mx, 0) * 18%) calc(40% + var(--my, 0) * 14%); transition: perspective-origin .5s ease-out; }
.tg-hero__bg { transform: translate3d(calc(var(--mx, 0) * -28px), calc(var(--my, 0) * -18px), 0); transition: transform .8s ease-out; }
.tg-cf { position: absolute; left: 50%; top: 10px; width: var(--pw); height: var(--ph); margin-left: calc(var(--pw) / -2);
  display: block; color: inherit; text-decoration: none; cursor: pointer; transform-style: preserve-3d;
  transform: translate3d(0, 0, -520px) scale(.5); opacity: 0; pointer-events: none;
  transition: transform .85s var(--tg-ease), opacity .6s ease, filter .6s ease;
  -webkit-box-reflect: below 16px linear-gradient(transparent 74%, rgba(255, 255, 255, .2)); }
.tg-cf:hover { text-decoration: none; }
.tg-cf[data-pos="0"] { transform: translate3d(var(--drag, 0px), 0, 110px); opacity: 1; z-index: 6; pointer-events: auto; }
.tg-cf[data-pos="1"] { transform: translate3d(calc(var(--pw) * 1 + var(--drag, 0px)), 0, -60px) rotateY(-34deg) scale(.9); opacity: 1; z-index: 5; pointer-events: auto; filter: brightness(.78) saturate(.9); }
.tg-cf[data-pos="-1"] { transform: translate3d(calc(var(--pw) * -1 + var(--drag, 0px)), 0, -60px) rotateY(34deg) scale(.9); opacity: 1; z-index: 5; pointer-events: auto; filter: brightness(.78) saturate(.9); }
.tg-cf[data-pos="2"] { transform: translate3d(calc(var(--pw) * 1.78 + var(--drag, 0px)), 0, -230px) rotateY(-44deg) scale(.8); opacity: .85; z-index: 4; pointer-events: auto; filter: brightness(.55) saturate(.8); }
.tg-cf[data-pos="-2"] { transform: translate3d(calc(var(--pw) * -1.78 + var(--drag, 0px)), 0, -230px) rotateY(44deg) scale(.8); opacity: .85; z-index: 4; pointer-events: auto; filter: brightness(.55) saturate(.8); }
.tg-cf[data-pos="3"] { transform: translate3d(calc(var(--pw) * 2.4 + var(--drag, 0px)), 0, -420px) rotateY(-50deg) scale(.7); opacity: .4; z-index: 3; filter: brightness(.4); }
.tg-cf[data-pos="-3"] { transform: translate3d(calc(var(--pw) * -2.4 + var(--drag, 0px)), 0, -420px) rotateY(50deg) scale(.7); opacity: .4; z-index: 3; filter: brightness(.4); }
.tg-cf[data-pos="9"] { transform: translate3d(calc(var(--pw) * 2.8), 0, -600px) rotateY(-55deg) scale(.6); }
.tg-cf[data-pos="-9"] { transform: translate3d(calc(var(--pw) * -2.8), 0, -600px) rotateY(55deg) scale(.6); }
.tg-cf__phone { position: relative; display: block; width: 100%; height: 100%; padding: calc(var(--pw) * .04); border-radius: calc(var(--pw) * .15);
  background: linear-gradient(155deg, #3a3f78 0%, #1d2150 38%, #0d1030 100%);
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18); }
.tg-cf__phone::before { content: ""; position: absolute; z-index: 3; top: calc(var(--pw) * .075); left: 50%; width: 30%; height: calc(var(--pw) * .07); transform: translateX(-50%); border-radius: 99px; background: #070920; }
.tg-cf__screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .115); background: linear-gradient(170deg, #2a2f63, #151840); }
.tg-cf__screen img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform .9s var(--tg-ease); }
/* the design in the centre slowly scrolls, like someone is reading it */
.tg-cf[data-pos="0"] .tg-cf__screen img { transform: translateY(calc(-100% + var(--ph) - var(--pw) * .08)); transition: transform 9s cubic-bezier(.45, 0, .55, 1) .5s; }
.tg-cf[data-pos="0"] .tg-cf__phone { box-shadow: 0 60px 90px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 70px -10px rgba(255, 107, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .2); }
/* carousel: a tab on the phone's top edge (two classes so it beats the base .tg-badge position below) */
.tg-cf .tg-badge--cf { top: -13px; left: 50%; transform: translateX(-50%) translateZ(20px); }

.tg-hero__meta { position: relative; z-index: 7; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 18px 28px; flex-wrap: wrap; }
.tg-hero__nav { display: flex; align-items: center; gap: 14px; }
.tg-hero__label { min-width: 210px; text-align: center; }
.tg-hero__label small { display: block; font: 600 .75rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #9ea2cc; }
.tg-hero__label b { display: block; margin-top: 4px; font: 600 1.25rem/1.2 var(--font-display); color: #fff; }
.tg-hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tg-round { width: 48px; height: 48px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.tg-round:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.tg-round:active { transform: scale(.94); }
.tg-round--sm { width: 44px; height: 44px; }
.tg-round .icon { width: 20px; height: 20px; }
.tg-ic-play { display: none; fill: currentColor; stroke: none; }
[aria-pressed="true"] > .tg-ic-pause, [data-paused="true"] > .tg-ic-pause { display: none; }
[aria-pressed="true"] > .tg-ic-play, [data-paused="true"] > .tg-ic-play { display: block; }
.tg-scrollcue { margin-top: clamp(12px, 2.4svh, 26px); display: inline-flex; align-items: center; gap: 8px; color: #b9bce0; font-weight: 600; font-size: .9375rem; }
.tg-scrollcue:hover { color: #fff; text-decoration: none; }
.tg-scrollcue .icon { width: 18px; height: 18px; animation: tg-bob 2.4s ease-in-out infinite; }
@keyframes tg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Badge ---------- */
.tg-badge { position: absolute; z-index: 4; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 99px;
  background: var(--saffron); color: var(--indigo); font: 700 .6875rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(255, 107, 44, .8); }
.tg-badge .icon { width: 14px; height: 14px; stroke-width: 2.2; }
/* grid: a tab on the phone's top edge (clear of the notch) that rises with the phone on hover */
.tg-tile .tg-badge { top: -12px; left: 50%; transform: translate(-50%, 0); transition: transform .6s var(--tg-ease); }
.tg-tile:hover .tg-badge, .tg-tile:focus-within .tg-badge { transform: translate(-50%, -10px); }

/* ---------- Gallery ---------- */
.tg-gallery { background: var(--mist); padding: 88px 0 104px; }
.tg-gallery__head { max-width: 720px; margin: 0 auto; text-align: center; }
.tg-gallery__head h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.tg-gallery__head p { margin-top: 14px; color: var(--slate); font-size: 1.0625rem; }

/* sticky filter bar under the site header */
.tg-filter { position: sticky; top: var(--header-h); z-index: 40; margin: 36px 0 40px; padding: 12px 0;
  background: rgba(244, 245, 250, .86); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.tg-filter.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 24px -20px rgba(27, 31, 75, .5); }
html:not(.js) .tg-filter { display: none; }
.tg-filter__inner { display: flex; align-items: center; gap: 20px; }
.tg-chips { flex: 1; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 8px 0 16px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; color: var(--indigo);
  font: 600 .875rem/1 var(--font-body); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.tg-chip span { min-width: 26px; padding: 5px 7px; border-radius: 99px; background: var(--mist); color: var(--slate); font-size: .75rem; text-align: center; }
.tg-chip:hover { border-color: var(--indigo); }
.tg-chip:active { transform: scale(.97); }
.tg-chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.tg-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .16); color: #fff; }
.tg-chip--premium { padding-left: 12px; }
.tg-chip--premium .icon { width: 16px; height: 16px; color: var(--saffron-ink); }
.tg-chip--premium[aria-pressed="true"] .icon { color: var(--saffron); }
.tg-filter__count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 44px 28px; }
.tg-tile { position: relative; perspective: 1100px; }
.tg-tile[hidden] { display: none; }
.tg-tile.is-entering { animation: tg-in .55s var(--tg-ease) both; }
@keyframes tg-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.tg-tile__phone { position: relative; display: block; border-radius: 30px; color: inherit; text-decoration: none; }
.tg-tile__phone:hover { text-decoration: none; }
.tg-tile__phone:focus-visible { outline-offset: 6px; border-radius: 30px; }
.tg-device { --rx: 0deg; --ry: 0deg; position: relative; display: block; aspect-ratio: 10 / 20.5; padding: 7px; border-radius: 30px;
  background: linear-gradient(155deg, #3a3f78 0%, #1d2150 40%, #0d1030 100%);
  box-shadow: 0 28px 44px -30px rgba(18, 21, 58, .65), 0 2px 6px rgba(18, 21, 58, .12), inset 0 0 0 1.5px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .6s var(--tg-ease), box-shadow .4s ease; }
.tg-device::before { content: ""; position: absolute; z-index: 3; top: 15px; left: 50%; width: 28%; height: 13px; transform: translateX(-50%); border-radius: 99px; background: #070920; }
.tg-device::after { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 13%; border-radius: 0 3px 3px 0; background: #2a2f63; }
.tg-device__screen { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 23px;
  background: linear-gradient(110deg, #e6e8f3 30%, #f4f5fa 50%, #e6e8f3 70%) 0 0 / 300% 100%; animation: tg-shimmer 1.6s linear 10; }
.tg-device__screen.is-loaded { animation: none; background: #fff; }
@keyframes tg-shimmer { to { background-position: -150% 0; } }
/* the image is never hidden by CSS, so the grid still shows if templates.js fails to load */
.tg-device__screen img { display: block; width: 100%; height: auto; transform: translateY(var(--scroll, 0px)); transition: transform var(--dur, 1s) cubic-bezier(.45, 0, .55, 1); }
.tg-device__glare { position: absolute; inset: 0; z-index: 2; border-radius: 30px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 45%); mix-blend-mode: soft-light; }
.tg-device__peek { position: absolute; z-index: 3; left: 50%; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px;
  background: rgba(27, 31, 75, .92); color: #fff; font: 600 .8125rem/1 var(--font-body); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s ease, transform .3s var(--tg-ease); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.tg-device__peek .icon { width: 16px; height: 16px; }
.tg-tile:hover .tg-device, .tg-tile:focus-within .tg-device {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-10px);
  box-shadow: 0 44px 60px -32px rgba(18, 21, 58, .7), 0 0 0 3px rgba(255, 107, 44, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18); }
.tg-tile:hover .tg-device__glare, .tg-tile:focus-within .tg-device__glare { opacity: 1; }
.tg-tile:hover .tg-device__peek, .tg-tile:focus-within .tg-device__peek { opacity: 1; transform: translate(-50%, 0); }

.tg-tile__info { padding: 18px 4px 0; }
.tg-tile__cat { display: block; font: 600 .6875rem/1.3 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--slate); }
.tg-tile__info h3 { margin-top: 6px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.tg-tile__info p { margin-top: 4px; color: var(--slate); font-size: .875rem; line-height: 1.45; }
.tg-tile__use { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--saffron-ink); font: 600 .875rem/1.2 var(--font-display); }
.tg-tile__use .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.tg-tile__use:hover { text-decoration: none; color: var(--indigo); }
.tg-tile__use:hover .icon { transform: translateX(3px); }
.tg-empty { text-align: center; color: var(--slate); padding: 40px 0; }
.tg-empty button { border: 0; background: none; color: var(--blue-ink); font-weight: 600; text-decoration: underline; }

/* ---------- Steps ---------- */
.tg-steps { padding: 88px 0; background: #fff; }
.tg-steps h2 { text-align: center; font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 700; letter-spacing: -0.02em; }
.tg-steps__list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: tgstep; }
.tg-steps__list li { position: relative; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, var(--mist)); counter-increment: tgstep; }
.tg-steps__list li::after { content: counter(tgstep); position: absolute; top: 18px; right: 22px; font: 700 2.75rem/1 var(--font-display); color: rgba(27, 31, 75, .07); }
.tg-steps__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--indigo); color: #fff; }
.tg-steps__icon .icon { width: 22px; height: 22px; }
.tg-steps__list b { display: block; margin-top: 18px; font: 600 1.125rem/1.3 var(--font-display); color: var(--indigo); }
.tg-steps__list p { margin-top: 6px; color: var(--slate); font-size: .9688rem; }

/* ---------- Final CTA (uses .final from cardlinkr.css) ---------- */
.tg-final .final__actions .btn--ghost-light { min-width: 0; }

/* ---------- Lightbox ---------- */
.tg-lb { --lh: min(86svh, 880px); position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.tg-lb[hidden] { display: none; }
.tg-lb__backdrop { position: absolute; inset: 0; background: radial-gradient(900px 600px at 40% 30%, rgba(46, 52, 138, .55), transparent 70%), rgba(10, 12, 36, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: tg-fade .3s ease both; }
@keyframes tg-fade { from { opacity: 0; } }
.tg-lb__layout { position: relative; display: flex; align-items: center; gap: 48px; max-width: 100%; max-height: 100%; perspective: 1600px; }
.tg-lb__stage { position: relative; display: flex; align-items: center; gap: 22px; }
.tg-lb__phone { position: relative; height: var(--lh); width: calc(var(--lh) * .485); padding: calc(var(--lh) * .018); border-radius: calc(var(--lh) * .07);
  background: linear-gradient(155deg, #3a3f78 0%, #1d2150 40%, #0d1030 100%);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 90px -20px rgba(255, 107, 44, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
  animation: tg-phone-in .6s var(--tg-ease) both; }
.tg-lb__phone::before { content: ""; position: absolute; z-index: 3; top: calc(var(--lh) * .032); left: 50%; width: 28%; height: calc(var(--lh) * .03); transform: translateX(-50%); border-radius: 99px; background: #070920; pointer-events: none; }
.tg-lb__phone.is-swap { animation: tg-phone-swap .45s var(--tg-ease) both; }
.tg-lb__phone.is-swap-back { animation: tg-phone-swap-back .45s var(--tg-ease) both; }
@keyframes tg-phone-in { from { opacity: 0; transform: rotateY(-24deg) rotateX(8deg) translateY(40px) scale(.9); } }
@keyframes tg-phone-swap { from { opacity: .2; transform: rotateY(-30deg) translateX(60px) scale(.94); } }
@keyframes tg-phone-swap-back { from { opacity: .2; transform: rotateY(30deg) translateX(-60px) scale(.94); } }
.tg-lb__screen { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-radius: calc(var(--lh) * .052); background: #fff; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.tg-lb__screen::-webkit-scrollbar { display: none; }
.tg-lb__screen:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.tg-lb__screen img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .35s ease; }
.tg-lb__screen img.is-loaded { opacity: 1; }
.tg-lb__loader { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid rgba(27, 31, 75, .15); border-top-color: var(--saffron); animation: tg-spin .8s linear infinite; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.tg-lb.is-loading .tg-lb__loader { opacity: 1; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
.tg-lb__nav { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.tg-lb__nav:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.tg-lb__nav .icon { width: 24px; height: 24px; }

.tg-lb__panel { width: 340px; color: #c9cbe4; animation: tg-panel-in .5s var(--tg-ease) .08s both; }
@keyframes tg-panel-in { from { opacity: 0; transform: translateX(24px); } }
.tg-lb__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.tg-lb__count { font: 600 .8125rem/1 var(--font-body); letter-spacing: .08em; color: #9ea2cc; font-variant-numeric: tabular-nums; }
.tg-lb__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }
.tg-lb__close:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.tg-lb__cat { display: block; font: 600 .75rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #4fdcae; }
.tg-lb__panel h2 { margin-top: 8px; color: #fff; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; }
.tg-lb__desc { margin-top: 10px; font-size: 1.0625rem; color: #c9cbe4; }
.tg-lb__premium { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 107, 44, .12); border: 1px solid rgba(255, 107, 44, .35); font-size: .9375rem; color: #ffd9c7; }
.tg-lb__premium[hidden] { display: none; }
.tg-lb__premium .icon { width: 20px; height: 20px; color: var(--saffron); margin-top: 2px; }
.tg-lb__premium a { color: #fff; text-decoration: underline; }
.tg-lb__actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tg-lb__auto { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: #c9cbe4; font-weight: 600; font-size: .9375rem; }
.tg-lb__auto:hover { color: #fff; }
.tg-lb__auto .icon { width: 18px; height: 18px; }
.tg-lb__facts { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 10px; font-size: .9375rem; }
.tg-lb__facts li { display: flex; align-items: center; gap: 10px; }
.tg-lb__facts .icon { width: 18px; height: 18px; color: var(--mint); }
.tg-lb__keys { margin-top: 22px; font-size: .8125rem; color: #8a8fbf; }
.tg-lb__keys kbd { display: inline-block; min-width: 24px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .2); font: 600 .75rem/1 var(--font-body); text-align: center; color: #c9cbe4; }
html.tg-locked, html.tg-locked body { overflow: hidden; }

/* ---------- Sticky mobile CTA (shown by templates.js) ---------- */
.tg-sticky { z-index: 60; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .tg-lb__layout { gap: 32px; }
  .tg-lb__panel { width: 300px; }
  .tg-lb__facts, .tg-lb__keys { display: none; }
}

@media (max-width: 980px) {
  .tg-hero { --ph: clamp(320px, calc(100svh - 470px), 540px); }
  .tg-cf[data-pos="3"], .tg-cf[data-pos="-3"] { opacity: 0; }
  .tg-filter__inner { gap: 12px; }
  .tg-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: 2px var(--gutter); margin: 0 calc(var(--gutter) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%); }
  .tg-chips::-webkit-scrollbar { display: none; }
  .tg-chip { scroll-snap-align: start; }
  .tg-steps__list { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }

  /* lightbox: phone on top, compact panel below */
  .tg-lb { --lh: min(calc(100svh - 200px), 760px); padding: 12px 12px 16px; align-items: start; }
  .tg-lb__layout { flex-direction: column; gap: 14px; width: 100%; }
  .tg-lb__stage { gap: 12px; }
  .tg-lb__panel { width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; animation-name: tg-fade; }
  .tg-lb__top { position: fixed; top: 12px; right: 12px; z-index: 5; margin: 0; }
  .tg-lb__count { display: none; }
  .tg-lb__cat { grid-column: 1; }
  .tg-lb__panel h2 { grid-column: 1; margin-top: 0; font-size: 1.375rem; }
  .tg-lb__desc { grid-column: 1; margin-top: 0; font-size: .875rem; }
  .tg-lb__premium { grid-column: 1 / -1; order: 5; margin-top: 8px; font-size: .8125rem; padding: 8px 12px; }
  .tg-lb__actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .tg-lb__actions .btn { min-height: 46px; padding: 0 18px; font-size: .9375rem; }
  .tg-lb__auto { justify-content: center; min-height: 36px; font-size: .8125rem; }
}

@media (max-width: 640px) {
  .tg-hero { --ph: clamp(280px, calc(100svh - 500px), 440px); padding-top: 22px; }
  .tg-hero h1 { font-size: clamp(1.875rem, 8.6vw, 2.5rem); }
  .tg-hero h1 span { white-space: normal; }
  .tg-hero__copy p { font-size: .9688rem; margin-top: 12px; }
  .tg-eyebrow { font-size: .6875rem; padding: 6px 12px 6px 9px; }
  .tg-stage { height: calc(var(--ph) + 34px); margin-top: 18px; }
  .tg-cf[data-pos="0"] { transform: translate3d(var(--drag, 0px), 0, 40px); }
  .tg-cf[data-pos="1"] { transform: translate3d(calc(var(--pw) * .92 + var(--drag, 0px)), 0, -80px) rotateY(-38deg) scale(.86); }
  .tg-cf[data-pos="-1"] { transform: translate3d(calc(var(--pw) * -.92 + var(--drag, 0px)), 0, -80px) rotateY(38deg) scale(.86); }
  .tg-cf[data-pos="2"], .tg-cf[data-pos="-2"] { opacity: 0; pointer-events: none; }
  .tg-cf { -webkit-box-reflect: none; }
  .tg-hero__meta { gap: 14px; margin-top: 2px; width: 100%; }
  .tg-hero__nav { width: 100%; justify-content: space-between; }
  .tg-hero__label { min-width: 0; flex: 1; }
  .tg-hero__label b { font-size: 1.125rem; }
  .tg-hero__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 8px; }
  .tg-hide-sm { display: none; }
  .tg-hero__actions .btn { min-height: 48px; padding: 0 12px; font-size: .875rem; gap: 6px; }
  .tg-hero__actions .btn .icon { width: 16px; height: 16px; }
  .tg-scrollcue { display: none; }
  .tg-pool { width: 420px; bottom: 16%; }

  .tg-gallery { padding: 56px 0 72px; }
  .tg-filter { margin: 24px 0 28px; padding: 10px 0; }
  .tg-chip { min-height: 40px; font-size: .8125rem; padding-left: 14px; }
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .tg-device { padding: 5px; border-radius: 24px; }
  .tg-device::before { top: 11px; height: 10px; }
  .tg-device__screen { border-radius: 19px; }
  .tg-device__glare { border-radius: 24px; }
  .tg-device__peek { display: none; }
  .tg-badge { padding: 5px 8px 5px 6px; font-size: .625rem; }
  .tg-tile .tg-badge { top: -10px; }
  .tg-badge .icon { width: 12px; height: 12px; }
  .tg-tile__info { padding-top: 12px; }
  .tg-tile__info h3 { font-size: 1rem; }
  .tg-tile__info p { font-size: .8125rem; }
  .tg-steps { padding: 64px 0; }

  /* phone narrow enough to leave room for the close and arrow buttons beside it */
  .tg-lb { --lh: min(calc(100svh - 176px), 700px, calc((100vw - 116px) / .485)); }
  .tg-lb__stage { width: 100%; justify-content: center; }
  .tg-lb__nav { position: absolute; z-index: 4; top: 50%; width: 44px; height: 44px; margin-top: -22px; background: rgba(27, 31, 75, .75); }
  .tg-lb__nav--prev { left: 0; }
  .tg-lb__nav--next { right: 0; }
  .tg-lb__top { top: 0; right: -8px; } /* fixed to the layout box (it has perspective): keeps the close button clear of the phone */
  .tg-lb__panel { gap: 2px 12px; }
  .tg-lb__desc { display: none; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-height: 1000px) and (min-width: 641px) {
  .tg-scrollcue { display: none; }
}

/* ---------- Reduced motion: no drifting, no auto-scroll, no flying phones ---------- */
@media (prefers-reduced-motion: reduce) {
  .tg-orb, .tg-floor, .tg-scrollcue .icon, .tg-device__screen { animation: none; }
  .tg-cf, .tg-cf__screen img, .tg-device, .tg-device__screen img, .tg-tile .tg-badge { transition: none; }
  .tg-cf[data-pos="0"] .tg-cf__screen img { transform: none; }
  .tg-lb__phone, .tg-lb__panel, .tg-lb__backdrop, .tg-tile.is-entering { animation: none; }
}