/* Runtime additions — pieces the original site generated from its Tailwind
   config / inline style tags rather than shipping in a static stylesheet. */

/* --- marquee for the home testimonial rail ---------------------------- */
@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.animate-marquee-left {
  animation: marquee-left 48s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .animate-marquee-left { animation: none; }
}

/* --- font families ---------------------------------------------------- */
.fi { background-size: contain; background-position: 50%; background-repeat: no-repeat; display: inline-block; }
.fi-in { background-image: url(/assets/media/in.0ac1dcf1.svg); }
.fi-us { background-image: url(/assets/media/us.3e7fa2e0.svg); }
.fi-eu { background-image: url(/assets/media/eu.8445d4f1.svg); }
.fi-gb { background-image: url(/assets/media/gb.58677b3a.svg); }
.fi-ca { background-image: url(/assets/media/ca.2b7638ec.svg); }
.fi-au { background-image: url(/assets/media/au.783a31b8.svg); }

/* --- preloader (home only) -------------------------------------------- */
.preloader-logo {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  user-select: none; opacity: 0; filter: blur(10px);
  transform: translate3d(0,0,0) scale(0.8);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.preloader-logo--in { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
.preloader-logo--zoom {
  transform: translate3d(0,0,0) scale(48);
  transition: transform .8s cubic-bezier(.76,0,.24,1);
  filter: none;
}
.preloader-logo--zoom .preloader-logo__img { filter: none; }
@media (min-width: 769px) { .preloader-logo--zoom { transform: translate3d(0,0,0) scale(150); } }
.preloader-logo__img {
  width: 7rem; height: 7rem; object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255,101,104,.35));
}
@media (min-width: 768px) { .preloader-logo__img { width: 8.4rem; height: 8.4rem; } }

/* --- the light-ray shader canvas -------------------------------------- */
.light-rays-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.light-rays-container canvas { display: block; width: 100% !important; height: 100% !important; }

/* --- animated stat counters ------------------------------------------- */
.fz-count { font-variant-numeric: tabular-nums; }

