/* TripleReviews motion pack D: code cells, liquid tab bar and sidebar capsule, download. See fx-motion.js. */
.fx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. one-time code cells ---------- */
.fx-otp{--fx-ink:var(--ink,#0F1417);--fx-teal:var(--teal,#0B4F5C);--fx-mint:var(--mint,#4FE3C8);--fx-bad:var(--bad-line,#D6453B);
  position:relative;display:block;width:100%;max-width:400px;height:62px;margin:2px 0 8px}
.fx-otp-cells{position:relative;display:flex;gap:8px;height:100%;justify-content:space-between}
.fx-otp-c{position:relative;flex:1 1 0;max-width:58px;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(246,250,249,.78) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 0 0 1.5px rgba(11,79,92,.2),inset 0 1px 0 #fff,0 10px 22px -16px rgba(10,35,42,.45);
  font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:26px;font-weight:800;color:var(--fx-ink);
  transition:box-shadow .2s ease,background-color .2s ease;will-change:transform}
.fx-otp-c::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 42%)}
.fx-otp-d{position:relative;z-index:1;line-height:1}
.fx-otp-c.is-on{box-shadow:inset 0 0 0 1.5px rgba(11,79,92,.38),inset 0 1px 0 #fff,0 12px 24px -16px rgba(11,79,92,.5)}
.fx-otp.is-focus .fx-otp-c.is-cur{box-shadow:inset 0 0 0 2.5px var(--fx-teal),0 0 0 4px rgba(79,227,200,.28),0 12px 24px -16px rgba(11,79,92,.5)}
.fx-otp.is-focus .fx-otp-c.is-cur:not(.is-on)::before{content:'';position:absolute;left:50%;top:30%;bottom:30%;width:2px;margin-left:-1px;border-radius:1px;background:var(--fx-teal);animation:fx-caret 1s steps(1) infinite}
@keyframes fx-caret{50%{opacity:0}}
.fx-otp.is-focus.is-sel .fx-otp-c.is-on{background:linear-gradient(180deg,#E6F2F1 0%,#D5ECE9 100%);box-shadow:inset 0 0 0 2px var(--fx-teal),0 12px 24px -16px rgba(11,79,92,.5)}
.fx-otp.is-sel .fx-otp-c::before{display:none}
.fx-otp-c.fx-pop{animation:fx-pop .32s cubic-bezier(.34,1.56,.64,1)}
.fx-otp-c.fx-pop .fx-otp-d{animation:fx-pop-d .28s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-pop{0%{transform:scale(.86)}55%{transform:scale(1.07);box-shadow:inset 0 0 0 2px var(--fx-mint),0 0 22px 2px rgba(79,227,200,.55)}100%{transform:scale(1)}}
@keyframes fx-pop-d{0%{opacity:0;transform:translateY(9px) scale(.5)}100%{opacity:1;transform:none}}
/* the real input lies over the cells: autofill, paste, selection and the label all stay native */
.fx-otp>input.fx-otp-in{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0 !important;border-radius:16px;
  background:transparent !important;box-shadow:none !important;outline:none;color:transparent !important;-webkit-text-fill-color:transparent;caret-color:transparent;
  font-size:16px;letter-spacing:0;text-indent:-9999px;cursor:text;opacity:1}
.fx-otp>input.fx-otp-in::placeholder{color:transparent}
.fx-otp>input.fx-otp-in::selection{background:transparent}
.fx-otp>input.fx-otp-in:focus-visible{outline:none}
.fx-otp.is-focus{outline:none}
/* checking */
.fx-otp.is-busy .fx-otp-c{box-shadow:inset 0 0 0 1.5px rgba(11,79,92,.5),0 0 18px -2px rgba(79,227,200,.6),0 10px 22px -16px rgba(10,35,42,.45)}
.fx-otp.is-busy .fx-otp-c::before{display:none}
/* verified */
.fx-otp-ok{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none;opacity:0;visibility:hidden}
.fx-otp.is-ok .fx-otp-ok{opacity:1;visibility:visible}
.fx-otp.is-ok .fx-otp-c{opacity:0 !important}
.fx-otp-okc{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;color:var(--fx-teal);
  background:radial-gradient(circle at 50% 35%,#fff 0%,#E8FBF6 100%);box-shadow:inset 0 0 0 2px var(--fx-mint),0 0 0 6px rgba(79,227,200,.2),0 0 28px 4px rgba(79,227,200,.55)}
.fx-otp-okt{font-family:var(--head,'Bricolage Grotesque',Inter,sans-serif);font-size:20px;font-weight:800;color:var(--fx-teal);letter-spacing:-.01em}
.fx-otp.is-ok .fx-otp-okc{animation:fx-okc .5s cubic-bezier(.34,1.56,.64,1) both}
.fx-otp.is-ok .fx-otp-okc::after{content:'';position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px var(--fx-mint);animation:fx-ring .9s ease-out .1s both}
.fx-otp.is-ok .fx-otp-tick{stroke-dasharray:24;stroke-dashoffset:24;animation:fx-tick .36s cubic-bezier(.65,0,.35,1) .18s forwards}
.fx-otp.is-ok .fx-otp-okt{animation:fx-okt .4s cubic-bezier(.2,.8,.2,1) .16s both}
@keyframes fx-okc{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes fx-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes fx-tick{to{stroke-dashoffset:0}}
@keyframes fx-okt{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
/* wrong code */
.fx-otp.is-bad .fx-otp-c{box-shadow:inset 0 0 0 2px var(--fx-bad),0 10px 22px -16px rgba(143,29,20,.5);background:linear-gradient(180deg,#fff 0%,#FFF4F2 100%);color:var(--bad,#8F1D14)}
.fx-otp.fx-shake .fx-otp-cells{animation:fx-shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes fx-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@media (max-width:420px){.fx-otp{height:56px}.fx-otp-cells{gap:6px}.fx-otp-c{border-radius:14px;font-size:23px}}
/* the verify-business card keeps its narrower code box */
.trv-root .fx-otp,.trv-in .fx-otp{max-width:360px}

/* ---------- 2. liquid tab bar (phones) ---------- */
@media (max-width:1023px){
  .tabbar.fx-lq{background:transparent !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;overflow:visible}
  .fx-lq-bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;
    filter:drop-shadow(0 -4px 14px rgba(10,35,42,.08))}
  .fx-lq-fill{fill:rgba(255,255,255,.97)}
  .fx-lq-edge{fill:none;stroke:var(--line,#E4E7E1);stroke-width:1}
  .fx-lq-orb{position:absolute;left:0;top:0;z-index:3;width:48px;height:48px;border-radius:50%;pointer-events:none;opacity:0;transform-origin:50% 50%;
    background:radial-gradient(circle at 50% 30%,#13697A 0%,var(--teal,#0B4F5C) 62%,var(--teal-dark,#083A44) 100%);
    box-shadow:0 0 0 3px rgba(79,227,200,.35),0 8px 20px -6px rgba(11,79,92,.6),0 0 22px -4px rgba(79,227,200,.7)}
  .fx-lq .tab{z-index:2}
  .fx-lq .tab[aria-current=page]{z-index:4}
  .fx-lq .tab .tab-ic{transition:transform .32s cubic-bezier(.34,1.4,.64,1),color .2s ease .05s,background-color .15s}
  .fx-lq .tab[aria-current=page] .tab-ic{transform:translateY(var(--fx-lift,-20px));background:transparent !important;color:#fff;transition-delay:.06s}
  .fx-lq .tab[aria-current=page] .tab-t{color:var(--teal,#0B4F5C)}
  .fx-lq .tab[aria-current=page] .bdg{top:auto;bottom:calc(100% - 8px);transform:translateY(calc(var(--fx-lift,-20px) * .5))}
  .fx-lq .tab[aria-current=page] .tab-dot{transform:translateY(-18px)}
  .fx-lq .tab:active .tab-ic{background:transparent}
  .fx-lq .tab:not([aria-current=page]):active .tab-ic{transform:scale(.92)}
}
@media (min-width:1024px){.fx-lq-bg,.fx-lq-orb{display:none}}
/* the More sheet ends above the tab bar: room at its end for the raised orb, so the last item is never under it */
@media (max-width:1023px){html:has(.tabbar.fx-lq) .side{padding-bottom:40px}}

/* ---------- liquid sidebar capsule (computers) ---------- */
.snav.fx-lqv{position:relative}
.fx-lqv-bg{display:none}
.snav.fx-lqv .fx-lqv-bg{display:block;position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.fx-lqv-blob{fill:#fff}
.snav.fx-lqv .anav{position:relative;z-index:1;transition:background-color .15s}
.snav.fx-lqv .anav svg{transition:none}
.snav.fx-lqv .anav[aria-current=page]{background:transparent !important;box-shadow:none !important}
.snav.fx-lqv .anav[aria-current=page]:not(.fx-lq-on){color:var(--side-text,#A9C4C9)}
.snav.fx-lqv .anav[aria-current=page]:not(.fx-lq-on) svg{color:inherit}
.snav.fx-lqv .anav.fx-lq-on{color:var(--ink,#0F1417);transition:none}
.snav.fx-lqv .anav.fx-lq-on svg{color:var(--teal,#0B4F5C)}

/* ---------- sidebar on a short screen (computers) ----------
   The menu list is the part that scrolls, with a soft fade at an edge that has more; the plan card and the footer
   sit under it in normal flow, so they never cover an item. The capsule lives inside the list, so it is clipped to
   it and scrolls with it. The footer is one line: the collapse button is an icon (named for screen readers, with a
   tooltip) and Feedback keeps its word. */
@media (min-width:1024px){
  #side{overflow:hidden}
  #side .snav{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -4px;padding:2px 4px;scroll-padding:12px 0}
  #side .snav::-webkit-scrollbar{display:none}
  #side .snav.fx-more-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
  #side .snav.fx-more-t{-webkit-mask-image:linear-gradient(transparent,#000 24px);mask-image:linear-gradient(transparent,#000 24px)}
  #side .snav.fx-more-t.fx-more-b{-webkit-mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  #side .side-foot{position:static;margin-top:0;flex:none}
  #side .fbm-row{justify-content:space-between;gap:8px}
  #side .fbm-row>.side-mini-b{flex:none;width:40px;min-width:40px;justify-content:center;padding:0}
  #side .fbm-row>.side-mini-b .side-mini-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #side .fbm-side{white-space:nowrap}
  html.side-mini #side .fbm-row>.side-mini-b{width:auto}
}
@media (min-width:1024px) and (max-height:760px){
  #side{gap:8px;padding-top:14px;padding-bottom:12px}
  #side .side-plan{padding:9px 12px}
}

/* ---------- 3. download ---------- */
.fx-dl-busy{color:transparent !important;-webkit-text-fill-color:transparent}
.fx-dl-busy>*{visibility:hidden}
.fx-dl{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;will-change:transform}
.fx-dl svg{display:block;overflow:visible}
.fx-dl-track,.fx-dl-prog{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-dl-track{opacity:.28}
.fx-dl-prog{filter:drop-shadow(0 0 4px rgba(79,227,200,.75))}
.fx-dl-arrow path{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fx-dl-canopy path{fill:currentColor}
.fx-dl-canopy .fx-dl-cords{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.8}
.fx-dl-file path{fill:var(--mint,#4FE3C8);stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.fx-dl-file .fx-dl-fold{fill:none}
.fx-dl-tick{stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-dl.is-ok .fx-dl-tick{filter:drop-shadow(0 0 6px rgba(79,227,200,.9))}
.fx-dl.is-ok .fx-dl-prog{stroke:var(--teal,#0B4F5C)}
.fx-dl.is-bad{color:var(--bad-line,#D6453B) !important}
/* on a dark or orange button the line takes the button's own text colour, the glow stays mint */

@media (prefers-reduced-motion:reduce){
  .fx-otp-c,.fx-otp-c.fx-pop,.fx-otp-c.fx-pop .fx-otp-d,.fx-otp.fx-shake .fx-otp-cells,.fx-otp.is-ok .fx-otp-okc,.fx-otp.is-ok .fx-otp-okt{animation:none !important;transition:none !important}
  .fx-otp.is-ok .fx-otp-okc::after{display:none}
  .fx-otp.is-ok .fx-otp-tick{animation:none;stroke-dashoffset:0}
  .fx-otp.is-busy .fx-otp-c{opacity:.6}
  .fx-otp.is-focus .fx-otp-c.is-cur:not(.is-on)::before{animation:none}
  .fx-lq .tab .tab-ic,.fx-lq-orb{transition:none !important}
}