/* --- reveal-on-scroll helper for sections that ship with opacity:0 ----- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- toast stack ------------------------------------------------------- */
.fz-toasts {
  position: fixed; z-index: 10100; pointer-events: none;
  inset-x: 0; top: 0; padding: 1rem;
  display: flex; flex-direction: column; gap: .625rem; align-items: stretch;
}
@media (min-width: 768px) {
  .fz-toasts { inset-inline: auto 1.25rem; top: 1.25rem; width: 400px; align-items: stretch; }
}
.fz-toast {
  pointer-events: auto;
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .875rem 1rem; border-radius: 1rem;
  background: rgba(16,18,24,.92); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.8);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: #fff; animation: fz-toast-in .28s cubic-bezier(.22,1,.36,1);
}
.fz-toast--out { animation: fz-toast-out .22s ease forwards; }
@keyframes fz-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fz-toast-out { to { opacity: 0; transform: translateY(-8px) scale(.97); } }
.fz-toast__title { font-size: .8125rem; font-weight: 700; color: #fff; }
.fz-toast__msg { font-size: .75rem; color: #a1a1aa; margin-top: .125rem; }
.fz-toast__sub { font-size: .6875rem; color: #71717a; margin-top: .125rem; }
.fz-toast__price { font-size: .8125rem; font-weight: 700; color: #ffa3a3; white-space: nowrap; }

/* --- mobile nav sheet --------------------------------------------------- */
.fz-sheet {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(2,11,22,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.fz-sheet.is-open { opacity: 1; pointer-events: auto; }
.fz-sheet__panel {
  position: absolute; inset: 0 0 0 auto; width: min(21rem, 88vw);
  background: linear-gradient(180deg, #070c14, #0a0a0a);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  padding: 1.25rem; overflow-y: auto;
}
.fz-sheet.is-open .fz-sheet__panel { transform: none; }
.fz-sheet__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; border-radius: .875rem; font-size: .9375rem; font-weight: 600;
  color: #d4d4d8; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
}
.fz-sheet__link:hover { color: #fff; border-color: rgba(255,101,104,.28); background: rgba(255,101,104,.06); }
.fz-sheet__link.is-active { color: #fff; border-color: rgba(255,101,104,.35); background: rgba(255,101,104,.1); }

/* --- currency dropdown -------------------------------------------------- */
.fz-menu {
  position: fixed; z-index: 11000; min-width: 11rem;
  background: #0a0f0c; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.65); overflow: hidden;
  animation: fz-menu-in .14s ease;
}
@keyframes fz-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fz-menu__item {
  display: flex; width: 100%; align-items: center; gap: .625rem;
  padding: .625rem .75rem; font-size: .875rem; color: #a1a1aa; text-align: left;
}
.fz-menu__item:hover { background: rgba(255,255,255,.05); color: #fff; }
.fz-menu__item.is-active { background: rgba(255,101,104,.12); color: #fff; }

/* --- FAQ accordion ------------------------------------------------------ */
.fz-faq__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s ease;
}
.fz-faq__body > div { overflow: hidden; min-height: 0; }
.fz-faq.is-open .fz-faq__body { grid-template-rows: 1fr; }
.fz-faq.is-open .fz-faq__icon { transform: rotate(180deg); color: #ff6568; }

/* --- product cards ------------------------------------------------------
   The origin drives these cards with React: a rotating glare layer plus a
   blurred halo, both stacked inside a 3D-tilted wrapper. None of that got
   reimplemented, so the glare sat at opacity 1 as a flat salmon square, and
   Chrome rasterised the tilt as a diagonal seam across the card.

   Here the glare is dropped and the hover is a flat lift with a red rim —
   same polish, nothing left for the compositor to break. */
.glare-wrapper { display: none !important; }

.ptc-card-wrapper > .ptc-card {
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s ease,
              border-color .28s ease;
  cursor: pointer;
}
.ptc-card-wrapper:hover > .ptc-card,
.ptc-card-wrapper:focus-within > .ptc-card {
  transform: translateY(-3px);
  border-color: rgba(255, 101, 104, .28);
  box-shadow: 0 24px 60px -30px #000, 0 0 70px -22px rgba(251, 44, 54, .45);
}

/* --- about: the two-person roster ---------------------------------------
   Sized down a quarter from the origin's four-up grid (432x602 -> 324x451). */
.pc-team { max-width: 324px; margin-inline: auto; }

/* The origin desaturates avatar art so it blends into its card. These plates
   are the brand mark, so they keep their colour. */
.pc-avatar-content { filter: none !important; }
.pc-team .pc-inside { filter: saturate(.9) brightness(.95); }

/* --- support bubble ----------------------------------------------------- */
.fz-support-panel {
  position: fixed; z-index: 10000; right: 1rem; bottom: 5.75rem;
  width: min(20rem, calc(100vw - 2rem));
  background: rgba(10,12,16,.96); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 1rem; display: none;
}
@media (min-width: 1024px) { .fz-support-panel { bottom: 1.5rem; } }
.fz-support-panel.is-open { display: block; animation: fz-toast-in .2s ease; }

/* --- scrollbar ---------------------------------------------------------- */
.fz-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.fz-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.fz-scroll::-webkit-scrollbar-track { background: transparent; }

/* --- storefront session chip ------------------------------------------- */
[hidden] { display: none !important; }

.fz-user { position: relative; display: flex; align-items: center; }
.fz-user__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  transition: border-color .2s, background .2s, transform .2s;
}
.fz-user__btn:hover {
  border-color: rgba(255,101,104,.45); background: rgba(255,101,104,.09);
  transform: translateY(-1px);
}
.fz-user__avatar {
  flex: none; border-radius: 50%; object-fit: cover;
  background: #141414; border: 1px solid rgba(255,101,104,.35);
}
.fz-user__avatar--initial {
  display: grid; place-items: center; font-weight: 700;
  font-size: .875rem; color: #1a0607;
  background: linear-gradient(135deg, #ffa3a3, #fb2c36);
}
.fz-user__menu {
  position: absolute; right: 0; top: calc(100% + .6rem); width: 17.5rem; z-index: 10060;
  padding: .45rem; border-radius: 1rem;
  background: linear-gradient(180deg, rgba(17,17,20,.985), rgba(8,8,10,.985));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 28px 70px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: fz-menu-in .16s ease;
}
.fz-user__who { display: flex; align-items: center; gap: .7rem; padding: .6rem .55rem .7rem; }
.fz-user__who-meta { min-width: 0; flex: 1; }
.fz-user__who-meta b {
  display: block; font-size: .8125rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz-user__who-meta span {
  display: block; margin-top: .12rem; font-size: .6875rem; color: #71717a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz-user__xp {
  padding: .6rem .55rem .7rem;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.fz-user__xp-line {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8b8b94;
}
.fz-user__xp-line b { font-size: .6875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #ff8b8d; }
.fz-user__xp-bar { margin-top: .45rem; height: 4px; border-radius: 9999px; background: rgba(255,255,255,.08); overflow: hidden; }
.fz-user__xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6568, #fb2c36); box-shadow: 0 0 12px rgba(251,44,54,.75); }
.fz-user__xp p { margin: .4rem 0 0; font-size: .625rem; color: #52525b; }
.fz-user__group { padding: .3rem 0; }
.fz-user__group + .fz-user__group { border-top: 1px solid rgba(255,255,255,.07); }
.fz-user__item {
  display: flex; width: 100%; align-items: center; gap: .7rem;
  padding: .62rem .55rem; border-radius: .6rem; border: 0; background: none;
  font: inherit; font-size: .8125rem; font-weight: 600; color: #d4d4d8;
  text-align: left; cursor: pointer; text-decoration: none;
}
.fz-user__item svg { flex: none; color: #71717a; transition: color .15s; }
.fz-user__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.fz-user__item:hover svg { color: #ff8b8d; }
.fz-user__item--out { color: #fca5a5; }
.fz-user__item--out:hover { background: rgba(255,163,163,.1); color: #fecaca; }
.fz-user__item--out:hover svg { color: #fca5a5; }

/* --- Google button (visual face + invisible real iframe) ---------------- */
.fz-google { position: relative; min-height: 2.75rem; border-radius: 1rem; }
.fz-google__face {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; height: 2.75rem; border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: #fff; font-size: .8125rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .2s, background .2s;
}
.fz-google:hover .fz-google__face { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.09); }
.fz-google__slot {
  position: absolute; inset: 0; opacity: 0; overflow: hidden;
  border-radius: inherit; cursor: pointer;
}
.fz-google__slot > div { width: 100% !important; height: 100% !important; }
.fz-google__slot iframe { width: 100% !important; height: 100% !important; border: 0; }


.fz-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fz-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2,4,8,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fz-modal__card {
  position: relative; width: min(32rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 1.5rem; border-radius: 1.35rem;
  background: linear-gradient(180deg, #101013, #0a0a0c);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  animation: fz-modal-in .22s cubic-bezier(.22,1,.36,1);
}
@keyframes fz-modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.fz-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.fz-modal__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.fz-modal__head p { margin: .3rem 0 0; font-size: .75rem; line-height: 1.5; color: #71717a; }
.fz-modal__x {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: .6rem; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: #a1a1aa; cursor: pointer;
}
.fz-modal__x:hover { color: #fff; border-color: rgba(255,101,104,.4); }
.fz-modal__form { display: flex; flex-direction: column; gap: .9rem; }
.fz-modal .fz-field { display: flex; flex-direction: column; gap: .4rem; }
.fz-modal .fz-field > label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; }
.fz-modal .fz-field > label span { font-weight: 500; letter-spacing: 0; text-transform: none; color: #52525b; }
.fz-modal .fz-input {
  width: 100%; padding: .7rem .85rem; border-radius: .75rem;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1);
  color: #f4f4f5; font: inherit; font-size: .8125rem; outline: none;
  transition: border-color .2s, background .2s;
}
.fz-modal .fz-input:focus { border-color: rgba(255,101,104,.45); background: rgba(0,0,0,.65); }
.fz-modal textarea.fz-input { resize: vertical; min-height: 7rem; line-height: 1.6; }
.fz-modal select.fz-input { appearance: none; cursor: pointer; }
.fz-stars { display: flex; gap: .35rem; }
.fz-star {
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
  border-radius: .6rem; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); color: rgba(255,255,255,.22);
  font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .16s;
}
.fz-star:hover { border-color: rgba(255,101,104,.35); }
.fz-star.is-on { color: #ff6568; border-color: rgba(255,101,104,.4); background: rgba(255,101,104,.1); text-shadow: 0 0 14px rgba(255,101,104,.55); }
.fz-modal__error { margin: 0; padding: .55rem .75rem; border-radius: .6rem; font-size: .75rem; line-height: 1.5; color: #fca5a5; border: 1px solid rgba(255,163,163,.35); background: rgba(255,163,163,.08); }
.fz-modal__foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .35rem; }
.fz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.6rem; padding: 0 1.1rem; border-radius: .75rem; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #e4e4e7; font: inherit; font-size: .8125rem; font-weight: 600;
}
.fz-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.fz-btn--primary {
  border-color: rgba(255,101,104,.4); color: #fff;
  background: linear-gradient(180deg, rgba(255,101,104,.32), rgba(251,44,54,.22));
  box-shadow: 0 8px 24px -10px rgba(251,44,54,.7);
}
.fz-btn--primary:hover { background: linear-gradient(180deg, rgba(255,101,104,.45), rgba(251,44,54,.32)); }
.fz-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- phone ergonomics --------------------------------------------------- */
/* Every tappable thing should respond on the first tap: no 300ms delay, no
   double-tap zoom stealing the second press, and no rubber-band scroll chaining
   out of the fixed overlays. */
a, button, [role="button"], summary, label[for], .fz-dock__item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 101, 104, .16);
}
html { -webkit-text-size-adjust: 100%; }

/* The bottom dock is a fixed strip; the browser bar on iOS can sit on top of
   it, so lift whatever is pinned to the bottom by the safe-area inset. */
:root { --fz-safe-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 1023px) {
  /* iOS zooms the whole page when a focused field is under 16px. The capture's
     utilities set 13-14px with class-level specificity, so this needs the
     override to actually land. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  .fz-modal__card { border-radius: 1.15rem; }
  .fz-support-panel { bottom: calc(6.25rem + var(--fz-safe-bottom)); }
}

/* --- status page -------------------------------------------------------- */
/* Filters are wired in app.js; these are the only two states the baked page
   does not already ship. */
.fz-status-empty {
  display: block;
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #71717a;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
}
.fz-status-tab {
  position: relative;
}