/* ========================================================================== */
/* :root — Theme tokens / design variables                                     */
/* ========================================================================== */

:root{
  --tps-border: color-mix(in oklab, var(--tps-primary) 16%, white);
  --tps-border-2: color-mix(in oklab, var(--tps-primary) 13%, white);
  --tps-border-3: color-mix(in oklab, var(--tps-primary) 20%, white);
  --tps-primary: #7732be;
  --tps-accent: var(--tps-primary);
  --tps-accent-2: color-mix(in oklab, var(--tps-primary) 68%, black);
  --tps-bg: #f5f8fc;
  --tps-grape: #9c4298;
  --tps-ring: color-mix(in oklab, var(--tps-primary) 25%, transparent);
  --tps-success: #16a34a;
  --tps-warning: var(--c35);
  --tps-muted: #6b7280;
  --tps-secondary: #b2e03d;
  --tps-secondary-2: #9bc82f;
  --c01: #fff;
}

/* ========================================================================== */
/* /:root                                                                      */
/* ========================================================================== */


/* ========================================================================== */
/* tps-section — Base section layout + themes, headings, buttons, stacks, CTA */
/* ========================================================================== */

:root{
  --tps-text: #101014;
  --tps-text-soft: #3b3f47;
  --tps-border: #e7e9ee;
  --tps-border-soft: #eef0f5;
  --tps-bg: #fff;
  --tps-bg-soft: #fafafb;
  --tps-radius-lg: 8px;
  --tps-shadow-sm: 0 10px 40px rgba(2, 6, 23, 0.06);
  --tps-pad: 34px;
  --peek: 6px;
  --pin-gap: 8px;
  --pin-gap-mobile: 6px;
}

@media (max-width: 991.98px){
  :root{
    --tps-pad: 28px;
  }
}

@media (max-width: 767.98px){
  :root{
    --tps-pad: 20px;
  }
}

.tps-section{
  position: relative;
  z-index: 0;
  margin-block: 32px;
  background: var(--tps-bg);
  border-radius: var(--tps-radius-lg);
  box-shadow: var(--tps-shadow-sm);
  overflow: hidden;
  isolation: isolate;
  padding: var(--tps-pad);
}

.tps-section::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--tps-border);
  z-index: 2;
}

.tps-section--wash{
  background: color-mix(in oklab, var(--tps-accent) 7%, white);
}

.tps-section.tps-section--gradient{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(156, 66, 152, 0.28), transparent),
    linear-gradient(135deg, #140a22 0%, #1c0f30 35%, #24103b 75%, #2b0f47 100%);
  color: #f5f7ff;
}

.tps-section.tps-section--gradient::before{
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.tps-section.tps-section--gradient .tps-sec .sec-title,
.tps-section.tps-section--gradient .tps-sec .sec-subtitle,
.tps-section.tps-section--gradient .sec-subhead{
  color: #fff;
}

.tps-section.tps-section--gradient .tps-sec .sec-subtitle{
  color: rgba(255, 255, 255, 0.92);
}

.tps-section.tps-section--gradient .tps-sec .sec-eyebrow{
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.tps-section.tps-section--gradient-light{
  background:
    radial-gradient(900px 480px at -8% -10%, rgba(156, 66, 152, 0.20), transparent 65%),
    radial-gradient(720px 520px at 110% -8%, rgba(111, 66, 193, 0.18), transparent 58%),
    radial-gradient(420px 300px at 28% 110%, rgba(156, 66, 152, 0.12), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #f6f0ff 52%, #efe6ff 100%);
}

.tps-section.tps-section--gradient-light::before{
  box-shadow: inset 0 0 0 1px rgba(111, 66, 193, 0.20);
}

.tps-section.tps-section--bleed-gradient{
  border-radius: 0;
  box-shadow: none;
  color: #f5f7ff;
  padding-block: calc(var(--tps-pad) * 2.2);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(156, 66, 152, 0.30), transparent 65%),
    radial-gradient(1000px 700px at 110% 10%, rgba(111, 66, 193, 0.25), transparent 60%),
    linear-gradient(135deg, #1b1030 0%, #291647 60%, #321b57 100%);
}

.tps-section.tps-section--bleed-gradient::before{
  box-shadow: none;
}

.tps-section.tps-section--bleed-gradient .tps-sec .sec-title,
.tps-section.tps-section--bleed-gradient .tps-sec .sec-subtitle,
.tps-section.tps-section--bleed-gradient .sec-subhead{
  color: #fff;
}

.tps-section.tps-section--bleed-gradient .tps-sec .sec-subtitle{
  color: rgba(255, 255, 255, 0.92);
}

.tps-section.tps-section--bleed-gradient .tps-sec .sec-eyebrow{
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.tps-section.tps-section--bleed-gradient.tps-with-art{
  background-image:
    url("assets/img/site/images/bg-block-1-left.png"),
    url("assets/img/site/images/bg-block-1-right.png"),
    radial-gradient(1200px 600px at 15% -10%, rgba(156, 66, 152, 0.30), transparent 65%),
    radial-gradient(1000px 700px at 110% 10%, rgba(111, 66, 193, 0.25), transparent 60%),
    linear-gradient(135deg, #1b1030 0%, #291647 60%, #321b57 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto 100%, auto 100%, auto, auto, cover;
  background-position: left 0 top 0, right 0 bottom 0, center, center, center;
}

.tps-section.tps-section--frameless{
  box-shadow: none;
  background: var(--tps-bg);
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.tps-section.tps-section--frameless::before{
  box-shadow: none;
}

.tps-section.tps-section--merge{
  padding: 0;
}

.tps-section.tps-section--merge::before{
  box-shadow: inset 0 0 0 1px var(--tps-border);
  z-index: 2;
}

.tps-section .tps-part{
  position: relative;
  z-index: 1;
  padding: var(--tps-pad);
  background: #fff;
}

.tps-section .tps-part--wash{
  background: color-mix(in oklab, var(--tps-accent) 7%, white);
}

.tps-section .tps-part::before{
  content: none;
}

.tps-section-split-wrap{
  padding-block: 32px;
  background: linear-gradient(
    170deg,
    #f5f4ff 0%,
    color-mix(in srgb, #f5f4ff, var(--tps-accent) 5%) 100%
  );
}

.tps-section.tps-section--split{
  margin-block: 0;
  padding: 0;
  border-radius: var(--tps-radius-lg);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--tps-accent), transparent 92%);
  background: var(--tps-bg);
}

.tps-section.tps-section--split::before{
  box-shadow: none;
}

.tps-section.tps-section--split .tps-split{
  margin: 0;
  min-height: 100%;
}

.tps-section.tps-section--split .tps-split > [class*="col-"]{
  display: flex;
}

.tps-section.tps-section--split .tps-split-main,
.tps-section.tps-section--split .tps-split-side{
  flex: 1 1 auto;
}

.tps-section.tps-section--split .tps-split-main{
  padding: var(--tps-pad);
}

.tps-section.tps-section--split .tps-split-side{
  padding: var(--tps-pad);
}

.tps-section.tps-section--split .tps-split-side--accent{
  background: var(--tps-accent);
  color: #fff;
}

.tps-section.tps-section--split .tps-split-side--accent .sec-subtitle{
  color: rgba(255, 255, 255, 0.92);
}

.tps-section .tps-sec{
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-width: 0;
  margin-bottom: 18px;
}

.tps-section .tps-sec--row{
  align-items: flex-start;
}

.tps-section .tps-sec--center{
  text-align: center;
  align-items: center;
}

.tps-section .tps-sec--center .sec-title,
.tps-section .tps-sec--center .sec-subtitle,
.tps-section .tps-sec--center .sec-eyebrow{
  align-self: center;
}

.tps-section .tps-sec--center .sec-title::before{
  display: none;
}

.tps-section .tps-sec--center .sec-with-rect--firstline{
  padding-left: 0;
}

.tps-section .tps-sec--center .sec-with-rect--firstline .sec-rect{
  display: none;
}

.tps-section .sec-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(111, 66, 193, 0.08);
  color: var(--tps-accent);
  font-weight: 600;
  margin: 0;
  width: auto;
  max-width: fit-content;
  flex: 0 0 auto;
  align-self: flex-start;
}

.tps-section .sec-eyebrow + .sec-subhead{
  margin-top: 0;
}

.tps-section .tps-pin{
  position: absolute;
  top: var(--tps-pad);
  right: var(--tps-pad);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  flex-wrap: wrap;
}

.tps-section .tps-pin .sec-eyebrow{
  margin: 0;
}

.tps-section .tps-sec > .tps-pin{
  top: 0;
  right: 0;
}

.tps-section .sec-title{
  --lh: 1.2;
  display: block;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: var(--lh);
  font-weight: 700;
  color: var(--tps-text);
  position: relative;
  z-index: 1;
  margin: 0;
}

.tps-section .tps-mark--secondary{
  color: var(--tps-secondary);
}

.tps-section .tps-sec--lined.is-left .sec-title::before{
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--tps-pad) - var(--peek));
  width: 12px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
}

.tps-section .tps-sec--lined.is-left .sec-title.sec-with-rect--firstline::before{
  display: none;
}

.tps-section.tps-section--bleed-gradient .tps-sec--lined.is-left .sec-title::before{
  display: none;
}

.tps-section .tps-sec--lined.is-center .sec-title{
  padding-bottom: 14px;
}

.tps-section .tps-sec--lined.is-center .sec-title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tps-accent), var(--tps-accent-2));
}

.tps-section .sec-subtitle{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in oklab, var(--tps-text) 82%, white);
  margin: 0;
}

.tps-section.tps-section--frameless > .tps-sec.tps-sec--lined.is-left .sec-title::before{
  display: none;
}

.tps-section.tps-section--frameless > .tps-sec.tps-sec--lined.is-left .sec-title:not(.sec-with-rect--firstline){
  padding-bottom: 12px;
}

.tps-section.tps-section--frameless > .tps-sec.tps-sec--lined.is-left .sec-title:not(.sec-with-rect--firstline)::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tps-accent), var(--tps-accent-2));
}

.tps-section.tps-section--frameless > .tps-sec .sec-subhead--lined.is-left::before{
  display: none;
}

.tps-section .sec-subhead{
  --lh-sub: 1.25;
  display: block;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: var(--lh-sub);
  font-weight: 700;
  color: var(--tps-text);
  position: relative;
  margin: 0;
}

.tps-section .sec-subhead--lined.is-left::before{
  --h: 0.85em;
  content: "";
  position: absolute;
  top: calc(0.5em * var(--lh-sub));
  transform: translateY(-50%);
  left: calc(-1 * var(--tps-pad) - var(--peek));
  width: 11px;
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.10);
}

.tps-section .sec-subhead--lined.is-left.sec-with-rect--firstline::before{
  display: none;
}

.tps-section .sec-subhead.is-center{
  display: block;
  text-align: center;
  margin-top: 4px;
}

.tps-section.tps-section--gradient .sec-subhead--lined.is-left::before,
.tps-section.tps-section--bleed-gradient .sec-subhead--lined.is-left::before{
  display: none;
}

.tps-section .sec-rect{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.25), 0 0 0 4px rgba(111, 66, 193, 0.12);
  color: #fff;
  font-size: 18px;
  line-height: 0;
  padding: 8px;
  transition: all 0.25s ease-in-out;
}

.tps-section .sec-rect i{
  font-size: 18px;
  transition: all 0.25s ease-in-out;
}

.tps-section .sec-rect--sub{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(30, 10, 60, 0.22), 0 0 0 3px rgba(111, 66, 193, 0.10);
  color: #fff;
  font-size: 13px;
  line-height: 0;
  padding: 4px;
  transition: all 0.25s ease-in-out;
}

.tps-section .sec-rect--sub i{
  font-size: 13px;
  transition: all 0.25s ease-in-out;
}

.tps-section .sec-with-rect--firstline{
  position: relative;
  display: block;
  padding-left: 48px;
}

.tps-section .sec-with-rect--firstline .sec-rect{
  position: absolute;
  left: 0;
}

.tps-section .sec-subhead.sec-with-rect--firstline{
  position: relative;
  padding-left: 32px;
}

.tps-section .sec-subhead.sec-with-rect--firstline .sec-rect--sub{
  position: absolute;
  left: 0;
}

.tps-section .tps-btn{
  --btn-bg: linear-gradient(135deg, var(--tps-accent), var(--tps-accent-2));
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.25), 0 0 0 2px rgba(111, 66, 193, 0.12);
  transition:
    box-shadow 0.18s ease,
    transform 0.12s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  overflow: hidden;
}

.tps-section .tps-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.16), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.tps-section .tps-btn span,
.tps-section .tps-btn i{
  position: relative;
  z-index: 1;
}

.tps-section .tps-btn i{
  font-size: 1rem;
}

.tps-section .tps-btn:hover{
  box-shadow: 0 14px 32px rgba(30, 10, 60, 0.32), 0 0 0 4px rgba(129, 74, 210, 0.24);
  transform: translateY(-1px);
}

.tps-section .tps-btn:active{
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.28), 0 0 0 3px rgba(111, 66, 193, 0.22);
  transform: translateY(0);
}

.tps-section .tps-btn:hover::before{
  opacity: 1;
}

.tps-section .tps-btn:active::before{
  opacity: 0.55;
}

.tps-section .tps-btn--soft{
  --btn-bg: linear-gradient(
    135deg,
    var(--accent-color) 0%,
    color-mix(in srgb, var(--accent-color), #6c5ce7 50%) 100%
  );
  --btn-fg: #fff;
}

.tps-section .tps-btn--ghost{
  --btn-bg: rgba(111, 66, 193, 0.08);
  --btn-fg: var(--tps-accent);
  color: #fff;
}

.tps-section .tps-btn--ghost::before{
  opacity: 0.5;
}

.tps-section .tps-btn--white{
  --btn-bg: #fff;
  --btn-fg: var(--tps-accent);
}

.tps-section .tps-btn--white::before{
  opacity: 0.6;
}

.tps-section .tps-btn--link{
  --btn-bg: transparent;
  --btn-fg: var(--tps-accent);
  box-shadow: none;
  padding-inline: 0;
}

.tps-section .tps-btn--link::before{
  display: none;
}

.tps-section .tps-btn--link:hover{
  box-shadow: none;
  text-decoration: underline;
  transform: none;
}

.tps-section .tps-btn--link:active{
  box-shadow: none;
  transform: none;
}

.tps-section .tps-gap{
  display: grid;
  gap: 16px;
}

.tps-section .tps-stack{
  display: grid;
  gap: var(--stack-gap, 14px);
}

.tps-section .tps-stack--lg{
  --stack-gap: 20px;
}

.tps-section .tps-stack--sm{
  --stack-gap: 10px;
}

.tps-section .tps-stack--xs{
  --stack-gap: 7px;
}

.tps-section .tps-stack--center{
  justify-items: center;
}

.tps-section .tps-quote{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  box-shadow: inset 0 0 0 1px var(--tps-border-soft);
  font-size: 14px;
  color: var(--tps-text-soft);
}

.tps-section .tps-quote i{
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--tps-accent);
}

.tps-section .tps-inset-frameless{
  padding: 0 var(--tps-pad) var(--tps-pad);
}

.tps-section .tps-page-head{
  position: relative;
  margin: 0;
}

.tps-section .tps-page-head .eyebrow{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(111, 66, 193, 0.08);
  color: var(--tps-accent);
  font-weight: 600;
}

.tps-section .tps-page-head .title-h1{
  --lh: 1.15;
  font-size: clamp(28px, 4vw, 40px);
  line-height: var(--lh);
  font-weight: 800;
  color: #101014;
  margin: 0 0 12px 0;
  position: relative;
}

.tps-section .tps-page-head.is-left .title-h1{
  padding-left: 32px;
}

.tps-section .tps-page-head.is-left .title-h1::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-accent-2));
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
}

@media (min-width: 992px){
  .tps-section .tps-page-head .title-h1,
  .tps-section .tps-page-head .h1-sub{
    max-width: 100%;
  }
}

@media (max-width: 991.98px){
  .tps-section .tps-page-head .title-h1,
  .tps-section .tps-page-head .h1-sub{
    max-width: 100%;
  }
}

.tps-section .h1-sub{
  position: relative;
  display: block;
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
  color: color-mix(in oklab, var(--tps-text) 80%, white);
}

.tps-section .h1-sub.is-underline{
  display: inline-block;
  padding-bottom: 10px;
}

.tps-section .h1-sub.is-underline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tps-accent), var(--tps-accent-2));
}

.tps-section.tps-cta{
  position: relative;
  isolation: isolate;
}

.tps-section.tps-cta .tps-cta-content{
  position: relative;
  z-index: 1;
}

.tps-section.tps-cta > *:not(.tps-cta-shapes){
  position: relative;
  z-index: 1;
}

.tps-section.tps-cta .tps-cta-shapes{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.tps-section.tps-cta .tps-cta-shapes .tps-cta-shape{
  position: absolute;
  border-radius: 50%;
}

.tps-section.tps-cta .tps-cta-shapes .tps-cta-shape.shape-1{
  width: 300px;
  height: 300px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tps-accent), transparent 85%) 0%,
    color-mix(in srgb, var(--tps-accent), transparent 95%) 100%
  );
  top: -150px;
  right: -100px;
}

.tps-section.tps-cta .tps-cta-shapes .tps-cta-shape.shape-2{
  width: 200px;
  height: 200px;
  background: linear-gradient(
    225deg,
    color-mix(in srgb, var(--tps-text), transparent 85%) 0%,
    color-mix(in srgb, var(--tps-text), transparent 95%) 100%
  );
  bottom: -100px;
  left: 20%;
}

.tps-section.tps-cta .tps-cta-shapes .tps-cta-shape.shape-3{
  width: 150px;
  height: 150px;
  background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--tps-accent), transparent 92%) 0%,
    color-mix(in srgb, var(--tps-text), transparent 92%) 100%
  );
  top: 30%;
  left: -75px;
}

.tps-section.tps-section--gradient.tps-cta .tps-cta-shapes .tps-cta-shape.shape-2{
  background: linear-gradient(
    225deg,
    color-mix(in srgb, var(--tps-accent), transparent 75%) 0%,
    color-mix(in srgb, var(--tps-accent), transparent 88%) 100%
  );
}

.tps-section.tps-section--gradient.tps-cta .tps-cta-shapes .tps-cta-shape.shape-3{
  background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--tps-accent), transparent 78%) 0%,
    color-mix(in srgb, var(--tps-accent), transparent 90%) 100%
  );
}

@media (max-width: 780px){
  .tps-section{
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tps-section > .tps-pin{
    position: static;
    order: 2;
    align-self: flex-start;
    margin-top: var(--pin-gap-mobile) !important;
    margin-bottom: var(--pin-gap-mobile) !important;
  }

  .tps-section > :not(header):not(.tps-pin):not(.tps-section){
    order: 3;
  }

  .tps-section .tps-sec > .tps-pin{
    position: static;
    order: 2;
    align-self: flex-start;
    margin-top: var(--pin-gap-mobile) !important;
    margin-bottom: var(--pin-gap-mobile) !important;
  }

  .tps-section .tps-sec > :not(.tps-pin){
    order: 1;
  }

  .tps-section.tps-section--bleed-gradient{
    padding-block: calc(var(--tps-pad) * 2.2);
  }
}

.tps-section .tps-sec > *{
  min-width: 0;
}

.tps-section .sec-title,
.tps-section .sec-subhead,
.tps-section .sec-subtitle{
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 1200px){
  .tps-section .sec-rect{
    width: 34px;
    height: 34px;
    padding: 7px;
  }

  .tps-section .sec-rect i{
    font-size: 17px;
  }

  .tps-section .sec-rect--sub{
    width: 21px;
    height: 21px;
    padding: 3.5px;
  }

  .tps-section .sec-rect--sub i{
    font-size: 12.5px;
  }
}

@media (max-width: 992px){
  .tps-section .sec-rect{
    width: 32px;
    height: 32px;
    padding: 6px;
  }

  .tps-section .sec-rect i{
    font-size: 16px;
  }

  .tps-section .sec-rect--sub{
    width: 20px;
    height: 20px;
    padding: 3px;
  }

  .tps-section .sec-rect--sub i{
    font-size: 12px;
  }
}

@media (max-width: 768px){
  .tps-section .sec-rect{
    width: 30px;
    height: 30px;
    padding: 5px;
  }

  .tps-section .sec-rect i{
    font-size: 15px;
  }

  .tps-section .sec-rect--sub{
    width: 19px;
    height: 19px;
    padding: 2.5px;
  }

  .tps-section .sec-rect--sub i{
    font-size: 11.5px;
  }
}

@media (max-width: 576px){
  .tps-section .sec-rect{
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .tps-section .sec-rect i{
    font-size: 14px;
  }

  .tps-section .sec-rect--sub{
    width: 18px;
    height: 18px;
    padding: 2px;
  }

  .tps-section .sec-rect--sub i{
    font-size: 11px;
  }
}

@media (max-width: 420px){
  .tps-section .sec-rect{
    width: 26px;
    height: 26px;
    padding: 3px;
  }

  .tps-section .sec-rect i{
    font-size: 13px;
  }

  .tps-section .sec-rect--sub{
    width: 17px;
    height: 17px;
    padding: 1.8px;
  }

  .tps-section .sec-rect--sub i{
    font-size: 10.5px;
  }
}

/* ========================================================================== */
/* /tps-section                                                                */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: xsec — modular section elements inside .tps-section */
/* ========================================================================== */

.tps-section .xsec-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:500;
  text-decoration:none;
  color:var(--tps-accent);
  padding:.2rem 0;
  font-size:.85em;
}

.tps-section .xsec-link i{
  font-size:.85em;
  transition:transform .18s ease;
}

.tps-section .xsec-link:hover i{
  transform:translateX(3px);
}

.tps-section .xsec-split{
  display:block;
}

.tps-section .xsec-split .xsec-split-main{
  min-width:0;
}

.tps-section .xsec-split .xsec-split-side{
  min-width:0;
}

.tps-section .xsec-media{
  position:relative;
  border-radius:16px;
  min-height:220px;
}

.tps-section .xsec-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tps-section .xsec-media-badge{
  position:absolute;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(16,18,28,.88);
  color:#fff;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.tps-section .xsec-media-badge i{
  font-size:14px;
}

.tps-section .xsec-stats{
  display:block;
}

.tps-section .xsec-stat{
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
  display:grid;
  gap:4px;
  align-content:start;
}

.tps-section .xsec-stat-v{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
  line-height:1;
  color:var(--tps-text);
}

.tps-section .xsec-stat-k{
  font-size:12px;
  font-weight:700;
  color:var(--tps-muted);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tps-section .tps-muted{
  font-size:12px;
  font-weight:500;
  color:var(--tps-muted);
}

.tps-section .xsec-feature-grid{
  display:block;
}

.tps-section .xsec-feature{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 12px 28px rgba(2,6,23,.05);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  color:inherit;
  text-decoration:none;
}

.tps-section .xsec-feature:hover{
  transform:translateY(-2px);
  background:color-mix(in oklab, var(--tps-primary) 4%, white);
  box-shadow:inset 0 0 0 1px var(--tps-border-3), 0 18px 36px rgba(2,6,23,.08);
}

.tps-section .xsec-feature-ic{
  width:46px;
  height:46px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--tps-primary) 10%, white);
  color:var(--tps-accent);
  font-size:22px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-feature-ttl{
  font-weight:600;
  font-size:1rem;
  line-height:1.25;
}

.tps-section .xsec-feature-txt{
  font-size:.8rem;
  color:var(--tps-text-soft);
  line-height:1.1;
}

.tps-section .xsec-feature-ft{
  margin-top:auto;
  padding-top:6px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.tps-section .xsec-side-stack{
  display:grid;
  gap:12px;
}

.tps-section .xsec-side-card{
  background:#fff;
  border-radius:10px;
  padding:14px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 12px 26px rgba(2,6,23,.05);
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:start;
  grid-template-areas:
    "ic ey btn"
    "ic ttl btn"
    "ic txt txt";
}

.tps-section .xsec-side-ic{
  grid-area:ic;
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--tps-primary) 9%, white);
  color:var(--tps-accent);
  font-size:20px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-side-ey{
  grid-area:ey;
  justify-self:start;
}

.tps-section .xsec-side-ttl{
  grid-area:ttl;
  font-size:.95rem;
  font-weight:600;
  margin:0;
  line-height:1.25;
}

.tps-section .xsec-side-txt{
  grid-area:txt;
  font-size:.8rem;
  color:var(--tps-text-soft);
  line-height:1.1;
  margin:0;
}

.tps-section .xsec-side-btn{
  grid-area:btn;
  justify-self:end;
  align-self:start;
}

.tps-section .xsec-check-cols{
  display:block;
}

.tps-section .xsec-check{
  background:
    radial-gradient(520px 180px at 0 0, rgba(124,58,237,.08), transparent 70%),
    radial-gradient(520px 200px at 100% 100%, rgba(156,66,152,.06), transparent 72%),
    #fff;
  border-radius:9px;
  padding:14px 16px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
  display:grid;
  gap:8px;
  align-content:start;
  margin:0;
  list-style:none;
}

.tps-section .xsec-check li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:8px 8px;
  border-radius:10px;
  background:rgba(124,58,237,.045);
  font-weight:500;
  color:var(--tps-text-soft);
  font-size:.85rem;
  line-height:1.15;
}

.tps-section .xsec-check li i{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  color:#fff;
  font-size:13px;
  line-height:0;
  box-shadow:0 6px 14px rgba(30,10,60,.20), 0 0 0 3px rgba(111,66,193,.10);
  margin-top:1px;
}

.tps-section .xsec-check--noborder{
  background:transparent;
  box-shadow:none;
  padding:0;
  gap:6px;
  border-radius:0;
}

.tps-section .xsec-check--noborder li{
  background:transparent;
  padding:6px 0;
  border-radius:0;
}

.tps-section .xsec-steps{
  display:grid;
  gap:10px;
}

.tps-section .xsec-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:flex-start;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.tps-section .xsec-step + .xsec-step{
  padding-top:10px;
  border-top:1px dashed var(--tps-border-2);
}

.tps-section .xsec-step-n{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  color:#fff;
  font-weight:500;
  box-shadow:0 10px 24px rgba(30,10,60,.22), 0 0 0 4px var(--tps-ring);
}

.tps-section .xsec-step-ttl{
  font-size:.9rem;
  font-weight:500;
  margin-bottom:3px;
}

.tps-section .xsec-step-txt{
  color:var(--tps-text-soft);
  line-height:1.1;
  font-size:.8rem;
}

.tps-section .xsec-quote{
  position:relative;
  border-radius:9px;
  padding:14px 14px 14px 52px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 14px 34px rgba(2,6,23,.06);
  display:grid;
  gap:6px;
  align-content:start;
  overflow:hidden;
}

.tps-section .xsec-quote:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  border-radius:16px 0 0 16px;
}

.tps-section .xsec-quote-qi{
  position:absolute;
  left:14px;
  top:14px;
  width:28px;
  height:28px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--tps-primary) 12%, white);
  color:var(--tps-accent);
  font-size:16px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-quote-qt{
  font-weight:500;
  font-size:.9rem;
}

.tps-section .xsec-quote-qb{
  color:var(--tps-text-soft);
  line-height:1.1;
  font-size:.8rem;
}

.tps-section .xsec-hero{
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 18px 44px rgba(2,6,23,.06);
  display:grid;
  gap:12px;
}

.tps-section .xsec-hero-ey{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--tps-accent);
  background:rgba(111,66,193,.08);
  padding:6px 10px;
  border-radius:999px;
}

.tps-section .xsec-hero-ttl{
  font-size:clamp(20px,2.5vw,26px);
  font-weight:700;
  line-height:1.2;
  margin:0;
}

.tps-section .xsec-hero-txt{
  color:var(--tps-text-soft);
  line-height:1.65;
  font-size:1rem;
}

.tps-section .xsec-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tps-section .xsec-icon-row{
  display:block;
}

.tps-section .xsec-icon-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  padding:10px 12px;
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-icon-mini{
  width:22px;
  height:22px;
  border-radius:6px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  color:#fff;
  font-size:12px;
  line-height:0;
  box-shadow:0 6px 14px rgba(30,10,60,.20), 0 0 0 3px rgba(111,66,193,.10);
}

.tps-section .xsec-icon-item b{
  font-weight:700;
}

.tps-section .xsec-icon-txt{
  font-size:.8rem;
  color:var(--tps-text-soft);
}

.tps-section .xsec-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tps-section .xsec-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 9px;
  border-radius:999px;
  background:#fff;
  font-weight:400;
  font-size:11px;
  letter-spacing:.02em;
  color:var(--tps-text);
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-tab--active{
  background:color-mix(in oklab, var(--tps-primary) 10%, white);
  color:var(--tps-accent);
  box-shadow:inset 0 0 0 1px var(--tps-border-3);
}

.tps-section .xsec-panel{
  background:#fff;
  color:var(--tps-text);
  border-radius:18px;
  padding:18px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 18px 44px rgba(2,6,23,.06);
  display:grid;
  gap:14px;
  align-content:start;
  min-height:100%;
}

.tps-section .xsec-panel-ttl{
  font-size:clamp(18px,2.1vw,22px);
  font-weight:700;
  line-height:1.25;
  margin:0;
}

.tps-section .xsec-panel-txt{
  color:var(--tps-text-soft);
  line-height:1.6;
  font-size:.98rem;
  margin:0;
}

.tps-section .xsec-panel-grid{
  display:block;
}

.tps-section .xsec-panel-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  padding:12px;
  border-radius:14px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-panel-ic{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--tps-primary) 9%, white);
  color:var(--tps-accent);
  font-size:18px;
}

.tps-section .xsec-panel-k{
  font-weight:700;
}

.tps-section .xsec-panel-v{
  font-size:.93rem;
  color:var(--tps-text-soft);
  line-height:1.55;
}

.tps-section .xsec-panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

.tps-section .xsec-service-grid{
  display:block;
}

.tps-section .xsec-service{
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 18px 44px rgba(2,6,23,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.tps-section .xsec-service:hover{
  transform:translateY(-2px);
  background:color-mix(in oklab, var(--tps-primary) 3%, white);
  box-shadow:inset 0 0 0 1px var(--tps-border-3), 0 22px 52px rgba(2,6,23,.09);
}

.tps-section .xsec-service-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
}

.tps-section .xsec-service-ic{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--tps-primary) 10%, white);
  color:var(--tps-accent);
  font-size:22px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
}

.tps-section .xsec-service-ttl{
  font-weight:700;
  font-size:1.08rem;
  line-height:1.25;
  margin:0;
}

.tps-section .xsec-service-txt{
  color:var(--tps-text-soft);
  line-height:1.6;
  font-size:.95rem;
  margin:0;
}

.tps-section .xsec-service-list{
  display:grid;
  gap:8px;
  margin:0;
  padding-left:0;
  list-style:none;
}

.tps-section .xsec-service-list li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:.95rem;
  color:var(--tps-text-soft);
  line-height:1.55;
}

.tps-section .xsec-service-list li i{
  color:var(--tps-success);
  font-size:1.05rem;
  line-height:1;
  margin-top:2px;
}

.tps-section .xsec-service .xsec-link{
  margin-top:auto;
  align-self:flex-start;
}

.tps-section .xsec-band{
  --band-bg: linear-gradient(170deg,
    color-mix(in oklab, var(--tps-primary) 88%, black) 0%,
    color-mix(in oklab, var(--tps-primary) 70%, black) 100%);
  position:relative;
  border-radius:9px;
  overflow:hidden;
  padding:22px calc(var(--tps-pad));
  background:var(--band-bg);
  color:#f6f7ff;
  box-shadow:0 22px 60px color-mix(in srgb, var(--tps-primary), transparent 82%);
  display:grid;
  gap:10px;
}

.tps-section .xsec-band-ey{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  background:rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
}

.tps-section .xsec-band-ttl{
  font-size:clamp(20px,3vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0;
  color:#fff;
}

.tps-section .xsec-band-txt{
  margin:0;
  color:rgba(246,247,255,.9);
  line-height:1.4;
  font-size:.85rem;
  max-width:72ch;
}

.tps-section .xsec-band-row{
  display:block;
}

.tps-section .xsec-band-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tps-section .xsec-metrics{
  display:block;
}

.tps-section .xsec-metric{
  padding:10px 2px;
  display:grid;
  gap:4px;
  align-content:start;
}

.tps-section .xsec-metric-v{
  font-size:clamp(26px,3.6vw,38px);
  font-weight:800;
  line-height:1;
  color:var(--tps-accent);
}

.tps-section .xsec-metric-k{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tps-muted);
}

.tps-section .xsec-collage{
  position:relative;
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  align-items:start;
}

@media(min-width:576px){
  .tps-section .xsec-collage{
    grid-template-columns:1.2fr .8fr;
  }
}

.tps-section .xsec-shot{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 16px 40px rgba(2,6,23,.06);
  min-height:180px;
}

.tps-section .xsec-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tps-section .xsec-shot--small{
  min-height:140px;
}

@media(min-width:576px){
  .tps-section .xsec-shot--small{
    position:relative;
    transform:translateY(22px);
  }
}

.tps-section .xsec-float-badge{
  position:absolute;
  right:10px;
  top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:14px;
  background:rgba(16,18,28,.9);
  color:#fff;
  font-weight:800;
  font-size:12px;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.tps-section .xsec-subgrid{
  display:block;
}

.tps-section .xsec-subcard{
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:inset 0 0 0 1px var(--tps-border-2), 0 14px 34px rgba(2,6,23,.06);
  display:grid;
  gap:10px;
  align-content:start;
  min-height:100%;
}

.tps-section .xsec-subcard--bare{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

.tps-section .xsec-subcard-ttl{
  font-weight:700;
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
}

.tps-section .xsec-subcard-txt{
  color:var(--tps-text-soft);
  line-height:1.6;
  font-size:.95rem;
  margin:0;
}

.tps-section .xsec-hr{
  height:1px;
  border:0;
  margin:10px 0;
  background:linear-gradient(90deg, transparent, var(--tps-border-2), transparent);
}

.tps-section .xsec-faq{
  display:grid;
  gap:10px;
}

.tps-section .xsec-faq-item{
  padding:12px 12px;
  border-radius:10px;
  background:
    radial-gradient(420px 140px at 0 0, rgba(124,58,237,.06), transparent 70%),
    #fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
  display:grid;
  gap:8px;
}

.tps-section .xsec-faq-ttl{
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding-bottom:8px;
  border-bottom:1px dashed var(--tps-border-2);
  font-size:.9rem;
}

.tps-section .xsec-faq-ttl i{
  width:22px;
  height:22px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:rgba(124,58,237,.10);
  color:var(--tps-accent);
  font-size:13px;
}

.tps-section .xsec-faq-txt{
  font-size:.8rem;
  color:var(--tps-text-soft);
  line-height:1.6;
  margin:0;
  padding-left:30px;
}

.tps-section .xsec-pic{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
  min-height:240px;
  height:100%;
}

.tps-section .xsec-pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.xsec-gap{
  display:grid;
  gap:16px;
}

.xsec-stack{
  display:grid;
  gap:var(--stack-gap,14px);
}

.xsec-stack--lg{
  --stack-gap:20px;
}

.xsec-stack--xl{
  --stack-gap:28px;
}

.xsec-stack--center{
  justify-items:center;
}

.xsec-subsec{
  position:relative;
  border-radius:8px;
  padding:19px 19px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--tps-border-2);
  display:grid;
  gap:10px;
  align-content:start;
}

.tps-section .xsec-subhead{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:17px;
  line-height:1.25;
  margin:0 0 10px 0;
  padding:0;
  color:var(--tps-text);
  position:relative;
}

.tps-section .xsec-subhead-mini{
  width:22px;
  height:22px;
  border-radius:6px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  color:#fff;
  font-size:12px;
  line-height:0;
  box-shadow:0 6px 14px rgba(30,10,60,.20), 0 0 0 3px rgba(111,66,193,.10);
}

.tps-section .xsec-subhead--lined{
  padding-left:18px;
  gap:8px;
}

.tps-section .xsec-subhead--lined::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--tps-accent),var(--tps-grape));
  box-shadow:0 0 0 2px rgba(111,66,193,.10);
}

.tps-section .xsec-subhead--badge{
  flex-wrap:wrap;
}

.tps-section .xsec-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  color:var(--tps-accent);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.tps-section .xsec-subhead--tag{
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.tps-section .xsec-tag{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  color:var(--tps-success);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.xsec-subsec-txt{
  color:var(--tps-text-soft);
  font-size:14px;
  line-height:1.55;
}

.xsec-media-row{
  display:block;
}

.xsec-media-side{
  display:grid;
  gap:12px;
}

.xsec-faq{
  display:grid;
  gap:10px;
}

.xsec-steps{
  display:grid;
  gap:10px;
}

/* ========================================================================== */
/* END BLOCK: xsec                                                            */
/* ========================================================================== */


/* ========================================================================== */
/* tps-switch-glass — Glass toggle / segmented switch UI                        */
/* ========================================================================== */

.tps-switch-glass{
  margin-block-end: 0.3rem;
}

.tps-switch-glass .glass-row{
  position: relative;
  border: 1px dashed var(--tps-border-2);
  border-radius: 0.4rem;
  padding: 0.25rem;
  overflow: hidden;
}

.tps-switch-glass .glass-row + .glass-row{
  margin-block-start: var(--tps-space-xs-10);
}

.tps-switch-glass .gopt{
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: var(--tps-r-xs-4);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.tps-switch-glass .gopt.active{
  color: var(--c01);
}

.tps-switch-glass .g-ind{
  position: absolute;
  z-index: 1;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 140px;
  border-radius: var(--tps-r-xs-4);
  background: linear-gradient(135deg, var(--tps-accent), var(--tps-accent-2));
  box-shadow: 0 10px 22px color-mix(in oklab, var(--tps-accent) 35%, transparent);
  transition: all 0.25s ease;
}

.tps-switch-glass .glass-head{
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 4px 3px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  color: var(--tps-muted);
}

.tps-switch-glass .glass-head .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tps-accent-2);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--tps-accent-2) 22%, transparent);
}

.tps-switch-glass .gopt:hover{
  text-decoration: none;
}

.tps-switch-glass .glass-row + .glass-row .gopt{
  padding: 0.35rem 0.75rem;
  font-size: 0.92rem;
  border-radius: var(--tps-r-xs-3);
}

.tps-switch-glass .glass-row + .glass-row .g-ind{
  top: 8px;
  bottom: 8px;
  border-radius: var(--tps-r-xs-3);
}

/* ========================================================================== */
/* /tps-switch-glass                                                            */
/* ========================================================================== */

/* ========================================================================== */
/* nav-pills — Bootstrap pills styling overrides                               */
/* ========================================================================== */

.nav-pills .nav-link{
  font-size: 0.85rem;
  padding: 7px 15px;
}

.nav-pills .nav-link:not(.active):not(.show){
  font-weight: 500;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tps-accent);
  border-radius: var(--bs-nav-pills-border-radius);
  border: 1px solid var(--tps-border);
}

.nav-pills .nav-link:not(.active):not(.show):hover{
  border: 1px solid var(--tps-border);
}

.nav-pills .nav-link.active{
  background: linear-gradient(135deg, var(--tps-accent), var(--tps-accent-2));
  border-radius: var(--bs-nav-pills-border-radius);
  border: 1px solid var(--tps-border);
}

/* ========================================================================== */
/* /nav-pills                                                                  */
/* ========================================================================== */

/* ========================================================================== */
/* tps-btn-tile — Tile button component (sizes, variants, disabled states)     */
/* ========================================================================== */

.tps-btn-tile{
  --tps-btn-py: 10px;
  --tps-btn-px: 16px;
  --tps-btn-fs: 0.95rem;
  --tps-btn-r: 12px;
  --tps-btn-h: 46px;
  --tps-ind-size: 26px;
  --tps-ind-r: 5px;
  --tps-ind-p: 3px;
  --tps-ind-icon-fs: 1.05rem;
  --tps-chip-fs: 11.5px;
  --tps-chip-py: 1px;
  --tps-chip-px: 6px;
  --tps-chip-r: 4px;

  width: 100%;
  box-sizing: border-box;
  height: var(--tps-btn-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tps-space-sm-8);
  padding: var(--tps-btn-py) var(--tps-btn-px);
  font-size: var(--tps-btn-fs);
  line-height: 1.2;
  font-weight: 500;
  border-radius: var(--tps-btn-r);
  border: 0;
  text-decoration: none;
  box-shadow: 0 6px 16px var(--tps-shadow-1, rgba(0, 0, 0, 0.06));
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.12s ease,
    filter 0.12s ease,
    background-position 0.6s ease,
    box-shadow 0.25s ease;
}

.tps-btn-tile:active{
  transform: scale(0.985, 0.992);
  transform-origin: center;
  filter: brightness(0.96);
}

.tps-btn-tile:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--tps-accent) 55%, var(--c01));
  outline-offset: 2px;
}

.tps-btn-tile .tps-btn-left{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tps-btn-tile .tps-btn-ind{
  width: var(--tps-ind-size);
  height: var(--tps-ind-size);
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tps-ind-r);
  flex: 0 0 var(--tps-ind-size);
  padding: var(--tps-ind-p);
  box-sizing: border-box;
  line-height: 1;
}

.tps-btn-tile .tps-btn-ind > .bi{
  font-size: var(--tps-ind-icon-fs);
  line-height: 1;
  display: block;
}

.tps-btn-tile .tps-chip-mini{
  font-size: var(--tps-chip-fs);
  padding: var(--tps-chip-py) var(--tps-chip-px);
  border-radius: var(--tps-chip-r);
  border: 1px solid var(--tps-border, #e7e7ef);
  color: var(--tps-accent);
  background: var(--c01);
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.tps-btn-tile.tps-btn--solid{
  background: linear-gradient(
    135deg,
    var(--tps-accent),
    var(--tps-accent-2),
    var(--tps-grape)
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--c01);
  box-shadow: 0 10px 22px color-mix(in oklab, var(--tps-accent-2) 40%, transparent);
}

.tps-btn-tile.tps-btn--solid .tps-btn-text,
.tps-btn-tile.tps-btn--solid .tps-btn-ind{
  color: var(--c01);
}

.tps-btn-tile.tps-btn--solid .tps-btn-ind{
  background: rgba(255, 255, 255, 0.22);
}

.tps-btn-tile.tps-btn--solid:hover{
  background-position: 100% 50%;
  box-shadow: 0 10px 22px color-mix(in oklab, var(--tps-grape) 40%, transparent);
  color: var(--c01);
}

.tps-btn-tile.tps-btn--solid:hover .tps-btn-text,
.tps-btn-tile.tps-btn--solid:hover .tps-btn-ind{
  color: var(--c01);
}

.tps-btn-tile.tps-btn--ghost{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--tps-accent) 1%, var(--c01)),
    color-mix(in oklab, var(--tps-accent-2) 4%, var(--c01)),
    color-mix(in oklab, var(--tps-accent) 22%, var(--c01))
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--tps-accent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--tps-accent) 30%, var(--tps-border, #e7e7ef)) inset,
    0 6px 16px var(--tps-shadow-1, rgba(0, 0, 0, 0.06));
}

.tps-btn-tile.tps-btn--ghost .tps-btn-text{
  color: var(--tps-accent);
}

.tps-btn-tile.tps-btn--ghost .tps-btn-ind{
  background: color-mix(in oklab, var(--tps-accent) 12%, var(--c01));
  color: var(--tps-accent);
}

.tps-btn-tile.tps-btn--ghost:hover{
  background-position: 100% 50%;
}

.tps-btn-tile.tps-btn--ghost:hover .tps-btn-text,
.tps-btn-tile.tps-btn--ghost:hover .tps-btn-ind{
  color: var(--tps-accent);
}

.tps-btn-tile.tps-btn--xs{
  --tps-btn-py: 4px;
  --tps-btn-px: 10px;
  --tps-btn-fs: 0.68rem;
  --tps-btn-r: 4px;
  --tps-ind-size: 18px;
  --tps-ind-r: 3px;
  --tps-ind-p: 1px;
  --tps-ind-icon-fs: 0.75rem;
  --tps-btn-h: 26px;
  --tps-chip-fs: 10px;
  --tps-chip-py: 0;
  --tps-chip-px: 5px;
}

.tps-btn-tile.tps-btn--sm{
  --tps-btn-py: 6px;
  --tps-btn-px: 12px;
  --tps-btn-fs: 0.84rem;
  --tps-btn-r: 5px;
  --tps-ind-size: 20px;
  --tps-ind-r: 4px;
  --tps-ind-p: 2px;
  --tps-ind-icon-fs: 0.85rem;
  --tps-btn-h: 32px;
  --tps-chip-fs: 10.5px;
  --tps-chip-py: 0;
  --tps-chip-px: 6px;
}

.tps-btn-tile.tps-btn--md{
  --tps-btn-py: 8px;
  --tps-btn-px: 14px;
  --tps-btn-fs: 0.9rem;
  --tps-btn-r: 5px;
  --tps-ind-size: 22px;
  --tps-ind-r: 5px;
  --tps-ind-p: 2px;
  --tps-ind-icon-fs: 0.95rem;
  --tps-btn-h: 38px;
  --tps-chip-fs: 11px;
  --tps-chip-py: 1px;
  --tps-chip-px: 6px;
}

.tps-btn-tile.tps-btn--lg{
  --tps-btn-py: 10px;
  --tps-btn-px: 16px;
  --tps-btn-fs: 0.98rem;
  --tps-btn-r: 9px;
  --tps-ind-size: 24px;
  --tps-ind-r: 6px;
  --tps-ind-p: 3px;
  --tps-ind-icon-fs: 1rem;
  --tps-btn-h: 44px;
  --tps-chip-fs: 11.5px;
  --tps-chip-py: 1px;
  --tps-chip-px: 7px;
}

.tps-btn-tile.tps-btn--xl{
  --tps-btn-py: 12px;
  --tps-btn-px: 18px;
  --tps-btn-fs: 1.02rem;
  --tps-btn-r: 10px;
  --tps-ind-size: 26px;
  --tps-ind-r: 7px;
  --tps-ind-p: 3px;
  --tps-ind-icon-fs: 1.05rem;
  --tps-btn-h: 50px;
  --tps-chip-fs: 12px;
  --tps-chip-py: 2px;
  --tps-chip-px: 8px;
}

.tps-btn-tile.tps-btn--xxl{
  --tps-btn-py: 14px;
  --tps-btn-px: 20px;
  --tps-btn-fs: 1.08rem;
  --tps-btn-r: 11px;
  --tps-ind-size: 28px;
  --tps-ind-r: 8px;
  --tps-ind-p: 4px;
  --tps-ind-icon-fs: 1.1rem;
  --tps-btn-h: 56px;
  --tps-chip-fs: 12.5px;
  --tps-chip-py: 2px;
  --tps-chip-px: 9px;
}

.tps-btn-tile:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]){
  pointer-events: none;
  cursor: default;
}

.tps-btn-tile:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]):hover,
.tps-btn-tile:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]):focus,
.tps-btn-tile:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]):focus-visible{
  background-position: 0% 50%;
  transform: none;
  filter: none;
  outline: none;
}

.tps-btn-tile.tps-btn--success{
  background: linear-gradient(
    135deg,
    #2f7b32,
    #3ea843,
    #6bcf6e
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(47, 123, 50, 0.4);
}

.tps-btn-tile.tps-btn--success .tps-btn-text,
.tps-btn-tile.tps-btn--success .tps-btn-ind{
  color: #ffffff;
}

.tps-btn-tile.tps-btn--success .tps-btn-ind{
  background: rgba(255, 255, 255, 0.22);
}

.tps-btn-tile.tps-btn--success:hover{
  background-position: 100% 50%;
  box-shadow: 0 10px 24px rgba(47, 123, 50, 0.55);
}

.tps-btn-tile.tps-btn--cart{
  background: linear-gradient(
    135deg,
    #1f7b32,
    #35b34a,
    #7ee37b
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(47, 123, 50, 0.4);
}

.tps-btn-tile.tps-btn--cart .tps-btn-text,
.tps-btn-tile.tps-btn--cart .tps-btn-ind{
  color: #ffffff;
}

.tps-btn-tile.tps-btn--cart .tps-btn-ind{
  background: rgba(255, 255, 255, 0.22);
}

.tps-btn-tile.tps-btn--cart .tps-chip-mini{
  color: #2f7b32;
  border-color: rgba(47, 123, 50, 0.18);
}

.tps-btn-tile.tps-btn--cart:hover{
  background-position: 100% 50%;
  box-shadow: 0 10px 24px rgba(47, 123, 50, 0.55);
  color: #ffffff;
}

.tps-btn-tile.tps-btn--cart:hover .tps-btn-text,
.tps-btn-tile.tps-btn--cart:hover .tps-btn-ind{
  color: #ffffff;
}

.tps-btn-tile.tps-btn--center{
  justify-content: center;
  text-align: center;
}

.tps-btn-tile.tps-btn--center .tps-btn-left{
  justify-content: center;
}

.tps-btn-tile.tps-btn--center .tps-chip-mini{
  margin-left: 0;
}

/* ========================================================================== */
/* /tps-btn-tile                                                               */
/* ========================================================================== */

/* ========================================================================== */
/* tps-card-block-item — Card list item / feature row card                      */
/* ========================================================================== */

.tps-card-block-item{
  padding-block-start: 0.55rem;
  padding-block-end: 0.55rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  border-radius: 0.5rem;
  margin-block-end: var(--tps-space-md-4);
  transition: all 0.5s ease;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 80%);
  background: linear-gradient(
    345deg,
    color-mix(in srgb, var(--tps-accent), transparent 92%),
    var(--surface-color)
  );
}

.tps-card-block-item .h6{
  font-family: var(--heading-font);
  font-weight: 900;
  letter-spacing: -0.015em;
  font-size: 1.1rem;
  background: linear-gradient(
    90deg,
    #3c156b 0%,
    var(--tps-accent) 40%,
    var(--tps-grape) 60%,
    #260e46 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(124, 58, 237, 0.10), 0 0 28px rgba(167, 139, 250, 0.08);
}

.tps-card-block-item-icon{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-inline-end: 1rem;
  display: grid;
  font-size: 1.3rem;
  place-items: center;
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  color: var(--accent-color);
}

.tps-card-block-item .item-corewrap .imgbox-element{
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-inline-end: 1rem;
  background: var(--c01);
  display: flex;
  border: 1px solid var(--tps-border);
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.tps-card-block-item .item-corewrap .imgbox-element img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tps-card-block-item .item-corewrap .imgbox-element:hover img{
  transform: scale(1.05);
}

.tps-card-block-alt-item{
  padding-block-start: 0.75rem;
  padding-block-end: 0.55rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  border-radius: 0.5rem;
  margin-block-end: var(--tps-space-md-4);
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.tps-card-block-alt-item .h6{
  font-family: var(--heading-font);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-size: 1.1rem;
  background: linear-gradient(
    90deg,
    #3c156b 0%,
    var(--tps-accent) 40%,
    var(--tps-grape) 60%,
    #260e46 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(124, 58, 237, 0.10), 0 0 28px rgba(167, 139, 250, 0.08);
}

.tps-card-block-alt-item .item-corewrap .imgbox-element{
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  border-radius: var(--tps-r-sm-3);
  overflow: hidden;
  margin-inline-end: var(--tps-space-md-4);
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.tps-card-block-alt-item .item-corewrap .imgbox-element img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tps-card-block-alt-item .item-corewrap .imgbox-element:hover img{
  transform: scale(1.05);
}

.tps-card-block-alt-item .item-corewrap .detail-viewblock{
  flex: 1;
}

/* ========================================================================== */
/* /tps-card-block-item                                                         */
/* ========================================================================== */

/* ========================================================================== */
/* tps-dl-meta — Download meta pills / badges row                               */
/* ========================================================================== */

.tps-dl-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tps-dl-meta .tps-pill{
  padding: 0.15rem 0.6rem;
  border: 1px dashed var(--tps-border-2);
  font-weight: 600;
  border-radius: 0.75rem;
  font-size: 0.72rem;
  background: #fff;
  color: var(--default-color);
}

.tps-dl-meta .tps-pill i{
  margin-inline-end: var(--tps-space-xs-2);
}

.tps-dl-meta .tps-gr{
  letter-spacing: 0.3px;
  color: var(--tps-accent);
  border-color: var(--tps-accent);
}

.tps-dl-meta .tps-tr{
  letter-spacing: 0.3px;
  color: var(--tps-accent);
  background: transparent;
  border-color: transparent;
  font-weight: 700;
}

.tps-dl-meta .tps-bg{
  color: #fff;
  letter-spacing: 0.3px;
  background: var(--tps-accent);
}

/* ========================================================================== */
/* /tps-dl-meta                                                                */
/* ========================================================================== */

/* ========================================================================== */
/* tps-apps-suite-mirrors — Mirrors table / download mirrors list              */
/* ========================================================================== */

.tps-apps-suite-mirrors{
  width: 100%;
  padding: 2px 5px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--tps-accent) 5%, var(--c01)),
    color-mix(in oklab, var(--tps-grape) 7%, var(--c01))
  );
  border-radius: 0.625rem;
}

.tps-apps-suite-mirrors .table{
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  overflow: hidden;
  background: transparent;
}

.tps-apps-suite-mirrors .table td{
  padding: 0.25rem 0;
  vertical-align: middle;
  border: 0;
  background: transparent;
}

.tps-apps-suite-mirrors .table tbody tr + tr{
  border-block-start: 1px solid var(--tps-border);
}

.tps-apps-suite-mirrors .cell{
  display: flex;
  align-items: center;
  gap: var(--tps-space-xs-2);
  font-size: 0.9rem;
  line-height: 1.3;
  background: transparent;
}

.tps-apps-suite-mirrors .loc{
  padding: 0.2rem 0.5rem;
  border-radius: var(--tps-r-sm-1);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tps-apps-suite-mirrors .desc{
  font-size: 0.7rem;
  color: var(--tps-muted);
  background: transparent;
}

.tps-apps-suite-mirrors .mirror-num{
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--tps-accent-2, #444);
  background: transparent;
}

.tps-apps-suite-mirrors .status{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--tps-muted);
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--tps-border-2);
  border-radius: var(--tps-r-xxl-4);
  background: transparent;
}

.tps-apps-suite-mirrors .dot{
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: var(--tps-success);
  position: relative;
}

.tps-apps-suite-mirrors .bi{
  font-size: 1rem;
  line-height: 1;
}

.tps-apps-suite-mirrors .table td:last-child .cell{
  justify-content: flex-end;
}

/* ========================================================================== */
/* /tps-apps-suite-mirrors                                                     */
/* ========================================================================== */

/* ========================================================================== */
/* tps-services-1 — Services cards / service-item component                     */
/* ========================================================================== */

.tps-services-1 .service-item{
  display: flex;
  background-color: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 92%);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    background 0.3s ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.tps-services-1 .service-item:hover{
  transform: translateY(-8px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 85%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.tps-services-1 .service-item:focus{
  outline: none;
}

.tps-services-1 .service-item:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  outline-offset: 3px;
  border-radius: 1rem;
}

.tps-services-1 .service-item .service-icon{
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  font-size: 2rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tps-services-1 .service-item:hover .service-icon{
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.tps-services-1 .service-item .service-icon.icon-bg .icon-bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translateZ(0);
}

.tps-services-1 .service-item .service-icon.icon-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-color);
  opacity: 0.08;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.tps-services-1 .service-item:hover .service-icon.icon-bg::after{
  opacity: 0.22;
}

.tps-services-1 .service-item .service-icon.img-icon img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  z-index: 1;
}

.tps-services-1 .service-item .service-content{
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}

.tps-services-1 .service-item .service-number{
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 4rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--heading-color), transparent 90%);
  line-height: 1;
  opacity: 0.5;
  z-index: 1;
}

.tps-services-1 .service-item .service-title{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
  position: relative;
  z-index: 2;
  transition: color 0.25s ease;
}

.tps-services-1 .service-item:hover .service-title{
  color: var(--accent-color);
}

.tps-services-1 .service-item .service-text{
  font-size: 0.8rem;
  line-height: 1rem;
  margin-block-end: 1.25rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  position: relative;
  z-index: 2;
}

.tps-services-1 .service-item .service-link{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 2;
  margin-block-start: auto;
  pointer-events: none;
}

.tps-services-1 .service-item:hover .service-link{
  color: var(--accent-color);
}

.tps-services-1 .service-item .service-link i{
  transition: transform 0.3s ease;
}

.tps-services-1 .service-item:hover .service-link i{
  transform: translateX(5px);
}

.tps-services-1 .service-item.theme-soft-panel{
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-color), transparent 95%),
    var(--surface-color)
  );
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent-color), transparent 88%);
}

.tps-services-1 .service-item.theme-soft-panel:hover{
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.tps-services-1 .service-item.theme-soft-panel .service-text{
  color: color-mix(in srgb, var(--default-color), transparent 12%);
}

.tps-services-1 .service-item.theme-purple{
  background: linear-gradient(135deg, var(--tps-accent, #7b61ff), var(--tps-grape, #a855f7));
  color: var(--contrast-color);
  box-shadow: 0 12px 34px color-mix(in srgb, #8b5cf6, transparent 60%);
  border: none;
}

.tps-services-1 .service-item.theme-purple .service-icon{
  background-color: color-mix(in srgb, #000, transparent 90%);
  color: var(--contrast-color);
}

.tps-services-1 .service-item.theme-purple:hover .service-icon{
  background-color: color-mix(in srgb, #000, transparent 80%);
}

.tps-services-1 .service-item.theme-purple .service-title{
  color: var(--contrast-color);
}

.tps-services-1 .service-item.theme-purple .service-text{
  color: color-mix(in srgb, var(--contrast-color), transparent 12%);
}

.tps-services-1 .service-item.theme-purple .service-link{
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
}

.tps-services-1 .service-item.theme-purple:hover .service-link{
  color: var(--contrast-color);
}

@media (max-width: 768px){
  .tps-services-1{
    padding: 60px 0;
  }

  .tps-services-1 .service-item{
    flex-direction: column;
  }

  .tps-services-1 .service-item .service-icon{
    flex: 0 0 auto;
    height: 80px;
    width: 100%;
  }
}

@media (max-width: 768px){
  .tps-services-1{
    padding: 0px 0;
  }

  .tps-services-1 .service-item{
    flex-direction: column;
  }

  .tps-services-1 .service-item .service-icon{
    flex: 0 0 auto;
    height: 80px;
    width: 100%;
  }
}

/* ========================================================================== */
/* /tps-services-1                                                             */
/* ========================================================================== */

/* ========================================================================== */
/* tps-feature-cards — Feature cards grid / card component                      */
/* ========================================================================== */

.tps-feature-cards .tps-feature-card{
  position: relative;
  height: 100%;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--tps-border);
  background: #ffffff;
  box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.04);
}

.tps-feature-cards .tps-feature-card-inner{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0.9rem 1.1rem 0.8rem;
}

.tps-feature-cards .tps-feature-card-top{
  display: flex;
  align-items: top;
  gap: 1rem;
  margin-bottom: 0.375rem;
}

.tps-feature-cards .tps-feature-card--simple .tps-feature-card-top{
  align-items: center;
}

.tps-feature-cards .tps-feature-card-square{
  flex: 0 0 2.875rem;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tps-accent);
  box-shadow: 0 0 0 0.1875rem rgba(111, 66, 193, 0.10);
}

.tps-feature-cards .tps-feature-card-square i{
  font-size: 1.375rem;
  color: #ffffff;
}

.tps-feature-cards .tps-feature-card-square--image{
  overflow: hidden;
  padding: 0;
}

.tps-feature-cards .tps-feature-card-square--image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #ffffff;
  border-radius: 0.45rem;
  padding: 0.25rem;
  box-sizing: border-box;
}

.tps-feature-cards .tps-feature-card-head{
  min-width: 0;
}

.tps-feature-cards .tps-feature-card-title{
  font-family: var(--font-heading, inherit);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.125rem;
}

.tps-feature-cards .tps-feature-card-subtitle{
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--tps-muted);
}

.tps-feature-cards .tps-feature-card-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 600;
  margin-top: 0.375rem;
  background: color-mix(in oklab, var(--tps-accent) 16%, var(--tps-bg));
  color: var(--tps-accent-2);
}

.tps-feature-cards .tps-feature-card-body{
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111827;
}

.tps-feature-cards .tps-feature-card-text{
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.1rem;
}

.tps-feature-cards .tps-feature-card-footer{
  margin-top: 0.625rem;
  padding-top: 0.375rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.tps-feature-cards .tps-alt-block-actions{
  width: 100%;
  border: 1px dashed var(--tps-border-2);
  border-radius: 0.5rem;
  padding: 0.25rem;
  overflow: hidden;
}

.tps-feature-cards .tps-feature-card-square{
  flex-basis: 2.625rem;
  width: 2.625rem;
  height: 2.625rem;
}

.tps-feature-cards .tps-feature-card-title{
  font-size: 0.96rem;
}

/* ========================================================================== */
/* /tps-feature-cards                                                           */
/* ========================================================================== */

/* ========================================================================== */
/* tps-delivery-widget — Delivery info widget / small meta lines               */
/* ========================================================================== */

.tps-delivery-widget{
  font-size: 0.7rem;
  color: #6c757d;
}

.tps-dw-border-bottom{
  border-block-end: 1px dashed var(--tps-border);
}

.tps-dw-row{
  display: flex;
  padding-block-start: 0.3rem;
}

.tps-dw-inner{
  width: 100%;
  padding-block-end: 0.3rem;
  margin-block-end: 0;
  line-height: 1.25;
}

.tps-dw-line{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tps-dw-label{
  color: #343a40;
}

.tps-dw-value{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tps-dw-icon-accent{
  color: #ed720e;
}

.tps-dw-positive{
  color: #37a967;
}

/* ========================================================================== */
/* /tps-delivery-widget                                                       */
/* ========================================================================== */

/* ========================================================================== */
/* tps-vmenu — Vertical menu / link list cards                                 */
/* ========================================================================== */

.tps-vmenu{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tps-vmenu .link-item{
  margin: 0;
  padding: 0;
}

.tps-vmenu .link{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--tps-border);
  background: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

.tps-vmenu .link:hover{
  border-color: var(--tps-border-2);
  background: color-mix(in oklab, var(--tps-bg) 68%, white);
  box-shadow: 0 0 0 1px var(--tps-ring), 0 10px 25px rgba(15, 23, 42, 0.11);
  transform: translateY(-1px);
}

.tps-vmenu .link:hover .title{
  color: var(--tps-accent-2);
}

.tps-vmenu .link:active{
  transform: translateY(0);
  box-shadow: 0 0 0 1px var(--tps-ring), 0 4px 12px rgba(15, 23, 42, 0.18);
}

.tps-vmenu .icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--tps-border-3);
  background: radial-gradient(
    circle at 0 0,
    color-mix(in oklab, var(--tps-primary) 11%, white),
    #ffffff
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tps-vmenu .icon i{
  font-size: 1.2rem;
  color: var(--tps-accent-2);
}

.tps-vmenu .thumb{
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--tps-border-3);
  overflow: hidden;
  background: var(--tps-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 3px;
}

.tps-vmenu .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tps-vmenu .body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tps-vmenu .title{
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.25;
  font-family: var(--font-heading);
}

.tps-vmenu .desc{
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--tps-muted);
}

.tps-vmenu .link--plain{
  padding-left: 14px;
  padding-right: 14px;
}

.tps-vmenu .link--plain .body{
  width: 100%;
}

.tps-vmenu .link--arrow{
  align-items: center;
  justify-content: space-between;
}

.tps-vmenu .link--arrow .body{
  flex: 1 1 auto;
}

.tps-vmenu .arrow{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  flex-shrink: 0;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.tps-vmenu .arrow i{
  font-size: 0.9rem;
  color: var(--tps-accent-2);
}

.tps-vmenu .link:hover .arrow{
  background: color-mix(in oklab, var(--tps-accent) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tps-accent) 18%, transparent);
}

.tps-vmenu .link--centered{
  align-items: center;
}

.tps-vmenu .link--centered .body{
  justify-content: center;
}

.tps-vmenu .cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--tps-accent-2);
  margin-left: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.tps-vmenu .link:hover .cta{
  background: color-mix(in oklab, var(--tps-accent) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tps-accent) 18%, transparent);
}

/* ========================================================================== */
/* /tps-vmenu                                                                  */
/* ========================================================================== */

/* ========================================================================== */
/* tps-meta-bar — Meta metrics bar / pills (plain, glass, compact)             */
/* ========================================================================== */

.tps-meta-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 14px;
  border-radius: 7px;
  border: 1px solid var(--tps-border-2);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in oklab, var(--tps-primary) 6%, transparent),
      transparent 55%
    ),
    color-mix(in oklab, #ffffff 82%, var(--tps-bg) 18%);
}

.tps-meta-bar--plain{
  padding: 0;
  border: 0;
  background: none;
}

.tps-meta-bar--glass{
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(19px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
}

.tps-meta-bar--compact{
  display: inline-flex;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
}

.tps-meta-bar--compact .metrics{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 10px 18px;
}

.tps-meta-bar--compact .cat{
  margin-left: 0;
}

.tps-meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #111827;
}

.tps-meta-bar .metrics{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.tps-meta-bar .item,
.tps-meta-pill .item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #111827;
}

.tps-meta-bar .label,
.tps-meta-pill .label{
  font-weight: 500;
}

.tps-meta-bar .value,
.tps-meta-pill .value{
  font-weight: 600;
}

.tps-meta-bar .muted,
.tps-meta-pill .muted{
  color: var(--tps-muted);
  font-weight: 500;
}

.tps-meta-bar .icon,
.tps-meta-pill .icon{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: color-mix(in oklab, var(--tps-primary) 10%, #ffffff);
  color: var(--tps-accent-2);
}

.tps-meta-bar .icon i,
.tps-meta-pill .icon i{
  line-height: 1;
}

.tps-meta-bar .rating .icon,
.tps-meta-pill.rating .icon{
  background: #fef3c7;
  color: #fbbf24;
}

.tps-meta-bar .rating .value,
.tps-meta-pill.rating .value{
  color: #f59e0b;
}

.tps-meta-bar .cat-chip,
.tps-meta-pill.cat .cat-chip{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--tps-accent);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in oklab, #ffffff 72%, var(--tps-accent) 28%);
}

.tps-meta-bar .cat{
  margin-left: auto;
}

.tps-meta-bar .metrics .group{
  position: relative;
  padding-right: 16px;
  margin-right: 8px;
}

.tps-meta-bar .metrics .group:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 60%;
  transform: translateY(-50%);
  background: var(--tps-border-3);
}

.tps-meta-bar--glass .item,
.tps-meta-bar--glass .label,
.tps-meta-bar--glass .value{
  color: #f9fafb;
}

.tps-meta-bar--glass .muted{
  color: rgba(209, 213, 219, 0.9);
}

.tps-meta-bar--glass .icon{
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
}

.tps-meta-bar--glass .rating .icon{
  background: rgba(252, 211, 77, 0.16);
  color: #facc15;
}

.tps-meta-bar--glass .rating .value{
  color: #fde68a;
}

.tps-meta-bar--glass .cat-chip{
  background: color-mix(in oklab, var(--tps-accent) 65%, #000);
  color: #f9fafb;
  box-shadow: none;
}

.tps-meta-bar--glass .metrics .group:not(:last-child)::after{
  background: rgba(148, 163, 184, 0.6);
}

@media (max-width: 575.98px){
  .tps-meta-bar{
    gap: 8px 12px;
  }

  .tps-meta-bar .cat{
    margin-left: 0;
  }

  .tps-meta-bar .metrics .group{
    padding-right: 0;
    margin-right: 0;
  }

  .tps-meta-bar .metrics .group::after{
    display: none;
  }

  .tps-meta-bar--compact{
    flex-wrap: wrap;
  }
}

/* ========================================================================== */
/* /tps-meta-bar                                                               */
/* ========================================================================== */

/* ========================================================================== */
/* tps-specs — Specs list / feature specification cards                        */
/* ========================================================================== */

.tps-specs{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tps-specs .section-title{
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.tps-specs .specs-row{
  --tps-spec-gap-y: 12px;
}

.tps-specs .specs-row > [class*="col-"]{
  margin-bottom: var(--tps-spec-gap-y);
}

.tps-specs .spec-card{
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid var(--tps-border-2);
  background: #ffffff;
}

.tps-specs .spec-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--tps-accent) 9%, white);
  color: var(--tps-accent-2);
  font-size: 1.3rem;
}

.tps-specs .spec-body{
  min-width: 0;
}

.tps-specs .spec-label{
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.tps-specs .spec-text{
  font-size: 0.9rem;
  color: var(--tps-muted);
  line-height: 1.4;
}

/* ========================================================================== */
/* /tps-specs                                                                 */
/* ========================================================================== */

/* ========================================================================== */
/* tps-row — TPS Grid system / Bootstrap-like layout on CSS Grid               */
/* ========================================================================== */

.tps-row{
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tps-grid-gap, 12px);
  column-gap: var(--tps-grid-gap-x, var(--tps-grid-gap, 12px));
  row-gap: var(--tps-grid-gap-y, var(--tps-grid-gap, 12px));
}

.tps-row > *{
  min-width: 0;
}

.tps-row + .tps-row{
  margin-top: var(--tps-rows-gap, 16px);
}

.tps-row.tps-row-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tps-row.tps-row-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tps-row.tps-row-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tps-row.tps-row-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tps-row.tps-row-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tps-row.tps-row-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tps-row.tps-row-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tps-row.tps-row-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.tps-row.tps-row-cols-9{
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.tps-row.tps-row-cols-10{
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.tps-row.tps-row-cols-11{
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.tps-row.tps-row-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (min-width: 576px){
  .tps-row.tps-row-cols-sm-1,
  .tps-row.tps-row-sm-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-2,
  .tps-row.tps-row-sm-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-3,
  .tps-row.tps-row-sm-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-4,
  .tps-row.tps-row-sm-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-5,
  .tps-row.tps-row-sm-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-6,
  .tps-row.tps-row-sm-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-7,
  .tps-row.tps-row-sm-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-8,
  .tps-row.tps-row-sm-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-9,
  .tps-row.tps-row-sm-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-10,
  .tps-row.tps-row-sm-cols-10{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-11,
  .tps-row.tps-row-sm-cols-11{
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-sm-12,
  .tps-row.tps-row-sm-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .tps-row.tps-row-cols-md-1,
  .tps-row.tps-row-md-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-2,
  .tps-row.tps-row-md-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-3,
  .tps-row.tps-row-md-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-4,
  .tps-row.tps-row-md-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-5,
  .tps-row.tps-row-md-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-6,
  .tps-row.tps-row-md-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-7,
  .tps-row.tps-row-md-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-8,
  .tps-row.tps-row-md-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-9,
  .tps-row.tps-row-md-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-10,
  .tps-row.tps-row-md-cols-10{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-11,
  .tps-row.tps-row-md-cols-11{
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-md-12,
  .tps-row.tps-row-md-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 992px){
  .tps-row.tps-row-cols-lg-1,
  .tps-row.tps-row-lg-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-2,
  .tps-row.tps-row-lg-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-3,
  .tps-row.tps-row-lg-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-4,
  .tps-row.tps-row-lg-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-5,
  .tps-row.tps-row-lg-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-6,
  .tps-row.tps-row-lg-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-7,
  .tps-row.tps-row-lg-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-8,
  .tps-row.tps-row-lg-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-9,
  .tps-row.tps-row-lg-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-10,
  .tps-row.tps-row-lg-cols-10{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-11,
  .tps-row.tps-row-lg-cols-11{
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-lg-12,
  .tps-row.tps-row-lg-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .tps-row.tps-row-cols-xl-1,
  .tps-row.tps-row-xl-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-2,
  .tps-row.tps-row-xl-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-3,
  .tps-row.tps-row-xl-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-4,
  .tps-row.tps-row-xl-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-5,
  .tps-row.tps-row-xl-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-6,
  .tps-row.tps-row-xl-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-7,
  .tps-row.tps-row-xl-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-8,
  .tps-row.tps-row-xl-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-9,
  .tps-row.tps-row-xl-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-10,
  .tps-row.tps-row-xl-cols-10{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-11,
  .tps-row.tps-row-xl-cols-11{
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xl-12,
  .tps-row.tps-row-xl-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1400px){
  .tps-row.tps-row-cols-xxl-1,
  .tps-row.tps-row-xxl-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-2,
  .tps-row.tps-row-xxl-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-3,
  .tps-row.tps-row-xxl-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-4,
  .tps-row.tps-row-xxl-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-5,
  .tps-row.tps-row-xxl-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-6,
  .tps-row.tps-row-xxl-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-7,
  .tps-row.tps-row-xxl-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-8,
  .tps-row.tps-row-xxl-cols-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-9,
  .tps-row.tps-row-xxl-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-10,
  .tps-row.tps-row-xxl-cols-10{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-11,
  .tps-row.tps-row-xxl-cols-11{
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .tps-row.tps-row-cols-xxl-12,
  .tps-row.tps-row-xxl-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.tps-col{
  grid-column: auto;
}

.tps-col-auto{
  grid-column: auto;
}

.tps-col-1{
  grid-column: span 1;
}

.tps-col-2{
  grid-column: span 2;
}

.tps-col-3{
  grid-column: span 3;
}

.tps-col-4{
  grid-column: span 4;
}

.tps-col-5{
  grid-column: span 5;
}

.tps-col-6{
  grid-column: span 6;
}

.tps-col-7{
  grid-column: span 7;
}

.tps-col-8{
  grid-column: span 8;
}

.tps-col-9{
  grid-column: span 9;
}

.tps-col-10{
  grid-column: span 10;
}

.tps-col-11{
  grid-column: span 11;
}

.tps-col-12{
  grid-column: span 12;
}

@media (min-width: 576px){
  .tps-col-sm-1{
    grid-column: span 1;
  }

  .tps-col-sm-2{
    grid-column: span 2;
  }

  .tps-col-sm-3{
    grid-column: span 3;
  }

  .tps-col-sm-4{
    grid-column: span 4;
  }

  .tps-col-sm-5{
    grid-column: span 5;
  }

  .tps-col-sm-6{
    grid-column: span 6;
  }

  .tps-col-sm-7{
    grid-column: span 7;
  }

  .tps-col-sm-8{
    grid-column: span 8;
  }

  .tps-col-sm-9{
    grid-column: span 9;
  }

  .tps-col-sm-10{
    grid-column: span 10;
  }

  .tps-col-sm-11{
    grid-column: span 11;
  }

  .tps-col-sm-12{
    grid-column: span 12;
  }
}

@media (min-width: 768px){
  .tps-col-md-1{
    grid-column: span 1;
  }

  .tps-col-md-2{
    grid-column: span 2;
  }

  .tps-col-md-3{
    grid-column: span 3;
  }

  .tps-col-md-4{
    grid-column: span 4;
  }

  .tps-col-md-5{
    grid-column: span 5;
  }

  .tps-col-md-6{
    grid-column: span 6;
  }

  .tps-col-md-7{
    grid-column: span 7;
  }

  .tps-col-md-8{
    grid-column: span 8;
  }

  .tps-col-md-9{
    grid-column: span 9;
  }

  .tps-col-md-10{
    grid-column: span 10;
  }

  .tps-col-md-11{
    grid-column: span 11;
  }

  .tps-col-md-12{
    grid-column: span 12;
  }
}

@media (min-width: 992px){
  .tps-col-lg-1{
    grid-column: span 1;
  }

  .tps-col-lg-2{
    grid-column: span 2;
  }

  .tps-col-lg-3{
    grid-column: span 3;
  }

  .tps-col-lg-4{
    grid-column: span 4;
  }

  .tps-col-lg-5{
    grid-column: span 5;
  }

  .tps-col-lg-6{
    grid-column: span 6;
  }

  .tps-col-lg-7{
    grid-column: span 7;
  }

  .tps-col-lg-8{
    grid-column: span 8;
  }

  .tps-col-lg-9{
    grid-column: span 9;
  }

  .tps-col-lg-10{
    grid-column: span 10;
  }

  .tps-col-lg-11{
    grid-column: span 11;
  }

  .tps-col-lg-12{
    grid-column: span 12;
  }
}

@media (min-width: 1200px){
  .tps-col-xl-1{
    grid-column: span 1;
  }

  .tps-col-xl-2{
    grid-column: span 2;
  }

  .tps-col-xl-3{
    grid-column: span 3;
  }

  .tps-col-xl-4{
    grid-column: span 4;
  }

  .tps-col-xl-5{
    grid-column: span 5;
  }

  .tps-col-xl-6{
    grid-column: span 6;
  }

  .tps-col-xl-7{
    grid-column: span 7;
  }

  .tps-col-xl-8{
    grid-column: span 8;
  }

  .tps-col-xl-9{
    grid-column: span 9;
  }

  .tps-col-xl-10{
    grid-column: span 10;
  }

  .tps-col-xl-11{
    grid-column: span 11;
  }

  .tps-col-xl-12{
    grid-column: span 12;
  }
}

@media (min-width: 1400px){
  .tps-col-xxl-1{
    grid-column: span 1;
  }

  .tps-col-xxl-2{
    grid-column: span 2;
  }

  .tps-col-xxl-3{
    grid-column: span 3;
  }

  .tps-col-xxl-4{
    grid-column: span 4;
  }

  .tps-col-xxl-5{
    grid-column: span 5;
  }

  .tps-col-xxl-6{
    grid-column: span 6;
  }

  .tps-col-xxl-7{
    grid-column: span 7;
  }

  .tps-col-xxl-8{
    grid-column: span 8;
  }

  .tps-col-xxl-9{
    grid-column: span 9;
  }

  .tps-col-xxl-10{
    grid-column: span 10;
  }

  .tps-col-xxl-11{
    grid-column: span 11;
  }

  .tps-col-xxl-12{
    grid-column: span 12;
  }
}

.tps-g-0{
  --tps-rows-gap: 0;
  --tps-grid-gap: 0;
}

.tps-g-1{
  --tps-rows-gap: 0.25rem;
  --tps-grid-gap: 0.25rem;
}

.tps-g-2{
  --tps-rows-gap: 0.5rem;
  --tps-grid-gap: 0.5rem;
}

.tps-g-3{
  --tps-rows-gap: 1rem;
  --tps-grid-gap: 1rem;
}

.tps-g-4{
  --tps-rows-gap: 1.5rem;
  --tps-grid-gap: 1.5rem;
}

.tps-g-5{
  --tps-rows-gap: 2rem;
  --tps-grid-gap: 2rem;
}

.tps-gx-0{
  --tps-grid-gap-x: 0;
}

.tps-gx-1{
  --tps-grid-gap-x: 0.25rem;
}

.tps-gx-2{
  --tps-grid-gap-x: 0.5rem;
}

.tps-gx-3{
  --tps-grid-gap-x: 1rem;
}

.tps-gx-4{
  --tps-grid-gap-x: 1.5rem;
}

.tps-gx-5{
  --tps-grid-gap-x: 2rem;
}

.tps-gy-0{
  --tps-grid-gap-y: 0;
}

.tps-gy-1{
  --tps-grid-gap-y: 0.25rem;
}

.tps-gy-2{
  --tps-grid-gap-y: 0.5rem;
}

.tps-gy-3{
  --tps-grid-gap-y: 1rem;
}

.tps-gy-4{
  --tps-grid-gap-y: 1.5rem;
}

.tps-gy-5{
  --tps-grid-gap-y: 2rem;
}

.tps-align-items-start{
  align-items: start;
}

.tps-align-items-center{
  align-items: center;
}

.tps-align-items-end{
  align-items: end;
}

.tps-justify-content-start{
  justify-content: start;
}

.tps-justify-content-center{
  justify-content: center;
}

.tps-justify-content-end{
  justify-content: end;
}

.tps-justify-content-between{
  justify-content: space-between;
}

.tps-justify-content-around{
  justify-content: space-around;
}

.tps-justify-content-evenly{
  justify-content: space-evenly;
}

.tps-justify-items-start{
  justify-items: start;
}

.tps-justify-items-center{
  justify-items: center;
}

.tps-justify-items-end{
  justify-items: end;
}

.tps-align-self-start{
  align-self: start;
}

.tps-align-self-center{
  align-self: center;
}

.tps-align-self-end{
  align-self: end;
}

.tps-justify-self-start{
  justify-self: start;
}

.tps-justify-self-center{
  justify-self: center;
}

.tps-justify-self-end{
  justify-self: end;
}

.tps-sticky-top{
  position: sticky;
  top: var(--tps-sticky-top, 0);
}

@media (min-width: 576px){
  .tps-sticky-sm-top{
    position: sticky;
    top: var(--tps-sticky-top, 0);
  }
}

@media (min-width: 768px){
  .tps-sticky-md-top{
    position: sticky;
    top: var(--tps-sticky-top, 0);
  }
}

@media (min-width: 992px){
  .tps-sticky-lg-top{
    position: sticky;
    top: var(--tps-sticky-top, 0);
  }
}

@media (min-width: 1200px){
  .tps-sticky-xl-top{
    position: sticky;
    top: var(--tps-sticky-top, 0);
  }
}

@media (min-width: 1400px){
  .tps-sticky-xxl-top{
    position: sticky;
    top: var(--tps-sticky-top, 0);
  }
}

.tps-sticky-top-header{
  --tps-sticky-top: 95px;
}

/* ========================================================================== */
/* /tps-row                                                                   */
/* ========================================================================== */


/* ========================================================================== */
/* BLOCK: tps-block-buttons — icon button grid (states, sizes, loading)        */
/* ========================================================================== */

.tps-block-buttons{
  background-color: var(--tps-bg, #f5f8fc);
}

.tps-block-buttons .buttons-title{
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: var(--font-heading);
}

.tps-block-buttons .size-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--tps-border-2);
  color: var(--tps-muted);
  background: rgba(248, 250, 252, 0.9);
  margin-bottom: 10px;
}

.tps-block-buttons .buttons-group{
  margin-bottom: 28px;
}

.tps-block-buttons .btn-col{
  display: flex;
}

.tps-block-buttons .btn-col > .btn-icon,
.tps-block-buttons .btn-col > .accent-frame{
  flex: 1 1 auto;
  display: flex;
}

.tps-block-buttons .btn-icon{
  --btn-icon-py: 14px;
  --btn-icon-px: 18px;
  --btn-icon-fs: 0.95rem;
  --btn-icon-circle-size: 38px;
  --btn-icon-radius: 16px;
  --btn-icon-square-radius: 12px;
  --tps-btn-loader-color: #111827;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: var(--btn-icon-py) var(--btn-icon-px);
  border-radius: var(--btn-icon-radius);
  border: 1px solid var(--tps-border);
  background:
    radial-gradient(circle at 0 0, rgba(124, 58, 237, 0.06), transparent),
    var(--tps-bg);
  color: #111827;
  text-align: left;
  text-decoration: none;
  font-size: var(--btn-icon-fs);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background 0.22s ease-out,
    box-shadow 0.22s ease-out,
    transform 0.18s ease-out,
    border-color 0.18s ease-out,
    filter 0.18s ease-out,
    opacity 0.18s ease-out;
}

.tps-block-buttons .btn-icon:disabled,
.tps-block-buttons .btn-icon[disabled],
.tps-block-buttons .btn-icon.disabled,
.tps-block-buttons .btn-icon.is-disabled,
.tps-block-buttons .btn-icon[aria-disabled="true"]{
  opacity: 0.56;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: saturate(0.92) contrast(0.98);
  animation: none !important;
}

.tps-block-buttons .btn-icon:disabled:hover,
.tps-block-buttons .btn-icon[disabled]:hover,
.tps-block-buttons .btn-icon.disabled:hover,
.tps-block-buttons .btn-icon.is-disabled:hover,
.tps-block-buttons .btn-icon[aria-disabled="true"]:hover{
  border-color: var(--tps-border);
  transform: none !important;
}

.tps-block-buttons .btn-icon:not(.btn-icon-dark):not(.btn-icon-dark-green):active{
  transform: scale(0.99, 0.965);
  filter: brightness(0.96);
}

.tps-block-buttons .btn-icon-dark:active{
  background: linear-gradient(
    135deg,
    var(--tps-accent),
    var(--tps-accent-2),
    var(--tps-grape)
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  filter: brightness(0.98);
  transform: translateY(0);
}

.tps-block-buttons .btn-icon-dark-green:active{
  background: linear-gradient(
    135deg,
    #28b318,
    #098637,
    #41c013
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  filter: brightness(0.98);
  transform: translateY(0);
}

.tps-block-buttons .btn-icon:focus{
  outline: none;
}

.tps-block-buttons .btn-icon.tps-btn-loading:disabled::after,
.tps-block-buttons .btn-icon.tps-btn-loading[disabled]::after,
.tps-block-buttons .btn-icon.tps-btn-loading.disabled::after,
.tps-block-buttons .btn-icon.tps-btn-loading.is-disabled::after,
.tps-block-buttons .btn-icon.tps-btn-loading[aria-disabled="true"]::after{
  content: none !important;
}

.tps-block-buttons .btn-icon-dark,
.tps-block-buttons .btn-icon-dark-green{
  --tps-btn-loader-color: #f9fafb;
}

.tps-block-buttons .btn-icon.tps-btn-loading:disabled .btn-icon-title,
.tps-block-buttons .btn-icon.tps-btn-loading[disabled] .btn-icon-title,
.tps-block-buttons .btn-icon.tps-btn-loading.disabled .btn-icon-title,
.tps-block-buttons .btn-icon.tps-btn-loading.is-disabled .btn-icon-title,
.tps-block-buttons .btn-icon.tps-btn-loading[aria-disabled="true"] .btn-icon-title{
  position: relative;
  color: transparent !important;
}

.tps-block-buttons .btn-icon.tps-btn-loading:disabled .btn-icon-title::after,
.tps-block-buttons .btn-icon.tps-btn-loading[disabled] .btn-icon-title::after,
.tps-block-buttons .btn-icon.tps-btn-loading.disabled .btn-icon-title::after,
.tps-block-buttons .btn-icon.tps-btn-loading.is-disabled .btn-icon-title::after,
.tps-block-buttons .btn-icon.tps-btn-loading[aria-disabled="true"] .btn-icon-title::after{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 14px;
  pointer-events: none;
  opacity: 0.95;
  background:
    radial-gradient(circle, var(--tps-btn-loader-color) 60%, transparent 61%) 0% 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--tps-btn-loader-color) 60%, transparent 61%) 50% 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--tps-btn-loader-color) 60%, transparent 61%) 100% 50% / 10px 10px no-repeat;
  animation: tps-btn-dots-inline 1.05s ease-in-out infinite;
}

@keyframes tps-btn-dots-inline{
  0%,
  100%{
    background-size: 10px 10px, 10px 10px, 10px 10px;
    filter: brightness(1);
  }

  15%{
    background-size: 14px 14px, 10px 10px, 10px 10px;
  }

  33%{
    background-size: 10px 10px, 14px 14px, 10px 10px;
  }

  51%{
    background-size: 10px 10px, 10px 10px, 14px 14px;
  }

  70%{
    background-size: 10px 10px, 14px 14px, 10px 10px;
  }

  85%{
    background-size: 14px 14px, 10px 10px, 10px 10px;
  }
}

.tps-block-buttons .btn-icon.tps-btn-loading:disabled .btn-icon-right,
.tps-block-buttons .btn-icon.tps-btn-loading[disabled] .btn-icon-right,
.tps-block-buttons .btn-icon.tps-btn-loading.disabled .btn-icon-right,
.tps-block-buttons .btn-icon.tps-btn-loading.is-disabled .btn-icon-right,
.tps-block-buttons .btn-icon.tps-btn-loading[aria-disabled="true"] .btn-icon-right{
  opacity: 0;
  transform: none !important;
}

.tps-block-buttons .btn-icon:not(.btn-icon-dark):not(.btn-icon-dark-green):hover{
  border-color: var(--tps-border-3);
  background:
    radial-gradient(circle at 0 0, rgba(124, 58, 237, 0.12), transparent),
    #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.tps-block-buttons .btn-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px var(--tps-ring), 0 0 0 4px var(--tps-ring);
}

.tps-block-buttons .btn-icon-left{
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tps-block-buttons .btn-icon-square{
  width: calc(var(--btn-icon-circle-size) - 6px);
  height: calc(var(--btn-icon-circle-size) - 6px);
  border-radius: calc(var(--btn-icon-square-radius) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tps-accent);
  border: none;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
  font-size: calc(var(--btn-icon-circle-size) / 2.4);
  color: #ffffff;
}

.tps-block-buttons .btn-icon-body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  transition: opacity 0.18s ease-out;
}

.tps-block-buttons .btn-icon-title{
  font-weight: 500;
  font-size: 1.1em;
  letter-spacing: -0.01em;
  font-family: var(--font-heading);
}

.tps-block-buttons .btn-icon-text{
  font-size: 0.82em;
  color: var(--tps-muted);
}

.tps-block-buttons .btn-icon-label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--tps-accent);
  margin-top: 4px;
  align-self: flex-start;
  white-space: nowrap;
}

.tps-block-buttons .btn-icon-label i{
  font-size: 0.9em;
}

.tps-block-buttons .btn-icon-meta{
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--tps-muted);
  opacity: 0.9;
}

.tps-block-buttons .btn-icon-meta strong{
  font-weight: 600;
  color: var(--tps-accent);
}

.tps-block-buttons .btn-icon-sm{
  --btn-icon-py: 10px;
  --btn-icon-px: 14px;
  --btn-icon-fs: 0.9rem;
  --btn-icon-circle-size: 32px;
  --btn-icon-radius: 8px;
  --btn-icon-square-radius: 10px;
}

.tps-block-buttons .btn-icon-lg{
  --btn-icon-py: 16px;
  --btn-icon-px: 20px;
  --btn-icon-fs: 0.96rem;
  --btn-icon-circle-size: 40px;
  --btn-icon-radius: 10px;
  --btn-icon-square-radius: 12px;
}

.tps-block-buttons .btn-icon-xl{
  --btn-icon-py: 18px;
  --btn-icon-px: 22px;
  --btn-icon-fs: 1.04rem;
  --btn-icon-circle-size: 46px;
  --btn-icon-radius: 12px;
  --btn-icon-square-radius: 14px;
}

.tps-block-buttons .btn-icon-only-title{
  align-items: center;
}

.tps-block-buttons .btn-icon-only-title .btn-icon-body{
  justify-content: center;
}

.tps-block-buttons .btn-icon-right{
  flex-shrink: 0;
  margin-left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 0.9rem;
  background: rgba(148, 163, 184, 0.16);
  color: inherit;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.18s ease-out;
}

.tps-block-buttons .btn-icon-right i{
  line-height: 1;
}

.tps-block-buttons .btn-icon:hover .btn-icon-right{
  transform: translateX(2px);
}

.tps-block-buttons .accent-frame{
  border: 1px dashed #3a3a3a;
  border-radius: 1.15rem;
  padding: 0.4rem;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.tps-block-buttons .accent-frame .btn-icon{
  border: none;
  height: 100%;
}

.tps-block-buttons .btn-icon-dark{
  --tps-btn-loader-color: #f9fafb;

  background: linear-gradient(
    135deg,
    var(--tps-accent),
    var(--tps-accent-2),
    var(--tps-grape)
  );
  color: #e5e7eb;
  border: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 12px 34px color-mix(in srgb, #8b5cf6, transparent 60%);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease,
    background-position 0.6s ease,
    opacity 0.18s ease-out;
}

.tps-block-buttons .btn-icon-dark-green{
  --tps-btn-loader-color: #f9fafb;

  background: linear-gradient(
    135deg,
    #28b318,
    #098637,
    #41c013
  );
  color: #e5e7eb;
  border: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 12px 34px color-mix(in srgb, #22c55e, transparent 60%);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease,
    background-position 0.6s ease,
    opacity 0.18s ease-out;
}

.tps-block-buttons .btn-icon-dark:hover,
.tps-block-buttons .btn-icon-dark-green:hover{
  background-position: 100% 50%;
  transform: translateY(-1px);
}

.tps-block-buttons .btn-icon-dark .btn-icon-square{
  background: var(--tps-grape);
}

.tps-block-buttons .btn-icon-dark-green .btn-icon-square{
  background: #098637;
}

.tps-block-buttons .btn-icon-dark .btn-icon-right,
.tps-block-buttons .btn-icon-dark-green .btn-icon-right{
  background: rgba(15, 23, 42, 0.24);
  color: #f9fafb;
}

.tps-block-buttons .btn-icon-dark .btn-icon-title,
.tps-block-buttons .btn-icon-dark-green .btn-icon-title{
  color: #f9fafb;
}

.tps-block-buttons .btn-icon-dark .btn-icon-text,
.tps-block-buttons .btn-icon-dark-green .btn-icon-text{
  color: rgba(249, 250, 251, 0.9);
}

.tps-block-buttons .btn-icon-dark .btn-icon-meta,
.tps-block-buttons .btn-icon-dark-green .btn-icon-meta{
  color: rgba(229, 231, 235, 0.9);
}

.tps-block-buttons .btn-icon-label-secondary{
  background: var(--tps-secondary-2);
  color: #ffffff;
}

.tps-block-buttons .btn-icon-label-typing{
  --label-chars: 18;

  width: calc(var(--label-chars) * 1ch + 26px);
  justify-content: flex-start;
}

.tps-block-buttons .label-typing-inner{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  position: relative;
  animation: label-typing 4s steps(var(--label-chars), end) infinite;
}

.tps-block-buttons .label-typing-inner::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ffffff;
  animation: label-caret 0.8s step-end infinite;
}

.tps-block-buttons .btn-icon-dark-anim,
.tps-block-buttons .btn-icon-dark-green-anim{
  animation: btn-accent-pulse 7s ease-in-out infinite;
}

.tps-block-buttons .btn-icon-dark-anim:hover,
.tps-block-buttons .btn-icon-dark-green-anim:hover{
  animation-play-state: paused;
}

@keyframes btn-accent-pulse{
  0%{
    background-position: 0% 50%;
  }

  50%{
    background-position: 100% 50%;
  }

  100%{
    background-position: 0% 50%;
  }
}

@keyframes label-typing{
  0%{
    max-width: 0;
  }

  40%{
    max-width: calc(var(--label-chars) * 1ch);
  }

  60%{
    max-width: calc(var(--label-chars) * 1ch);
  }

  100%{
    max-width: 0;
  }
}

@keyframes label-caret{
  0%,
  50%{
    opacity: 1;
  }

  50.01%,
  100%{
    opacity: 0;
  }
}

@media (max-width: 575.98px){
  .tps-block-buttons .btn-icon{
    --btn-icon-px: 14px;
  }
}

/* ========================================================================== */
/* END BLOCK: tps-block-buttons   */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-info — inline info pill with accent bar + blurred glow           */
/* ========================================================================== */

.tps-info{
  --tps-info-py: 0.75rem;
  --tps-info-px: 1rem;
  --tps-info-lh: 1.5;
  --tps-info-cloud-inset-x: 1.2rem;
  --tps-info-cloud-inset-y: 0.3rem;
  --tps-info-cloud-blur: 14px;

  position: relative;
  display: inline-block;
  padding: var(--tps-info-py) var(--tps-info-px);
  padding-left: calc(var(--tps-info-px) + 0.75rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #111827;
  font-size: 0.95rem;
  line-height: var(--tps-info-lh);
  font-weight: 500;
}

.tps-info::before{
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.45rem;
  width: 0.34rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-accent-2));
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
}

.tps-info::after{
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--tps-info-cloud-inset-x));
  height: calc(100% - var(--tps-info-cloud-inset-y));
  border-radius: 999px;
  background: color-mix(in oklab, var(--tps-accent) 22%, transparent);
  opacity: 0.85;
  filter: blur(var(--tps-info-cloud-blur));
}

.tps-info--sm{
  --tps-info-py: 0.45rem;
  --tps-info-px: 0.7rem;
  --tps-info-lh: 1.4;
  --tps-info-cloud-inset-x: 1rem;
  --tps-info-cloud-inset-y: 1rem;
  --tps-info-cloud-blur: 20px;

  font-size: 0.85rem;
}

.tps-info--sm::before{
  top: 0.38rem;
  bottom: 0.38rem;
  left: 0.4rem;
  width: 0.30rem;
}

.tps-info--md{
  --tps-info-py: 0.75rem;
  --tps-info-px: 1rem;
  --tps-info-lh: 1.5;
  --tps-info-cloud-inset-x: 1.95rem;
  --tps-info-cloud-inset-y: 1.65rem;
  --tps-info-cloud-blur: 22px;

  font-size: 0.95rem;
}

.tps-info--md::before{
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.45rem;
  width: 0.34rem;
}

.tps-info--lg{
  --tps-info-py: 0.95rem;
  --tps-info-px: 1.25rem;
  --tps-info-lh: 1.6;
  --tps-info-cloud-inset-x: 3.8rem;
  --tps-info-cloud-inset-y: 3.4rem;
  --tps-info-cloud-blur: 25px;

  font-size: 1rem;
}

.tps-info--lg::before{
  top: 0.65rem;
  bottom: 0.65rem;
  left: 0.5rem;
  width: 0.38rem;
}

/* ========================================================================== */
/* END BLOCK: tps-info                                                         */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-pcode — promo/code card with copy button (wide/square variants)  */
/* ========================================================================== */

.tps-pcode{
  --promo-bg: linear-gradient(
    135deg,
    color-mix(in oklab, var(--tps-accent) 32%, var(--c01)),
    color-mix(in oklab, var(--tps-grape) 35%, var(--c01))
  );
  --promo-title-color: var(--tps-accent-2);
  --promo-border-color: var(--tps-border-3);
  --promo-label-color: var(--tps-muted);
  --promo-badge-bg: var(--tps-accent);
  --promo-badge-color: #ffffff;
  --promo-note-color: var(--tps-muted);

  position: relative;
  padding: 14px 14px 12px;
  border-radius: 9px;
  border: 1px solid var(--promo-border-color);
  background: var(--promo-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tps-pcode .pcode-eyebrow{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--tps-secondary-2);
  color: #ffffff;
}

.tps-pcode .pcode-title{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--promo-title-color);
}

.tps-pcode .pcode-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.tps-pcode .pcode-row .tps-ico{
  flex-shrink: 0;
}

.tps-pcode .pcode-box{
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px dashed var(--promo-border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  background: color-mix(in oklab, var(--tps-accent) 10%, var(--c01));
  flex-wrap: wrap;
}

.tps-pcode .pcode-label{
  font-size: 0.8rem;
  color: var(--promo-label-color);
}

.tps-pcode .pcode-code{
  margin-left: 0;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  gap: 8px;
}

.tps-pcode .pcode-badge{
  display: flex;
  flex: 1 1 auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--promo-badge-bg);
  color: var(--promo-badge-color);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
}

.tps-pcode .pcode-copy{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 30px;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  color: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.25), 0 0 0 4px rgba(111, 66, 193, 0.12);
  transition:
    transform 0.08s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.tps-pcode .pcode-copy:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(30, 10, 60, 0.32), 0 0 0 4px rgba(129, 74, 210, 0.24);
  opacity: 0.96;
}

.tps-pcode .pcode-copy:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.28), 0 0 0 3px rgba(111, 66, 193, 0.22);
}

.tps-pcode .pcode-note{
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--promo-note-color);
}

.tps-pcode.tps-pcode--wide{
  padding: 10px 14px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.tps-pcode.tps-pcode--wide .pcode-main{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tps-pcode.tps-pcode--wide .pcode-title{
  font-size: 0.9rem;
}

.tps-pcode.tps-pcode--wide .pcode-note{
  font-size: 11px;
}

.tps-pcode.tps-pcode--wide .pcode-row{
  margin-left: auto;
}

.tps-pcode.tps-pcode--wide .pcode-box{
  padding: 6px 10px;
  border-radius: 999px;
}

.tps-pcode.tps-pcode--square{
  height: 100%;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tps-pcode.tps-pcode--square .pcode-square-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tps-pcode.tps-pcode--square .pcode-square-icon{
  display: inline-flex;
  margin-top: 4px;
}

.tps-pcode.tps-pcode--square .pcode-square-icon .tps-ico{
  transform: scale(1.05);
}

.tps-pcode.tps-pcode--square .pcode-box{
  flex: 0 0 auto;
  margin-top: 10px;
}

.tps-pcode.tps-pcode--square .pcode-note{
  margin-top: 6px;
  font-size: 11px;
}

@media (min-width: 768px){
  .tps-pcode.tps-pcode--square{
    min-height: 230px;
  }
}

@media (max-width: 576px){
  .tps-pcode .pcode-box{
    flex-direction: column;
    align-items: flex-start;
  }

  .tps-pcode .pcode-code{
    margin-left: 0;
  }

  .tps-pcode.tps-pcode--wide{
    flex-direction: column;
    align-items: stretch;
  }

  .tps-pcode.tps-pcode--wide .pcode-row{
    margin-left: 0;
    width: 100%;
  }

  .tps-pcode.tps-pcode--wide .pcode-box{
    width: 100%;
    justify-content: flex-start;
  }

  .tps-pcode.tps-pcode--square{
    min-height: 0;
  }
}

/* ========================================================================== */
/* END BLOCK: tps-pcode                                                        */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-product-card — product listing card (LG/SM/XS/LONG layouts)      */
/* ========================================================================== */

.tps-product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--tps-border);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

.tps-product-card .tps-pc-body{
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.tps-product-card .tps-pc-media{
  position: relative;
  display: block;
  background: #faf7ff;
  box-shadow: 0 4px 14px rgba(24, 16, 56, 0.06) inset;
  border-radius: 8px;
  overflow: hidden;
}

.tps-product-card .tps-pc-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.tps-product-card .tps-pc-media:hover .tps-pc-img{
  transform: scale(1.02);
  filter: saturate(1.05);
}

.tps-product-card .tps-bubbles{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}

.tps-product-card .tps-pc-title{
  font-weight: 500;
  line-height: 1.25;
  font-family: var(--font-heading);
}

.tps-product-card .tps-pc-title a{
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}

.tps-product-card .tps-pc-title a:hover{
  color: var(--tps-link-hover, var(--tps-accent-2));
}

.tps-product-card .tps-pc-labels{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.tps-product-card .tps-pc-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--tps-border);
  background: color-mix(in oklab, var(--tps-primary) 6%, white);
  color: var(--tps-accent-2);
  white-space: nowrap;
}

.tps-product-card .tps-pc-badge .bi{
  font-size: 0.8rem;
}

.tps-product-card .tps-pc-rating-line{
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tps-product-card .tps-pc-rating-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--tps-border-2);
  border-radius: 10px;
  padding: 0.16rem 0.36rem;
  background: #ffffff;
  line-height: 1;
}

.tps-product-card .tps-pc-rating-badge .bi{
  font-size: 0.95rem;
  color: #f0b90b;
}

.tps-product-card .tps-pc-rating-value{
  font-weight: 600;
  font-size: 0.82rem;
}

.tps-product-card .tps-pc-rating-count{
  font-size: 0.9rem;
  color: var(--tps-muted);
}

.tps-product-card .tps-pc-price-footer{
  margin-top: auto;
  padding: 0.7rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.tps-product-card .tps-pc-prices{
  margin: 0;
  padding: 0;
}

.tps-product-card .tps-pc-price-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.35rem;
}

.tps-product-card .tps-pc-price-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.tps-product-card .tps-pc-oldprice-slot{
  height: 18px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.tps-product-card .tps-pc-oldprice-row{
  height: 18px;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
}

.tps-product-card .tps-pc-price-old{
  opacity: 0.6;
  text-decoration: line-through;
  white-space: nowrap;
  font-size: 0.76rem;
  margin: 0;
}

.tps-product-card .tps-pc-discount{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.06rem 0.32rem;
  font-weight: 700;
  line-height: 1;
  background: color-mix(in oklab, var(--tps-primary) 5%, white);
  color: var(--tps-accent-2);
  font-size: 0.68rem;
  white-space: nowrap;
}

.tps-product-card .tps-pc-price{
  font-weight: 800;
  white-space: nowrap;
  color: var(--tps-accent-2);
  margin: 0;
  line-height: 1;
}

.tps-product-card .tps-pc-cart-ring{
  border: 1px dashed var(--tps-border-2);
  border-radius: 12px;
  padding: 0.3rem;
  overflow: hidden;
}

.tps-product-card .tps-pc-btn-cart{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--tps-border-2);
  background: #ffffff;
  border-radius: 999px;
  height: 36px;
  padding: 0 0.9rem;
  cursor: pointer;
}

.tps-product-card .tps-pc-btn-cart .bi{
  font-size: 1rem;
}

.tps-product-card.tps-product-card--lg .tps-pc-media{
  aspect-ratio: 4 / 3;
  min-height: 240px;
  margin: 0.85rem 0.9rem 0 0.9rem;
  padding: 1.5rem;
}

.tps-product-card.tps-product-card--lg .tps-pc-title{
  font-size: 1rem;
}

.tps-product-card.tps-product-card--lg .tps-pc-price{
  font-size: 1.3rem;
}

.tps-product-card.tps-product-card--sm .tps-pc-sm-top{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.tps-product-card.tps-product-card--sm .tps-pc-sm-thumb{
  width: 104px;
  height: 104px;
  border-radius: 8px;
  background: #faf7ff;
  box-shadow: 0 4px 14px rgba(24, 16, 56, 0.06) inset;
  overflow: hidden;
  padding: 0.48rem;
}

.tps-product-card.tps-product-card--sm .tps-pc-title{
  font-size: 1.04rem;
  margin-top: 0.1rem;
}

.tps-product-card.tps-product-card--sm .tps-pc-price{
  font-size: 1.24rem;
}

.tps-product-card.tps-product-card--sm .tps-pc-price-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
}

.tps-product-card.tps-product-card--sm .tps-pc-oldprice-slot{
  height: auto;
}

.tps-product-card.tps-product-card--xs .tps-pc-body{
  position: relative;
}

.tps-product-card.tps-product-card--xs .tps-pc-xs-top{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}

.tps-product-card.tps-product-card--xs .tps-pc-xs-thumb{
  width: 78px;
  height: 78px;
  border-radius: 7px;
  background: #faf7ff;
  box-shadow: 0 4px 14px rgba(24, 16, 56, 0.06) inset;
  overflow: hidden;
  padding: 0.48rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-title{
  font-size: 1rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-price{
  font-size: 1.18rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-xs-price-line{
  display: flex;
  align-items: end;
  gap: 0.5rem;
  grid-column: 1 / -1;
  margin-top: 0.25rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-xs-price-left{
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.tps-product-card.tps-product-card--xs .tps-pc-price-old{
  font-size: 0.72rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-discount{
  font-size: 0.62rem;
  padding: 0.04rem 0.26rem;
}

.tps-product-card.tps-product-card--xs .tps-pc-xs-cart-topright{
  position: static;
  top: auto;
  right: auto;
  z-index: 1;
  margin-left: auto;
  flex-shrink: 0;
}

.tps-product-card.tps-product-card--long .tps-pc-body{
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
}

.tps-product-card.tps-product-card--long .tps-pc-long-thumb{
  flex: 0 0 104px;
  max-width: 104px;
  height: 104px;
  border-radius: 10px;
  background: #faf7ff;
  box-shadow: 0 4px 14px rgba(24, 16, 56, 0.06) inset;
  overflow: hidden;
  padding: 0.48rem;
}

.tps-product-card.tps-product-card--long .tps-pc-long-main{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tps-product-card.tps-product-card--long .tps-pc-title{
  font-size: 1.02rem;
}

.tps-product-card.tps-product-card--long .tps-pc-long-price-row{
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tps-product-card.tps-product-card--long .tps-pc-price{
  font-size: 1.24rem;
}

.tps-product-card.tps-product-card--long .tps-pc-price-old{
  font-size: 0.78rem;
}

.tps-product-card.tps-product-card--long .tps-pc-discount{
  font-size: 0.7rem;
}

.tps-product-card.tps-product-card--long .tps-pc-long-cart{
  flex: 0 0 auto;
  margin-left: auto;
}

.tps-product-card.tps-product-card--long .tps-pc-cart-ring{
  height: 100%;
  display: flex;
  align-items: center;
}

@media (max-width: 575.98px){
  .tps-product-card.tps-product-card--long .tps-pc-body{
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .tps-product-card.tps-product-card--long .tps-pc-long-cart{
    margin-left: 0;
  }

  .tps-product-card.tps-product-card--long .tps-pc-btn-cart{
    width: 100%;
    justify-content: center;
  }
}

/* ========================================================================== */
/* END BLOCK: tps-product-card                                                 */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-ico — icon wrapper with halo (size variants)                     */
/* ========================================================================== */

.tps-ico{
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

.tps-ico i{
  position: relative;
  z-index: 2;
  color: var(--tps-accent-2);
}

.tps-ico .halo{
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: var(--tps-secondary);
  opacity: 1;
  transform: translateX(30%);
}

.tps-ico.sm{
  width: 32px;
  height: 32px;
}

.tps-ico.sm i{
  font-size: 21px;
}

.tps-ico.sm .halo{
  width: 22px;
  height: 22px;
}

.tps-ico.md{
  width: 40px;
  height: 40px;
}

.tps-ico.md i{
  font-size: 26px;
}

.tps-ico.md .halo{
  width: 26px;
  height: 26px;
}

.tps-ico.lg{
  width: 48px;
  height: 48px;
}

.tps-ico.lg i{
  font-size: 30px;
}

.tps-ico.lg .halo{
  width: 30px;
  height: 30px;
}

.tps-ico.xl{
  width: 56px;
  height: 56px;
}

.tps-ico.xl i{
  font-size: 35px;
}

.tps-ico.xl .halo{
  width: 36px;
  height: 36px;
}

.tps-ico.xxl{
  width: 62px;
  height: 62px;
}

.tps-ico.xxl i{
  font-size: 45px;
}

.tps-ico.xxl .halo{
  width: 34px;
  height: 34px;
}

.tps-ico,
.tps-ico .halo{
  flex: 0 0 auto;
}

/* ========================================================================== */
/* END BLOCK: tps-ico                                                          */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-acc — accordion skin (Bootstrap accordion variants)              */
/* ========================================================================== */

.tps-acc{
  --acc-radius: 12px;
  --acc-bg: var(--tps-bg, #fff);
  --acc-border: var(--tps-border, #e7e9ee);
  --acc-border-soft: var(--tps-border-soft, #eef0f5);
  --acc-title-color: var(--tps-text, #101014);
  --acc-accent: var(--tps-accent, #6f42c1);
  --acc-accent-2: var(--tps-accent-2, #9c4298);
  --acc-grape: var(--tps-grape, #8a3ec9);
  --acc-pad: var(--tps-pad, 24px);
  --acc-shadow: var(--tps-shadow-sm, 0 10px 40px rgba(2, 6, 23, 0.06));
}

.tps-acc .accordion-item{
  background: var(--acc-bg);
  border: 1px solid var(--acc-border);
  border-radius: var(--acc-radius);
  box-shadow: var(--acc-shadow);
  overflow: hidden;
}

.tps-acc .accordion-item + .accordion-item{
  margin-top: 12px;
}

.tps-acc .accordion-header{
  margin: 0;
}

.tps-acc .accordion-button{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: calc(var(--acc-pad) - 12px) var(--acc-pad);
  background: transparent;
  color: var(--acc-title-color);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.25;
  box-shadow: none;
  outline: none;
  transition: color 0.2s ease;
  position: relative;
  padding-left: calc(var(--acc-pad) + 18px);
}

.tps-acc .accordion-button:hover{
  color: var(--acc-accent);
}

.tps-acc .accordion-button::after{
  filter: grayscale(0.1) opacity(0.9);
  margin-left: auto;
}

.tps-acc.tps-acc--no-caret .accordion-button::after{
  display: none;
}

.tps-acc .accordion-button:not(.collapsed){
  background: color-mix(in oklab, var(--acc-bg) 92%, white);
  color: var(--acc-title-color);
  box-shadow: inset 0 -1px 0 var(--acc-border-soft);
}

.tps-acc .accordion-button:not(.collapsed):hover{
  color: var(--acc-accent);
}

.tps-acc .accordion-body{
  padding: var(--acc-pad);
  background: #ffffff;
  border-top: 1px dashed var(--acc-border-soft);
}

.tps-acc.tps-acc--lined .accordion-button{
  padding-left: calc(var(--acc-pad) + 18px);
}

.tps-acc.tps-acc--lined .accordion-button::before{
  content: "";
  position: absolute;
  top: calc(var(--acc-pad) - 12px);
  bottom: calc(var(--acc-pad) - 12px);
  left: calc(var(--acc-pad) - 8px);
  width: 10px;
  border-radius: 999px;
  background: var(--acc-accent);
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
}

.tps-acc.tps-acc--lined .accordion-button:not(.collapsed)::before{
  background: var(--acc-grape);
}

.tps-acc.tps-acc--baricon-replace .accordion-button{
  padding-left: calc(var(--acc-pad) + 36px);
}

.tps-acc.tps-acc--baricon-replace .accordion-button::before{
  display: none;
}

.tps-acc.tps-acc--baricon-replace .accordion-button .acc-baricon{
  position: absolute;
  left: var(--acc-pad);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--acc-accent);
  box-shadow: 0 8px 18px rgba(30, 10, 60, 0.22), 0 0 0 3px rgba(111, 66, 193, 0.10);
  color: #fff;
  z-index: 1;
}

.tps-acc.tps-acc--baricon-replace .accordion-button .acc-baricon i{
  font-size: 14px;
  line-height: 1;
  color: #fff;
}

.tps-acc.tps-acc--baricon-replace .accordion-button:not(.collapsed) .acc-baricon{
  background: var(--acc-grape);
  box-shadow: 0 9px 20px rgba(30, 10, 60, 0.25), 0 0 0 3px rgba(111, 66, 193, 0.14);
}

.tps-acc.tps-acc--baricon-replace .accordion-button:hover .acc-baricon{
  filter: brightness(1.04);
}

@media (max-width: 576px){
  .tps-acc .accordion-button{
    padding: 12px 14px;
    font-size: clamp(15.5px, 4.4vw, 18px);
  }

  .tps-acc .accordion-body{
    padding: 16px;
  }

  .tps-acc.tps-acc--baricon-replace .accordion-button{
    padding-left: calc(14px + 32px);
  }

  .tps-acc.tps-acc--baricon-replace .accordion-button .acc-baricon{
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    padding: 5px;
  }

  .tps-acc.tps-acc--baricon-replace .accordion-button .acc-baricon i{
    font-size: 13px;
  }
}

/* ========================================================================== */
/* END BLOCK: tps-acc                                                          */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-ico-line, tps-ico-block                                          */
/* Icon + text row (title only), icon + text block (title + description)       */
/* ========================================================================== */

.tps-ico-line{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.tps-ico-line-title{
  font-weight: 600;
}

.tps-ico-line.sm .tps-ico-line-title{
  font-size: 0.9rem;
  line-height: 1.2;
  padding-top: 4px;
}

.tps-ico-line.md .tps-ico-line-title{
  font-size: 1rem;
  line-height: 1.22;
  padding-top: 6px;
}

.tps-ico-line.lg .tps-ico-line-title{
  font-size: 1.1rem;
  line-height: 1.25;
  padding-top: 8px;
}

.tps-ico-line.xl .tps-ico-line-title{
  font-size: 1.2rem;
  line-height: 1.28;
  padding-top: 10px;
}

.tps-ico-line.xxl .tps-ico-line-title{
  font-size: 1.3rem;
  line-height: 1.3;
  padding-top: 12px;
}

.tps-ico-block{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.tps-ico-block-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tps-ico-block-title{
  font-weight: 600;
}

.tps-ico-block-desc{
  color: var(--tps-muted, #a0aec0);
}

.tps-ico-block.sm .tps-ico-block-title{
  font-size: 0.85rem;
  line-height: 1.15;
}

.tps-ico-block.sm .tps-ico-block-desc{
  font-size: 0.78rem;
  line-height: 1.25;
}

.tps-ico-block.md .tps-ico-block-title{
  font-size: 0.95rem;
  line-height: 1.18;
}

.tps-ico-block.md .tps-ico-block-desc{
  font-size: 0.85rem;
  line-height: 1.3;
}

.tps-ico-block.lg .tps-ico-block-title{
  font-size: 1.05rem;
  line-height: 1.22;
}

.tps-ico-block.lg .tps-ico-block-desc{
  font-size: 0.95rem;
  line-height: 1.35;
}

.tps-ico-block.xl .tps-ico-block-title{
  font-size: 1.15rem;
  line-height: 1.24;
}

.tps-ico-block.xl .tps-ico-block-desc{
  font-size: 1.02rem;
  line-height: 1.4;
}

.tps-ico-block.xxl .tps-ico-block-title{
  font-size: 1.25rem;
  line-height: 1.26;
}

.tps-ico-block.xxl .tps-ico-block-desc{
  font-size: 1.1rem;
  line-height: 1.45;
}

/* ========================================================================== */
/* END BLOCK: tps-ico-line, tps-ico-block                                      */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-bubble, tps-bubbles                                              */
/* Icon bubble badges, bubble groups, color variants                           */
/* ========================================================================== */

.tps-bubble-group{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 7px 0;
}

.tps-bubble{
  --cp-size: 26px;
  --cp-ring: 5px;
  --cp-overlap: 12px;
  --cp-color: var(--tps-info, #3b82f6);
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: var(--tps-text);
}

.tps-bubble-group,
.tps-bubbles{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1rem;
}

.tps-bubble,
.tps-bubble-only{
  margin: 0.3rem;
  max-width: 100%;
}

:where(.tps-bubble-group, .tps-bubbles) > .tps-bubble,
:where(.tps-bubble-group, .tps-bubbles) > .tps-bubble-only{
  margin: 0;
}

.tps-bubble__icon{
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: var(--cp-size);
  height: var(--cp-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--cp-color);
  box-shadow: 0 0 0 var(--cp-ring) var(--c01), 0 4px 12px rgba(0, 0, 0, 0.3);
  color: var(--c01);
}

.tps-bubble__icon i{
  font-size: calc(var(--cp-size) * 0.54);
  line-height: 1;
}

.tps-bubble-only{
  --cp-size: 26px;
  --cp-ring: 5px;
  --cp-color: var(--tps-info, #3b82f6);
  display: inline-grid;
  place-items: center;
  width: var(--cp-size);
  height: var(--cp-size);
  border-radius: 999px;
  background: var(--cp-color);
  color: var(--c01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tps-bubble-only i{
  font-size: calc(var(--cp-size) * 0.54);
  line-height: 1;
}

.tps-bubble--apricot,
.tps-bubble-only--apricot{
  --cp-color: #eba371;
}

.tps-bubble--mint,
.tps-bubble-only--mint{
  --cp-color: #68d995;
}

.tps-bubble--grape{
  --cp-color: #9c4298;
}

.tps-bubble__body{
  min-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  background: var(--c01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-inline-start: calc(var(--cp-overlap) * -1);
  padding: 0.15rem 0.7rem 0.15rem calc(0.7rem + var(--cp-overlap));
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ========================================================================== */
/* END BLOCK: tps-bubble, tps-bubbles                                          */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-note                                                             */
/* Note callout, icon + text layout, accent variants                           */
/* ========================================================================== */

.tps-note{
  --note-icon-size: 22px;
  --note-icon-radius: 6px;
  --accent-color: var(--tps-accent-2);
  --note-bg-color: color-mix(in oklab, var(--tps-border) 20%, transparent);
  --note-line-color: color-mix(in oklab, var(--tps-border) 70%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: var(--note-icon-size) 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0;
  color: var(--tps-muted);
  border-radius: var(--tps-r-xs-2);
  background: linear-gradient(
    90deg,
    transparent,
    var(--note-bg-color) 20%,
    var(--note-bg-color) 50%,
    var(--note-bg-color) 80%,
    transparent
  );
}

.tps-note::before,
.tps-note::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--note-line-color),
    transparent
  );
}

.tps-note::before{
  top: 0;
}

.tps-note::after{
  bottom: 0;
}

.tps-note .tps-note-icon{
  width: var(--note-icon-size);
  height: var(--note-icon-size);
  border-radius: var(--note-icon-radius);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  display: grid;
  place-items: center;
  align-self: start;
}

.tps-note .tps-note-icon > .bi{
  font-size: calc(var(--note-icon-size) * 0.55);
  line-height: 1;
  color: var(--accent-color);
}

.tps-note .tps-note-body{
  min-width: 0;
}

.tps-note .tps-note-title{
  font-weight: 500;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--accent-color), transparent 3%);
  line-height: var(--note-icon-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}

.tps-note .tps-note-desc{
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--tps-muted);
  margin-block-start: 0.35rem;
}

.tps-note.secondary{
  --accent-color: var(--tps-secondary-2);
  --note-bg-color: color-mix(in oklab, var(--tps-secondary-2) 4%, transparent);
  --note-line-color: color-mix(in oklab, var(--tps-secondary-2) 20%, transparent);
}

.tps-note.grape{
  --accent-color: var(--tps-grape);
  --note-bg-color: color-mix(in oklab, var(--tps-grape) 3%, transparent);
  --note-line-color: color-mix(in oklab, var(--tps-grape) 15%, transparent);
}

/* ========================================================================== */
/* END BLOCK: tps-note                                                         */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-code-block-wrap, tps-code-copy-btn, tps-copy-toast               */
/* Code block wrapper, copy button, copy toast notification                    */
/* ========================================================================== */

.tps-code-block-wrap{
  position: relative;
  margin: 1.3rem 0 1.4rem;
  border-radius: 0.9rem;
  background: #020617;
  border: 1px solid color-mix(in oklab, #020617 70%, var(--tps-primary) 30%);
  overflow: auto;
}

.tps-code-block-wrap code.tps-code-block{
  margin: 0;
  border: 0;
  border-radius: 0;
  display: block;
  padding: 0.95rem 2.6rem 0.95rem 1rem;
  background: transparent;
}

.tps-code-block-wrap pre{
  margin: 0;
  border-radius: 0.9rem;
  background: transparent;
  border: 0;
}

.tps-code-copy-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 30px;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  color: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.25), 0 0 0 4px rgba(111, 66, 193, 0.12);
  transition:
    transform 0.08s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.tps-code-copy-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(30, 10, 60, 0.32), 0 0 0 4px rgba(129, 74, 210, 0.24);
  opacity: 0.96;
}

.tps-code-copy-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.28), 0 0 0 3px rgba(111, 66, 193, 0.22);
}

.tps-copy-toast{
  position: fixed;
  right: 16px;
  top: 95px;
  z-index: 1100;
  max-width: 360px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(9, 12, 22, 0.92);
  border: 1px solid rgba(148, 163, 255, 0.6);
  color: #f9fafb;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

.tps-copy-toast--visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tps-copy-toast-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  align-items: flex-start;
}

.tps-copy-toast-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(129, 140, 248, 0.18);
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.6);
  flex-shrink: 0;
}

.tps-copy-toast-icon i{
  font-size: 16px;
  color: var(--tps-accent, #a855f7);
}

.tps-copy-toast-content{
  min-width: 0;
}

.tps-copy-toast-title{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.7);
  background: rgba(15, 23, 42, 0.95);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.tps-copy-toast-text{
  margin: 0;
  padding: 0;
  font-size: 0.87rem;
}

.tps-copy-toast-close{
  border: 1px solid rgba(148, 163, 255, 0.4);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  padding: 0;
  margin-left: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  border-radius: 999px;
  transition:
    background 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease,
    border-color 0.15s ease;
}

.tps-copy-toast-close:hover{
  opacity: 1;
  background: rgba(148, 163, 255, 0.18);
  border-color: rgba(148, 163, 255, 0.7);
  transform: translateY(-0.5px);
}

.tps-copy-toast-progress{
  position: relative;
  margin-top: 8px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31, 41, 55, 0.9);
}

.tps-copy-toast-progress-bar{
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--tps-accent, #a855f7),
    color-mix(in srgb, var(--tps-accent, #a855f7) 70%, #22d3ee)
  );
  transform-origin: left center;
  transition: width linear;
}

@supports not (color-mix(in srgb, #000 0%, #fff 100%)){
  .tps-copy-toast-progress-bar{
    background: linear-gradient(
      90deg,
      var(--tps-accent, #a855f7),
      #22d3ee
    );
  }
}

/* ========================================================================== */
/* END BLOCK: tps-code-block-wrap, tps-code-copy-btn, tps-copy-toast           */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-microtiles                                                       */
/* Micro tiles grid, equal-height cards, icon sizing, compact/plain variants   */
/* ========================================================================== */

.tps-microtiles{
  --tps-micro-gap: 10px;
  --tps-micro-radius: 14px;
  --tps-micro-img: 48px;
}

@media (min-width: 1200px){
  .tps-microtiles{
    --tps-micro-img: 52px;
  }
}

@media (min-width: 1400px){
  .tps-microtiles{
    --tps-micro-img: 56px;
  }
}

.tps-microtiles .tps-mini-wrap{
  display: flex;
  width: 100%;
}

.tps-microtiles .tps-mini-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #fff;
  color: inherit;
  text-decoration: none;
  cursor: default;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--tps-micro-radius);
  padding: 12px;
  min-height: 100%;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  transition: none;
  box-shadow: none;
}

.tps-microtiles .tps-mini-frame{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: var(--tps-micro-gap);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
}

.tps-microtiles .tps-mini-frame img{
  width: var(--tps-micro-img);
  height: var(--tps-micro-img);
  display: block;
  image-rendering: auto;
  object-fit: contain;
}

.tps-microtiles .tps-mini-title{
  margin: 0 0 6px 0;
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.tps-microtiles .tps-mini-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #555;
}

.tps-microtiles .tps-mini--compact .tps-mini-title{
  margin-bottom: 0;
}

.tps-microtiles .tps-mini--plain{
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.tps-microtiles .tps-mini--plain .tps-mini-title,
.tps-microtiles .tps-mini--plain .tps-mini-desc{
  text-align: center;
}

/* ========================================================================== */
/* END BLOCK: tps-microtiles                                                   */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-reviews                                                          */
/* Reviews list, review cards, avatars, stars, likes, galleries, rating bars   */
/* ========================================================================== */

.tps-reviews{
  --rv-bg: #fff;
  --rv-soft: #eef0f5;
  --rv-border: #dfe3ec;
  --rv-border-hover: #c9cfe0;
  --rv-text: #101014;
  --rv-muted: #6b7280;
  --rv-accent: #8a3ec9;
  --rv-like: #e55353;
  --rv-radius: 14px;
  --rv-radius-sm: 12px;
  --rv-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

.tps-reviews .rv-list{
  display: grid;
  gap: 14px;
}

.tps-reviews .rv-card{
  position: relative;
  background: #fff;
  border-radius: var(--rv-radius-sm);
  padding: 14px;
  background-clip: padding-box;
}

.tps-reviews .rv-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.03);
  pointer-events: none;
}

.tps-reviews .rv-card.v1{
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
}

.tps-reviews .rv-card.v2{
  background: #fff;
}

.tps-reviews .rv-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tps-reviews .rv-user{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tps-reviews .rv-nick{
  font-weight: 600;
  color: var(--rv-text);
  font-size: 16px;
}

.tps-reviews .rv-meta{
  font-size: 12px;
  color: var(--rv-muted);
}

.tps-reviews .rv-verified{
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e9f7ef;
  color: #0b3b2a;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(11, 59, 42, 0.12);
}

.tps-reviews .rv-verified i{
  font-size: 12px;
}

.tps-reviews .rv-starsline{
  margin: 6px 0 8px 0;
  display: inline-flex;
  gap: 2px;
  color: #f2b01e;
  font-size: 14px;
}

.tps-reviews .rv-body{
  color: var(--rv-text);
  font-size: 15px;
}

.tps-reviews .rv-body p{
  margin: 0 0 8px 0;
}

.tps-reviews .rv-likebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed var(--rv-soft);
}

.tps-reviews .rv-like{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rv-border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.tps-reviews .rv-like:active{
  transform: scale(0.98);
}

.tps-reviews .rv-like.is-liked{
  border-color: rgba(229, 83, 83, 0.35);
  background: #fff5f5;
  color: var(--rv-like);
}

.tps-reviews .rv-caption{
  font-size: 12px;
  color: var(--rv-muted);
}

.tps-reviews .rv-proscons{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.tps-reviews .rv-line{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}

.tps-reviews .rv-line i{
  font-size: 18px;
  line-height: 1;
}

.tps-reviews .rv-line .ico-plus{
  color: #137a42;
}

.tps-reviews .rv-line .ico-minus{
  color: #a31c2b;
}

.tps-reviews .ratio-43{
  position: relative;
  width: 100%;
}

.tps-reviews .ratio-43::before{
  content: "";
  display: block;
  padding-top: 75%;
}

.tps-reviews .ratio-43 > img,
.tps-reviews .ratio-43 > a > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tps-reviews .rv-thumbs{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tps-reviews .rv-thumb{
  width: 120px;
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  background: #f4f6fa;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  position: relative;
}

.tps-reviews .rv-thumb img{
  transition: transform 0.35s ease;
}

.tps-reviews .rv-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.14) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tps-reviews .rv-thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.14);
  border-color: var(--rv-border-hover);
}

.tps-reviews .rv-thumb:hover img{
  transform: scale(1.08);
}

.tps-reviews .rv-thumb:hover::after{
  opacity: 1;
}

.tps-reviews .rv-global{
  margin-bottom: 16px;
  border: 1px dashed var(--rv-border);
  border-radius: 12px;
  padding: 12px;
  background: #fbfbfe;
}

.tps-reviews .rv-global h3{
  margin: 0 0 10px 0;
  font-size: 16px;
}

.tps-reviews .rv-global-list .g-item{
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  background: #f6f7fb;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.tps-reviews .rv-global-list .g-item img{
  transition: transform 0.4s ease;
}

.tps-reviews .rv-global-list .g-item::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tps-reviews .rv-global-list .g-item:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.18);
  border-color: var(--rv-border-hover);
}

.tps-reviews .rv-global-list .g-item:hover img{
  transform: scale(1.1);
}

.tps-reviews .rv-global-list .g-item:hover::after{
  opacity: 1;
}

.tps-reviews .rv-rating{
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  padding: 16px;
  display: grid;
  gap: 14px;
  background: #fff;
}

.tps-reviews .rv-rating .rv-score{
  display: flex;
  align-items: center;
  gap: 12px;
}

.tps-reviews .rv-rating .rv-score .val{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.tps-reviews .rv-rating .rv-score .stars{
  display: flex;
  gap: 2px;
  color: #f2b01e;
}

.tps-reviews .rv-rating .rv-dist{
  display: grid;
  gap: 8px;
}

.tps-reviews .rv-bar{
  display: grid;
  grid-template-columns: 44px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--rv-muted);
  line-height: 1;
}

.tps-reviews .rv-bar > *{
  align-self: center;
}

.tps-reviews .rv-bar .track{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--rv-soft);
  overflow: hidden;
  align-self: center;
}

.tps-reviews .rv-bar .fill{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rv-accent), #9c4298);
  width: 0%;
}

.tps-reviews .rv-reply{
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--rv-border);
  background: #f7f9fc;
  border-radius: 10px;
}

.tps-reviews .rv-reply .rv-head{
  margin-bottom: 6px;
}

.tps-reviews .rv-reply .rv-ava{
  width: 32px;
  height: 32px;
}

@media (max-width: 991.98px){
  .tps-reviews .rv-col-left{
    border-right: 0;
    border-bottom: 1px dashed var(--rv-soft);
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .tps-reviews .rv-side{
    padding-left: 0;
  }

  .tps-reviews .rv-global-list .g-item{
    width: 144px;
  }

  .tps-reviews .rv-thumb{
    width: 108px;
  }
}

/* ========================================================================== */
/* END BLOCK: tps-reviews                                                      */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-reviews (ec-form)                                                */
/* Reviews form styling, rating stars, validation, upload, CTA/collapse UI     */
/* ========================================================================== */

.tps-reviews{
  --tx: var(--c15);
  --mut: var(--c18);
  --ln: #e9e7ff;
  --ln2: #efeaff;
  --bg: var(--c01);
  --acc: #6d28d9;
  --g: #16a34a;
  --b: #2563eb;
  --d: var(--c04);
  --tps-border: var(--ln);
  --r: 14px;
  --sh: var(--tps-shadow, 0 10px 30px rgba(2, 6, 23, 0.06));
  color: var(--tx);
}

.tps-reviews .ec-form.well{
  background: var(--bg);
  padding: var(1rem, 16px);
}

.tps-reviews .ec-form .ec-form__row{
  margin-block: 10px;
  display: grid;
  gap: 6px;
}

.tps-reviews .ec-form .control-label{
  font-size: 13px;
  color: var(--mut);
}

.tps-reviews .ec-form .form-control,
.tps-reviews .ec-form input[type="text"],
.tps-reviews .ec-form textarea{
  background: var(--c01);
  border: 1px solid var(--ln);
  border-radius: var(--tps-r-sm-3, 10px);
  color: var(--tx);
  padding: 10px 12px;
  outline: none;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.tps-reviews .ec-form .form-control:focus,
.tps-reviews .ec-form input[type="text"]:focus,
.tps-reviews .ec-form textarea:focus{
  border-color: color-mix(in srgb, var(--acc) 40%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}

.tps-reviews .ec-form .ec-error.help-block{
  color: #b42318;
  font-size: 12px;
}

.tps-reviews .ec-form .ec-input-parent.ec-has-error .form-control{
  border-color: #f1a5a0;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}

.tps-reviews .ec-form .ec-antispam{
  position: absolute !important;
  left: -99999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tps-reviews .ec-form .ec-rating{
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--ln);
  border-radius: var(--tps-r-sm-3, 10px);
  background: var(--c01);
}

.tps-reviews .ec-form .ec-rating-stars{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.tps-reviews .ec-form .ec-rating-stars span{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--acc) 20%, white);
  background: color-mix(in srgb, var(--acc) 8%, white);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.tps-reviews .ec-form .ec-rating-stars span::before{
  content: "★";
  font-size: 14px;
  line-height: 1;
  color: var(--c26, #f2b01e);
  opacity: 0.85;
  transform: translateY(-0.5px);
}

.tps-reviews .ec-form .ec-rating-stars span:hover{
  transform: translateY(-1px) scale(1.03);
  background: color-mix(in srgb, var(--acc) 14%, white);
  border-color: color-mix(in srgb, var(--acc) 35%, white);
}

.tps-reviews .ec-form .ec-rating-stars span[data-active="1"],
.tps-reviews .ec-form .ec-rating-stars span.active{
  background: color-mix(in srgb, var(--acc) 18%, white);
  border-color: color-mix(in srgb, var(--acc) 45%, white);
}

.tps-reviews .ec-form .ec-rating-description{
  font-size: 12px;
  color: var(--mut);
}

.tps-reviews .ec-form input[type="file"]{
  width: 100%;
  padding: 9px 10px;
  border: 1px dashed var(--ln);
  border-radius: var(--tps-r-sm-3, 10px);
  background: linear-gradient(180deg, #fbfbff, #ffffff);
  color: var(--mut);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tps-reviews .ec-form input[type="file"]:hover{
  border-color: color-mix(in srgb, var(--acc) 35%, white);
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
}

.tps-reviews .ec-form .g-recaptcha,
.tps-reviews .ec-form .ec-recaptcha{
  margin-block: 6px;
}

.tps-reviews .ec-form .checkbox{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mut);
}

.tps-reviews .ec-form .checkbox input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
}

.tps-reviews .ec-form .btn.btn-primary{
  --btn-bg: color-mix(in srgb, var(--acc) 86%, white);
  --btn-bd: color-mix(in srgb, var(--acc) 50%, white);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--tps-r-sm-3, 10px);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.18);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.tps-reviews .ec-form .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.22);
  background: color-mix(in srgb, var(--acc) 92%, white);
  border-color: color-mix(in srgb, var(--acc) 62%, white);
}

.tps-reviews .ec-form .btn.btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.18);
}

.tps-reviews .ec-form .help-block:not(.ec-error){
  color: var(--mut);
  font-size: 12px;
}

@media (max-width: 520px){
  .tps-reviews .ec-form.well{
    padding: 12px;
  }

  .tps-reviews .ec-form .btn.btn-primary{
    width: 100%;
  }
}

.tps-reviews .rv-form-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 4px 12px;
}

.tps-reviews .rv-form-title .ttl{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}

.tps-reviews .rv-form-title .hint{
  color: var(--mut);
  font-size: 12px;
}

.tps-reviews .rv-form-cta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
}

.tps-reviews .rv-form-cta .rv-note{
  display: none;
}

.tps-reviews .rv-form-cta .btn.rv-toggle{
  background: color-mix(in srgb, var(--acc) 90%, white);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 8%, transparent),
    color-mix(in srgb, #000 6%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--acc) 56%, white);
  border-radius: var(--tps-r-sm-3, 10px);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.18);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
  line-height: 1.1;
}

.tps-reviews .rv-form-cta .btn.rv-toggle:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--acc) 96%, white);
  border-color: color-mix(in srgb, var(--acc) 66%, white);
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.22);
}

.tps-reviews .rv-form-cta .btn.rv-toggle:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.18);
}

.tps-reviews .rv-form-cta .btn.rv-toggle:focus{
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--acc) 24%, transparent),
    0 8px 18px rgba(109, 40, 217, 0.18);
}

.tps-reviews .rv-form-cta .btn.rv-toggle[aria-expanded="true"]{
  background: color-mix(in srgb, var(--acc) 98%, white);
  border-color: color-mix(in srgb, var(--acc) 70%, white);
  box-shadow: 0 10px 22px rgba(109, 40, 217, 0.2);
}

.tps-reviews .rv-form-collapse{
  margin: 0 0 14px;
}

.tps-reviews .rv-form-wrap{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ========================================================================== */
/* END BLOCK: tps-reviews (ec-form)                                            */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-article-page, tps-article-nav, tps-article-mobile-nav, tps-article, tps-typo */
/* Article page layout, progress bar, heading navigation, mobile nav, typography, tables, code blocks */
/* ========================================================================== */

.tps-article-page{
  padding: 2.5rem 1.25rem 3rem;
  background: var(--tps-bg, #f5f8fc);
}

.tps-article-page [data-progress]{
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(
    90deg,
    rgba(90, 53, 217, 0) 0%,
    rgba(90, 53, 217, 1) 18%,
    #8ffbea 82%,
    rgba(143, 251, 234, 0) 100%
  );
  z-index: 2147483647;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(90, 53, 217, 0.45);
}

@media (max-width: 767.98px){
  .tps-article-page [data-progress]{
    background: linear-gradient(
      90deg,
      rgba(90, 53, 217, 0) 0%,
      rgba(90, 53, 217, 0.5) 14%,
      rgba(90, 53, 217, 1) 26%,
      #8ffbea 74%,
      rgba(143, 251, 234, 0.5) 86%,
      rgba(143, 251, 234, 0) 100%
    );
  }
}

.tps-article-nav{
  font-size: 0.9rem;
}

.tps-article-nav-title{
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.tps-article-nav-note{
  font-size: 0.78rem;
  color: var(--tps-muted, #6b7280);
  margin-bottom: 0.6rem;
}

.tps-article-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.tps-article-nav-list li{
  margin: 0;
}

.tps-article-nav-link{
  display: block;
  padding: 0.28rem 0.35rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.86rem;
  color: #111827;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.tps-article-nav-link.is-active{
  background: color-mix(in oklab, var(--tps-primary) 10%, white);
  border-color: color-mix(in oklab, var(--tps-primary) 45%, white);
  color: color-mix(in oklab, var(--tps-accent) 20%, #020617);
}

.tps-article-nav-link:hover{
  background: color-mix(in oklab, var(--tps-primary) 7%, white);
  border-color: color-mix(in oklab, var(--tps-primary) 35%, white);
  color: var(--tps-accent-2, #5b21b6);
}

.tps-article-nav-list li[data-level="3"] .tps-article-nav-link{
  padding-left: 0.95rem;
  font-size: 0.84rem;
  color: var(--tps-muted, #6b7280);
}

.tps-article-layout{
}

.tps-article-mobile-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483646;
  display: none;
  pointer-events: none;
  font-size: 0.9rem;
}

.tps-article-mobile-toggle{
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--tps-border);
  background: #ffffff;
  box-shadow: 0 -6px 25px rgba(15, 23, 42, 0.18);
  font-size: 0.86rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  margin: 0.4rem auto calc(0.4rem + env(safe-area-inset-bottom, 0));
  max-width: min(640px, 100% - 2.5rem);
  width: 50%;
}

.tps-article-mobile-toggle-icon{
  font-size: 1rem;
  transition: transform 0.18s ease;
}

.tps-article-mobile-nav.is-open .tps-article-mobile-toggle-icon{
  transform: rotate(180deg);
}

.tps-article-mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: -1;
}

.tps-article-mobile-nav.is-open .tps-article-mobile-overlay{
  opacity: 1;
  pointer-events: auto;
  z-index: 0;
}

.tps-article-mobile-panel{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  z-index: 1;
}

.tps-article-mobile-nav.is-open .tps-article-mobile-panel{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.tps-article-mobile-panel-inner{
  margin: 0 1rem calc(0.65rem + env(safe-area-inset-bottom, 0));
  border-radius: 1rem 1rem 0.6rem 0.6rem;
  background: #ffffff;
  box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.26);
  padding: 0.55rem 0.7rem 0.7rem;
  max-width: min(640px, 100% - 2rem);
  margin-inline: auto;
}

.tps-article-mobile-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.tps-article-mobile-header-text{
  min-width: 0;
}

.tps-article-mobile-title{
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tps-article-mobile-note{
  font-size: 0.78rem;
  color: var(--tps-muted, #6b7280);
}

.tps-article-mobile-close{
  border: 0;
  background: transparent;
  padding: 0.25rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--tps-muted, #6b7280);
  flex: 0 0 auto;
}

.tps-article-mobile-close:hover{
  background: color-mix(in oklab, var(--tps-primary) 8%, white);
  color: color-mix(in oklab, var(--tps-accent) 20%, #020617);
}

.tps-article-mobile-list{
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0.15rem 0 0.1rem;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tps-article-mobile-list .tps-article-nav-link{
  padding: 0.38rem 0.45rem;
}

.tps-article-mobile-list li[data-level="3"] .tps-article-nav-link{
  padding-left: 1.15rem;
}

.tps-article{
  position: relative;
  border-radius: 1.1rem;
  border: 1px solid var(--tps-border);
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  padding: 1.75rem 1.6rem 1.8rem;
  overflow: visible;
}

@media (max-width: 767.98px){
  .tps-article{
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
}

.tps-article::after{
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -70px;
  height: 220px;
  pointer-events: none;
  z-index: -1;
  background-image:
    conic-gradient(from 135deg at 10% 0,
      color-mix(in oklab, var(--tps-accent) 10%, transparent) 0 90deg,
      transparent 90deg 360deg),
    conic-gradient(from 215deg at 65% 8%,
      color-mix(in oklab, var(--tps-accent) 8%, transparent) 0 90deg,
      transparent 90deg 360deg),
    conic-gradient(from 165deg at 35% 22%,
      color-mix(in oklab, var(--tps-grape) 10%, transparent) 0 90deg,
      transparent 90deg 360deg),
    conic-gradient(from 180deg at 88% 55%,
      color-mix(in oklab, var(--tps-accent) 6%, transparent) 0 90deg,
      transparent 90deg 360deg);
  background-repeat: no-repeat;
  background-size: 120px 120px, 170px 170px, 110px 110px, 150px 150px;
  background-position: 4% 0, 55% 18%, 30% 40%, 88% 10%;
  opacity: 0.65;
}

@media (min-width: 992px){
  .tps-article{
    padding: 2.1rem 2.1rem 2.25rem;
  }
}

.tps-article .article-header{
  margin-bottom: 1.4rem;
}

.tps-article .article-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--tps-primary) 9%, white);
  color: var(--tps-accent-2);
}

.tps-article .article-badge-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tps-secondary, #b2e03d);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--tps-secondary) 25%, transparent);
}

.tps-article .article-title{
  margin: 0.9rem 0 0.5rem;
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 600;
  color: color-mix(in oklab, var(--tps-accent) 20%, #020617);
}

@media (min-width: 768px){
  .tps-article .article-title{
    font-size: 2.2rem;
  }
}

.tps-article .article-lead{
  margin: 0;
  color: var(--tps-muted, #6b7280);
  font-size: 0.98rem;
  line-height: 1.7;
}

.tps-article .article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--tps-muted, #6b7280);
}

.tps-article .article-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tps-article .article-meta-label{
  font-weight: 500;
  color: #4b5563;
}

.tps-article .article-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
  align-items: center;
}

.tps-article .article-tags-label{
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tps-muted, #6b7280);
  margin-right: 0.15rem;
}

.tps-article .article-tags-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tps-article .article-tag{
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: color-mix(in oklab, var(--tps-primary) 5%, white);
  border: 1px solid var(--tps-border-2);
  color: color-mix(in oklab, var(--tps-accent) 20%, #111827);
}

.tps-article .article-cover{
  margin: 1.4rem 0 1.5rem;
}

.tps-article .article-cover figure{
  margin: 0;
}

.tps-article .article-cover img{
  width: 100%;
  display: block;
  border-radius: 0.95rem;
  border: 1px solid var(--tps-border-3);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.tps-article .article-body{
  margin-top: 0;
}

.tps-typo{
  font-size: 1rem;
  line-height: 1.8;
  color: #111827;
}

.tps-typo > *:last-child{
  margin-bottom: 0 !important;
}

.tps-typo h1,
.tps-typo h2,
.tps-typo h3,
.tps-typo h4,
.tps-typo h5,
.tps-typo h6{
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1.4rem;
  margin-bottom: 0.7rem;
  color: color-mix(in oklab, var(--tps-accent) 26%, #020617);
}

.tps-typo h1{
  font-size: 2.1rem;
}

.tps-typo h2{
  font-size: 1.8rem;
}

.tps-typo h3{
  font-size: 1.4rem;
}

.tps-typo h4{
  font-size: 1.25rem;
}

.tps-typo h5{
  font-size: 1.05rem;
}

.tps-typo h6{
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tps-typo > h1:first-child,
.tps-typo > h2:first-child,
.tps-typo > h3:first-child{
  margin-top: 0;
}

@keyframes tpsHeadingPulse{
  0%{
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--tps-accent) 55%, transparent);
    background-color: color-mix(in oklab, var(--tps-accent) 10%, transparent);
    outline-color: color-mix(in oklab, var(--tps-accent) 55%, transparent);
  }
  45%{
    box-shadow: 0 0 0 14px transparent;
    background-color: transparent;
    outline-color: transparent;
  }
  70%{
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--tps-accent) 45%, transparent);
    background-color: color-mix(in oklab, var(--tps-accent) 8%, transparent);
    outline-color: color-mix(in oklab, var(--tps-accent) 45%, transparent);
  }
  100%{
    box-shadow: 0 0 0 12px transparent;
    background-color: transparent;
    outline-color: transparent;
  }
}

.tps-typo h2.is-pulse,
.tps-typo h3.is-pulse,
.tps-typo h4.is-pulse,
.tps-typo h5.is-pulse,
.tps-typo h6.is-pulse{
  border-radius: 0.6rem;
  outline: 2px solid transparent;
  outline-offset: 0.18em;
  animation: tpsHeadingPulse 1.4s ease-in-out 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tps-typo p{
  margin: 0 0 0.95rem;
  font-size: 0.9rem;
  line-height: 1.35rem;
}

.tps-typo p + p{
  margin-top: -0.1rem;
}

.tps-typo ul,
.tps-typo ol{
  margin: 0.3rem 0 1.05rem 1.8rem;
  padding-left: 0.3rem;
}

.tps-typo ul ul,
.tps-typo ol ol,
.tps-typo ul ol,
.tps-typo ol ul{
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
}

.tps-typo li{
  margin: 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.35rem;
}

.tps-typo ul li::marker,
.tps-typo ol li::marker{
  color: var(--tps-accent);
  font-size: 1.15em;
}

.tps-typo a{
  color: var(--tps-accent, #7c3aed);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--tps-accent) 35%, transparent);
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.tps-typo a:hover{
  color: var(--tps-accent-2, #5b21b6);
  border-bottom-color: color-mix(in oklab, var(--tps-accent-2) 50%, transparent);
  background: color-mix(in oklab, var(--tps-primary) 7%, white);
}

.tps-typo strong{
  font-weight: 650;
}

.tps-typo em{
  font-style: italic;
}

.tps-typo mark{
  background: color-mix(in oklab, var(--tps-secondary, #b2e03d) 25%, #fefce8);
  padding: 0.05em 0.18em;
  border-radius: 0.25em;
}

.tps-typo .marker{
  display: inline-block;
  background: color-mix(in oklab, var(--tps-secondary, #b2e03d) 25%, #fefce8);
  padding: 0.05em 0.18em;
  border-radius: 0.25em;
}

.tps-typo big{
  font-size: 1.06em;
  font-weight: 500;
}

.tps-typo small{
  font-size: 0.8em;
  color: var(--tps-muted, #6b7280);
}

.tps-typo sup{
  font-size: 0.7em;
  vertical-align: super;
}

.tps-typo sub{
  font-size: 0.75em;
  vertical-align: sub;
}

.tps-typo blockquote{
  margin: 1.7rem 0;
  padding: 0.9rem 1.1rem 0.95rem 1.2rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in oklab, var(--tps-accent) 18%, transparent);
  background: color-mix(in oklab, var(--tps-accent) 1%, #ffffff);
  position: relative;
  font-size: 0.98rem;
  color: #111827;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tps-typo blockquote::before{
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  bottom: 0.8rem;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--tps-accent),
    color-mix(in oklab, var(--tps-accent) 70%, transparent)
  );
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tps-accent) 18%, transparent);
  z-index: 1;
}

.tps-typo blockquote::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--tps-accent) 4%, transparent),
    color-mix(in oklab, var(--tps-accent) 4%, transparent) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
}

.tps-typo blockquote > p{
  position: relative;
  margin-left: 1.4rem;
  margin-bottom: 0.35rem;
  z-index: 1;
}

.tps-typo blockquote > p:last-child{
  margin-bottom: 0;
}

.tps-typo blockquote cite{
  display: block;
  margin-top: 0.25rem;
  margin-left: 1.4rem;
  font-size: 0.78rem;
  color: var(--tps-muted, #6b7280);
  position: relative;
  z-index: 1;
}

.tps-typo q{
  quotes: "«" "»" "„" "“";
}

.tps-typo q::before{
  content: open-quote;
}

.tps-typo q::after{
  content: close-quote;
}

.tps-typo hr{
  border: 0;
  border-top: 1px solid var(--tps-border-2);
  margin: 2rem 0 1.6rem;
}

.tps-typo code,
.tps-typo tt,
.tps-typo kbd,
.tps-typo samp,
.tps-typo var{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

.tps-typo code{
  font-size: 0.88em;
  background: color-mix(in oklab, var(--tps-primary) 8%, white);
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
  border: 1px solid color-mix(in oklab, var(--tps-primary) 28%, white);
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.tps-typo code.tps-code-block{
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.86rem;
  line-height: 1.7;
  background: #020617;
  color: #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.95rem 1rem;
  padding-right: 10%;
  margin: 1.3rem 0 1.4rem;
  border: 1px solid color-mix(in oklab, #020617 70%, var(--tps-primary) 30%);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: none;
}

.tps-typo kbd{
  font-size: 0.85em;
  padding: 0.16em 0.5em;
  border-radius: 0.3em;
  border: 1px solid var(--tps-border-2);
  background: #f9fafb;
  color: #111827;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.tps-typo samp{
  font-size: 0.9em;
  color: color-mix(in oklab, #111827 80%, var(--tps-muted, #6b7280) 20%);
}

.tps-typo var{
  font-style: italic;
  font-size: 0.9em;
  color: color-mix(in oklab, var(--tps-accent) 20%, #111827);
}

.tps-typo pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  background: #020617;
  color: #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.95rem 1rem;
  margin: 1.3rem 0 1.4rem;
  overflow: auto;
  border: 1px solid color-mix(in oklab, #020617 70%, var(--tps-primary) 30%);
}

.tps-typo pre code{
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  white-space: pre;
  word-break: normal;
  max-width: none;
}

.tps-typo del{
  text-decoration: line-through;
  color: color-mix(in oklab, #9ca3af 80%, #ef4444 20%);
}

.tps-typo ins{
  text-decoration: none;
  background: color-mix(in oklab, #22c55e 10%, #ecfdf3);
  padding: 0.05em 0.18em;
  border-radius: 0.18em;
}

.tps-typo cite{
  font-style: italic;
  color: var(--tps-muted, #6b7280);
}

.tps-typo img{
  max-width: 100%;
  height: auto;
  border-radius: 0.85rem;
  display: block;
}

.tps-typo figure{
  margin: 1.4rem auto;
  text-align: center;
}

.tps-typo figure img{
  margin: 0 auto 0.55rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  border: 1px solid var(--tps-border-3);
}

.tps-typo figcaption{
  font-size: 0.8rem;
  color: var(--tps-muted, #6b7280);
}

.tps-typo center{
  display: block;
  text-align: center;
}

.tps-typo-table-wrap{
  margin: 1.4rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tps-typo table{
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  margin: 0;
  border-radius: 0.9rem;
  border: 1px solid var(--tps-border);
  background: #ffffff;
  overflow: hidden;
}

.tps-typo thead{
  background: color-mix(in oklab, var(--tps-primary) 10%, white);
}

.tps-typo th,
.tps-typo td{
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid.var(--tps-border-2);
}

.tps-typo th{
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--tps-accent) 25%, #020617);
  white-space: nowrap;
}

.tps-typo tbody tr:nth-child(2n+1){
  background: color-mix(in oklab, var(--tps-primary) 4%, white);
}

.tps-typo tr:last-child td{
  border-bottom: 0;
}

.tps-typo thead.tr:first-child th:first-child{
  border-top-left-radius: 0.9rem;
}

.tps-typo thead.tr:first-child th:last-child{
  border-top-right-radius: 0.9rem;
}

.tps-typo tbody tr:last-child td:first-child{
  border-bottom-left-radius: 0.9rem;
}

.tps-typo tbody tr:last-child td:last-child{
  border-bottom-right-radius: 0.9rem;
}

.tps-article .article-footer{
  margin-top: 2.2rem;
  border-top: 1px solid var(--tps-border-2);
  padding-top: 1.4rem;
}

.tps-article .article-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.tps-article .article-badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: color-mix(in oklab, var(--tps-primary) 6%, white);
  color: color-mix(in oklab, var(--tps-accent) 20%, #111827);
}

.tps-article .article-keywords{
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--tps-muted) 75%, #9ca3af);
  opacity: 0.9;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 0.1rem;
  scrollbar-width: thin;
}

.tps-article .article-keywords::-webkit-scrollbar{
  height: 4px;
}

.tps-article .article-keywords::-webkit-scrollbar-track{
  background: transparent;
}

.tps-article .article-keywords::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--tps-primary) 25%, transparent);
  border-radius: 999px;
}

.tps-article .article-keywords-label{
  font-weight: 500;
  margin-right: 0.25rem;
}

.tps-article-navpost{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.9rem;
  border: 1px solid var(--tps-border);
  background: #ffffff;
  text-decoration: none;
  color: #111827;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    background-color 0.14s ease;
}

.tps-article-navpost:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in oklab, var(--tps-primary) 25%, var(--tps-border));
  background: color-mix(in oklab, var(--tps-primary) 5%, #ffffff);
}

.tps-article-navpost-thumb{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 0.7rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--tps-primary) 6%, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tps-article-navpost-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tps-article-navpost-body{
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  align-items: flex-start;
  flex: 1;
}

.tps-article-navpost-label{
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--tps-muted, #6b7280);
}

.tps-article-navpost-title{
  font-size: 0.9rem;
  font-weight: 550;
  color: color-mix(in oklab, var(--tps-accent) 18%, #020617);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tps-article-navpost-arrow{
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--tps-muted, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tps-article-navpost:hover .tps-article-navpost-arrow{
  color: var(--tps-accent-2);
}

.tps-article-navpost--center{
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 0.4rem;
}

.tps-article-navpost-icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--tps-border-3);
  color: var(--tps-accent-2);
  font-size: 1.6rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.tps-article-navpost--center:hover{
  background: color-mix(in oklab, var(--tps-primary) 5%, #ffffff);
}

.tps-article-navpost--center:hover .tps-article-navpost-icon{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border-color: color-mix(in oklab, var(--tps-primary) 40%, var(--tps-border-3));
  color: color-mix(in oklab, var(--tps-accent) 15%, #020617);
}

.tps-article-navpost--center .tps-article-navpost-body{
  align-items: center;
}

@media (max-width: 767.98px){
  .tps-article-navpost{
    margin-bottom: 0.4rem;
  }

  .tps-article-layout > aside{
    display: none;
  }

  .tps-article-page{
    padding-bottom: 5rem;
    overflow-x: hidden;
  }

  .tps-article::after{
    left: 0;
    right: 0;
  }

  .tps-article-mobile-nav{
    display: block;
  }
}

.tps-article .article-title,
.tps-typo h1,
.tps-typo h2,
.tps-typo h3,
.tps-typo h4,
.tps-typo h5,
.tps-typo h6{
  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

/* ========================================================================== */
/* END BLOCK: tps-article-page, tps-article-nav, tps-article-mobile-nav, tps-article, tps-typo */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-articles, isotope equal-height fix, filters, article cards, media, badges, variants */
/* Isotope grid item heights, filter pills, article card layout, hover effects, compact/side variants */
/* ========================================================================== */

@media (min-width: 768px){
  .tps-articles .isotope-layout .isotope-container .tps-article-item{
    height: 460px;
  }

  .tps-articles .isotope-layout .isotope-container .tps-article-item > .tps-article-card{
    height: 100%;
  }
}

@media (min-width: 1200px){
  .tps-articles .isotope-layout .isotope-container .tps-article-item{
    height: 480px;
  }
}

.tps-articles .tps-articles-filters{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
  padding: 0;
  list-style: none;
}

@media (max-width: 768px){
  .tps-articles .tps-articles-filters{
    gap: 8px;
    margin-bottom: 32px;
  }
}

.tps-articles .tps-articles-filters li{
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

@media (max-width: 768px){
  .tps-articles .tps-articles-filters li{
    padding: 8px 16px;
    font-size: 13px;
  }
}

.tps-articles .tps-articles-filters li:hover{
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.tps-articles .tps-articles-filters li.filter-active{
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.tps-articles .tps-article-card{
  background-color: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 80%);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  margin: 0 !important;
  position: relative;
}

.tps-articles .tps-article-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tps-accent, var(--accent-color)), transparent 80%);
  border-color: color-mix(in srgb, var(--tps-accent, var(--accent-color)), transparent 65%);
}

.tps-articles .tps-article-media{
  position: relative;
  overflow: hidden;
  height: 240px;
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  line-height: 0;
}

.tps-articles .tps-article-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  vertical-align: middle;
}

.tps-articles .tps-article-card:hover .tps-article-media img{
  transform: scale(1.05);
}

.tps-articles .tps-article-card--img-mini .tps-article-media{
  height: 200px;
}

.tps-articles .tps-article-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 60%);
  z-index: 6;
  pointer-events: none;
}

.tps-articles .tps-article-body{
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tps-articles .tps-article-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tps-articles .tps-article-category{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tps-articles .tps-article-title{
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--heading-color);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tps-articles .tps-article-excerpt{
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin: 0 0 16px;
  line-height: 1.6;
  flex-grow: 1;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.tps-articles .tps-article-submeta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  font-size: 12px;
  font-weight: 650;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tps-articles .tps-article-rating{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  color: color-mix(in srgb, var(--accent-color), black 10%);
  line-height: 1;
  white-space: nowrap;
}

.tps-articles .tps-article-rating i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  position: relative;
  top: 0.5px;
}

.tps-articles .tps-article-footer{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tps-articles .tps-article-views{
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tps-articles .tps-article-views small{
  font-weight: 650;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.tps-articles .tps-article-cta{
  font-size: 14px;
  font-weight: 600;
  color: var(--default-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 7;
}

.tps-articles .tps-article-cta i{
  font-size: 16px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tps-articles .tps-article-card:hover .tps-article-cta{
  color: var(--accent-color);
}

.tps-articles .tps-article-card:hover .tps-article-cta i{
  transform: translateX(4px);
}

.tps-articles .tps-article-stretched{
  position: absolute;
  inset: 0;
  z-index: 5;
}

.tps-articles .tps-article-title,
.tps-articles .tps-article-title a{
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.tps-articles .tps-article-card:hover .tps-article-title,
.tps-articles .tps-article-card:hover .tps-article-title a{
  color: var(--accent-color);
  text-decoration: none;
}

.tps-articles .tps-article-media,
.tps-articles .tps-article-body{
  position: relative;
  z-index: 2;
}

.tps-articles .tps-article-card--mini .tps-article-media{
  height: 150px;
}

.tps-articles .tps-article-card--mini .tps-article-body{
  padding: 16px;
}

.tps-articles .tps-article-card--mini .tps-article-title{
  font-size: 16px;
  margin: 0 0 10px;
  line-height: 1.25;
}

.tps-articles .tps-article-card--side-md3{
  display: flex;
  flex-direction: column;
  height: auto !important;
  align-self: flex-start;
}

.tps-articles .tps-article-card--side-md3 .tps-article-media{
  height: 140px;
}

.tps-articles .tps-article-card--side-md3 .tps-article-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tps-articles .tps-article-card--side-md3 .tps-article-badge{
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  font-size: 10px;
  border-radius: 6px;
}

@media (min-width: 768px){
  .tps-articles .tps-article-card--side-md3{
    flex-direction: row;
    align-items: stretch;
  }

  .tps-articles .tps-article-card--side-md3 .tps-article-media{
    flex: 0 0 auto;
    width: clamp(104px, 30%, 160px);
    height: auto;
    min-height: 110px;
  }

  .tps-articles .tps-article-card--side-md3 .tps-article-body{
    flex: 1 1 auto;
    min-width: 0;
  }
}

.tps-articles .tps-article-card--side-md3 .tps-article-body{
  padding: 14px;
}

.tps-articles .tps-article-card--side-md3 .tps-article-meta{
  display: none;
}

.tps-articles .tps-article-card--side-md3 .tps-article-submeta{
  margin: -2px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tps-articles .tps-article-card--side-md3 .tps-article-title{
  font-size: 15px;
  margin: 0;
  line-height: 1.25;
}

.tps-articles .tps-article-card--side-lg8c{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-media{
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  height: auto;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-badge{
  display: none;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-body{
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-meta{
  display: none;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-submeta{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-submeta .sub-left,
.tps-articles .tps-article-card--side-lg8c .tps-article-submeta .sub-right{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  white-space: nowrap;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-submeta .sub-right{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-end;
}

.tps-articles .tps-article-card--side-lg8c .tps-article-title{
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================================== */
/* END BLOCK: tps-articles, isotope equal-height fix, filters, article cards, media, badges, variants */
/* ========================================================================== */

/* ========================================================================== */
/* BLOCK: tps-search-page, search hero, searchbar, results grid, empty state */
/* Search page layout, hero banner, SoftSearchForm styling, results blocks */
/* ========================================================================== */

.tps-search-page{
  --tps-sp-surface: rgba(255, 255, 255, 0.72);
  --tps-sp-surface-2: rgba(255, 255, 255, 0.88);
  --tps-sp-ink: color-mix(in oklab, #0b1220 86%, var(--tps-primary));
  --tps-sp-muted: color-mix(in oklab, var(--tps-muted) 88%, var(--tps-primary));
  --tps-sp-b: var(--tps-border);
  --tps-sp-b2: var(--tps-border-2);
  --tps-sp-b3: var(--tps-border-3);
  padding: 28px 0 36px 0;
}

.tps-search-page .tps-search-hero{
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--tps-sp-b);
  background:
    radial-gradient(
      1200px 420px at 10% 0%,
      color-mix(in oklab, var(--tps-primary) 18%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 360px at 90% 20%,
      color-mix(in oklab, var(--tps-grape) 16%, transparent) 0%,
      transparent 62%
    ),
    var(--tps-sp-surface);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.10);
  overflow: hidden;
}

.tps-search-page .tps-search-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.tps-search-page .tps-search-hero-inner{
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 991.98px){
  .tps-search-page .tps-search-hero-inner{
    grid-template-columns: 1fr;
  }
}

.tps-search-page .tps-search-hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tps-sp-b2);
  background: rgba(255, 255, 255, 0.65);
  color: var(--tps-sp-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.tps-search-page .tps-search-hero-badge .tps-ico{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--tps-primary) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--tps-primary) 22%, transparent);
  color: var(--tps-primary);
}

.tps-search-page .tps-search-hero-title{
  margin: 12px 0 6px 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  color: var(--tps-sp-ink);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.tps-search-page .tps-search-hero-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tps-sp-muted);
  font-weight: 400;
}

.tps-search-page .tps-searchbar{
  margin: 18px 0 18px 0;
  border-radius: 16px;
  border: 1px solid var(--tps-sp-b);
  background: var(--tps-sp-surface-2);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
  padding: 10px;
}

.tps-search-page .tps-searchbar--hero{
  border-radius: 16px;
  border: 1px solid var(--tps-sp-b2);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

.tps-search-page form[data-live="softsearch"]{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.tps-search-page form[data-live="softsearch"] .search-input{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--tps-sp-ink);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  box-shadow: none;
}

.tps-search-page form[data-live="softsearch"] .search-input:focus{
  outline: none;
  box-shadow: none;
}

.tps-search-page form[data-live="softsearch"] .search-btn{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--tps-primary) 38%, white);
  background: color-mix(in oklab, var(--tps-primary) 18%, white);
  color: var(--tps-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.tps-search-page form[data-live="softsearch"] .search-btn:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--tps-primary) 22%, white);
  border-color: color-mix(in oklab, var(--tps-primary) 46%, white);
}

.tps-search-page .tps-search-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.tps-search-page .tps-search-head-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--tps-sp-ink);
  font-weight: 600;
}

.tps-search-page .tps-search-q{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--tps-sp-muted);
  font-weight: 400;
  margin-top: 6px;
}

.tps-search-page .tps-search-q .tps-search-qval{
  color: var(--tps-primary);
  font-weight: 600;
}

.tps-search-page .tps-search-total{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tps-sp-b2);
  background: rgba(255, 255, 255, 0.70);
  color: var(--tps-sp-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tps-search-page .tps-search-total strong{
  color: var(--tps-sp-ink);
  font-weight: 600;
}

.tps-search-page .tps-search-suggest{
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--tps-primary) 18%, white);
  background: color-mix(in oklab, var(--tps-primary) 8%, white);
  padding: 12px 14px;
  margin: 0 0 14px 0;
  color: var(--tps-sp-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}

.tps-search-page .tps-search-suggest strong{
  color: var(--tps-primary);
  font-weight: 600;
}

.tps-search-page .tps-sr-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 991.98px){
  .tps-search-page .tps-sr-grid{
    grid-template-columns: 1fr;
  }
}

.tps-search-page .tps-sr-block{
  border-radius: 16px;
  border: 1px solid var(--tps-sp-b);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.06);
  padding: 12px;
}

.tps-search-page .tps-sr-title{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px 10px;
  border-bottom: 1px solid var(--tps-sp-b3);
  color: var(--tps-sp-ink);
  font-size: 14px;
  font-weight: 600;
}

.tps-search-page .tps-sr-hico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--tps-primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--tps-primary) 16%, transparent);
}

.tps-search-page .tps-sr-hico i{
  color: var(--tps-accent);
  font-size: 16px;
  line-height: 0;
}

.tps-search-page .tps-sr-htext{
  flex: 1 1 auto;
  min-width: 0;
}

.tps-search-page .tps-sr-count{
  flex: 0 0 auto;
  color: var(--tps-sp-muted);
  font-weight: 500;
  font-size: 12px;
}

.tps-search-page .tps-sr-ul{
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tps-search-page .tps-sr-li{
  margin: 0;
  padding: 0;
}

.tps-search-page .tps-sr-a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--tps-primary) 10%, white);
  background: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.tps-search-page .tps-sr-a:hover{
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.78);
  border-color: color-mix(in oklab, var(--tps-primary) 22%, white);
}

.tps-search-page .tps-sr-txt{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tps-sp-ink);
  font-size: 13px;
  font-weight: 400;
}

.tps-search-page .tps-sr-arr{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--tps-primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--tps-primary) 16%, transparent);
  color: var(--tps-primary);
}

.tps-search-page .tps-sr-arr i{
  font-size: 14px;
  line-height: 0;
}

.tps-search-page .tps-search-empty{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid var(--tps-sp-b);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.06);
  padding: 16px;
  color: var(--tps-sp-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

.tps-search-page .tps-search-empty strong{
  color: var(--tps-sp-ink);
  font-weight: 600;
}

.tps-search-page .softsearch-form{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--tps-sp-b);
  background: var(--tps-sp-surface-2);
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
}

.tps-search-page .tps-searchbar--hero .softsearch-form{
  border: 1px solid var(--tps-sp-b2);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

.tps-search-page .softsearch-form input[type="search"]{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--tps-sp-ink);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.tps-search-page .softsearch-form input[type="search"]::placeholder{
  color: color-mix(in oklab, var(--tps-sp-muted) 78%, white);
}

.tps-search-page .softsearch-form input[type="search"]:focus{
  outline: none;
  box-shadow: none;
}

.tps-search-page .softsearch-form button[type="submit"]{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--tps-primary) 38%, white);
  background: color-mix(in oklab, var(--tps-primary) 18%, white);
  color: var(--tps-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.tps-search-page .softsearch-form button[type="submit"]:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--tps-primary) 22%, white);
  border-color: color-mix(in oklab, var(--tps-primary) 46%, white);
}

.tps-search-page .softsearch-form button[type="submit"]:active{
  transform: translateY(0);
}

/* ========================================================================== */
/* END BLOCK: tps-search-page, search hero, searchbar, results grid, empty state */
/* ========================================================================== */

/* ========================================================================== */
/* tps-live, live search dropdown container, close button, suggestion text, */
/* results columns grid, section titles, item list, item link hover states, */
/* item title truncation, item icon chip, footer "all results" button, mobile */
/* static dropdown positioning */
/* ========================================================================== */

.tps-live{
  position: relative;
}

.tps-live .tps-livebox{
  --tps-live-accent: var(--tps-accent, var(--accent-color, #7c3aed));
  --tps-live-contrast: var(--contrast-color, #ffffff);
  --tps-live-default: var(--default-color, #cbd5e1);

  --tps-live-bg: rgba(0, 0, 0, 0.58);
  --tps-live-border: rgba(255, 255, 255, 0.18);
  --tps-live-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);

  --tps-live-text: color-mix(in srgb, var(--tps-live-contrast), transparent 12%);
  --tps-live-muted: color-mix(in srgb, var(--tps-live-default), transparent 20%);

  --tps-live-item-bg: rgba(255, 255, 255, 0.07);
  --tps-live-item-b: rgba(255, 255, 255, 0.10);
  --tps-live-item-bg-h: rgba(255, 255, 255, 0.10);
  --tps-live-item-b-h: color-mix(in srgb, var(--tps-live-accent), transparent 58%);

  --tps-live-radius: 14px;

  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 50;

  background: var(--tps-live-bg);
  border: 1px solid var(--tps-live-border);
  border-radius: var(--tps-live-radius);

  backdrop-filter: blur(14px);
  box-shadow: var(--tps-live-shadow);

  padding: 10px;
  display: none;
}

.tps-live.is-open .tps-livebox{
  display: block;
}

.tps-live .tps-liveclose{
  position: absolute;
  top: -13px;
  right: -13px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--tps-live-contrast);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.tps-live .tps-liveclose:hover{
  background: rgba(0, 0, 0, 0.72);
  border-color: color-mix(in srgb, var(--tps-live-accent), transparent 55%);
  transform: translateY(-1px);
}

.tps-live .tps-liveclose i{
  font-size: 13px;
  line-height: 0;
}

.tps-live .tps-livesuggest{
  margin: 0 0 8px 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--tps-live-muted);
}

.tps-live .tps-livesuggest strong{
  color: var(--tps-live-contrast);
  font-weight: 800;
}

.tps-live .tps-livegrid{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tps-live .tps-livecol{
  flex: 1 1 210px;
  min-width: 190px;
}

.tps-live .tps-livetitle{
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: color-mix(in srgb, var(--tps-live-contrast), transparent 30%);
  margin: 0 2px 6px 2px;
}

.tps-live .tps-livetitle i{
  margin-right: 8px;
  color: var(--tps-live-accent);
  font-size: 14px;
  line-height: 0;
}

.tps-live .tps-livelist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tps-live .tps-liveitem a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--tps-live-text);
  background: var(--tps-live-item-bg);
  border: 1px solid var(--tps-live-item-b);
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.tps-live .tps-liveitem a:hover{
  background: var(--tps-live-item-bg-h);
  border-color: var(--tps-live-item-b-h);
  transform: translateY(-1px);
}

.tps-live .tps-liveitem .tps-liveitem-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02px;
}

.tps-live .tps-liveitem .tps-liveitem-ico{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tps-live-accent), transparent 84%);
  border: 1px solid color-mix(in srgb, var(--tps-live-accent), transparent 68%);
  color: var(--tps-live-contrast);
}

.tps-live .tps-liveitem .tps-liveitem-ico i{
  font-size: 13px;
  line-height: 0;
}

.tps-live .tps-livefoot{
  margin-top: 8px;
}

.tps-live .tps-liveall{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  color: var(--tps-live-contrast);
  border: 1px solid color-mix(in srgb, var(--tps-live-accent), transparent 62%);
  background: color-mix(in srgb, var(--tps-live-accent), transparent 16%);
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.tps-live .tps-liveall:hover{
  background: color-mix(in srgb, var(--tps-live-accent), black 10%);
  transform: translateY(-1px);
}

@media (max-width: 576px){
  .tps-live .tps-livebox{
    position: static;
    top: auto;
    margin-top: 10px;
  }

  .tps-live .tps-liveclose{
    top: -12px;
    right: -12px;
  }
}

/* ========================================================================== */
/* END tps-live
/* ========================================================================== */

/* ========================================================================== */
/* softsearch-form.softsearch-modal-trigger, modal trigger search form, input, */
/* placeholder, submit button, hover/active states */
/* ========================================================================== */

.softsearch-form.softsearch-modal-trigger{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--tps-border);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 14px rgba(30, 10, 60, 0.1), 0 0 0 2px rgba(111, 66, 193, 0.12);
  margin: 0;
}

.softsearch-form.softsearch-modal-trigger input[type="search"]{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: color-mix(in oklab, #0b1220 86%, var(--tps-primary));
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-shadow: none;
}

.softsearch-form.softsearch-modal-trigger input[type="search"]::placeholder{
  color: color-mix(in oklab, var(--tps-muted) 82%, var(--tps-primary));
}

.softsearch-form.softsearch-modal-trigger button{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--tps-accent), var(--tps-grape));
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(30, 10, 60, 0.25), 0 0 0 4px rgba(111, 66, 193, 0.12);
  transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.softsearch-form.softsearch-modal-trigger button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(30, 10, 60, 0.32), 0 0 0 4px rgba(129, 74, 210, 0.24);
  opacity: 0.96;
}

.softsearch-form.softsearch-modal-trigger button:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(30, 10, 60, 0.28), 0 0 0 3px rgba(111, 66, 193, 0.22);
}

/* ========================================================================== */
/* END softsearch-form.softsearch-modal-trigger                                */
/* ========================================================================== */

/* ========================================================================== */
/* tps-live-modal, softsearch modal, modal content, header, title, close btn, */
/* search form, footer results, suggest, hide section title, list items, */
/* close button, sticky top, scrollable results */
/* ========================================================================== */

.tps-live-modal .modal-content{
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}

.tps-live-modal .modal-header{
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tps-live-modal .modal-title{
  color: color-mix(in srgb, var(--contrast-color), transparent 12%);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tps-live-modal .btn-close{
  filter: invert(1);
  opacity: 0.8;
}

.tps-live-modal .btn-close:hover{
  opacity: 1;
}

.tps-live-modal .softsearch-form.tps-live--modal{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.tps-live-modal .softsearch-form.tps-live--modal input[type="search"]{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: color-mix(in srgb, var(--contrast-color), transparent 10%);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  box-shadow: none;
}

.tps-live-modal .softsearch-form.tps-live--modal input[type="search"]::placeholder{
  color: rgba(255, 255, 255, 0.62);
}

.tps-live-modal .softsearch-form.tps-live--modal input[type="search"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 75%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 45%);
}

.tps-live-modal .softsearch-form.tps-live--modal .search-btn{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 55%);
  background: color-mix(in srgb, var(--accent-color), transparent 18%);
  color: var(--contrast-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.tps-live-modal .softsearch-form.tps-live--modal .search-btn:hover{
  background: color-mix(in srgb, var(--accent-color), black 12%);
  transform: translateY(-1px);
}

.tps-live-modal .modal-footer.tps-live-modal-footer{
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.tps-live-modal .modal-footer.tps-live-modal-footer .tps-livebox{
  position: static;
  left: auto;
  right: auto;
  top: auto;
  display: none;
  padding: 10px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}

.tps-live-modal .modal-footer.tps-live-modal-footer .tps-livebox.is-open{
  display: block;
}

.tps-live-modal .tps-livesuggest{
  align-items: center;
  color: #fff;
  line-height: 1.2;
  padding: 10px 12px;
}

.tps-live-modal .tps-livesuggest::before{
  align-self: center;
}

.tps-live-modal .tps-livesuggest strong{
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

.tps-live-modal .tps-livesuggest strong{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tps-live-modal .tps-livetitle{
  display: none !important;
}

.tps-live-modal .tps-livelist{
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tps-live-modal .tps-liveitem{
  margin: 0;
  padding: 0;
}

.tps-live-modal .tps-liveitem > a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.tps-live-modal .tps-liveitem > a:hover{
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  transform: translateY(-1px);
}

.tps-live-modal .tps-liveitem-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.90);
  font-size: 13px;
  font-weight: 400;
}

.tps-live-modal .tps-liveitem-ico{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

.tps-live-modal .tps-liveitem-ico i{
  font-size: 14px;
  line-height: 0;
}

.tps-live-modal .tps-livebtn-close{
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: color-mix(in srgb, var(--contrast-color), transparent 10%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.tps-live-modal .tps-livebtn-close:hover{
  background: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  transform: translateY(-1px);
}

.tps-live-modal .modal-body{
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tps-live-modal .tps-live-modal-top{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(12px);
}

.tps-live-modal .tps-live-modal-results{
  padding: 12px;
  min-height: 0;
}

.tps-live-modal .tps-live-modal-results .tps-livebox{
  display: none;
}

.tps-live-modal .tps-live-modal-results .tps-livebox.is-open{
  display: block;
}

/* ========================================================================== */
/* END tps-live-modal                                                          */
/* ========================================================================== */

/* ========================================================================== */
/* tps-min3 (min length hint for search form)                                  */
/* ========================================================================== */

form.tps-min3 .tps-minhint{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}

form.tps-min3 .tps-minhint-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

form.tps-min3 .tps-minhint-text{
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

form.tps-min3.tps-min3--hint .tps-minhint{
  display: block;
}

form.tps-min3.tps-min3--hint input[type="search"],
form.tps-min3.tps-min3--hint input[type="text"]{
  border-color: color-mix(in oklab, var(--tps-primary) 28%, rgba(255,255,255,.18));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tps-primary) 18%, transparent);
}

form.tps-min3 .search-btn.is-disabled,
form.tps-min3 button[type="submit"].is-disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  filter: saturate(.85);
}

form.tps-min3[data-hint-place="bottom"] .tps-minhint,
form.tps-min3.tps-min3--bottom .tps-minhint{
  top: 100%;
  margin-top: 8px;
}

form.tps-min3[data-hint-place="top"] .tps-minhint,
form.tps-min3.tps-min3--top .tps-minhint{
  bottom: 100%;
  margin-bottom: 8px;
}

form.tps-min3:not([data-hint-place]) .tps-minhint{
  bottom: 100%;
  margin-bottom: 8px;
}

/* ========================================================================== */
/* END: tps-min3                                                              */
/* ========================================================================== */

/* ========================================================================== */
/* tps-modal-glass (Bootstrap 5 glass modal + demo UI kit inside modal)        */
/* ========================================================================== */

.modal.tps-modal-glass .modal-content{
  background: rgba(0,0,0,.58);
  border: 0;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 14px 44px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--tps-accent), transparent 78%),
    0 18px 60px color-mix(in srgb, var(--tps-accent), transparent 84%),
    0 6px 18px color-mix(in srgb, var(--tps-accent), transparent 88%);
  overflow: hidden;
}

.modal.tps-modal-glass .modal-header{
  border-bottom: 0;
  padding: 14px 16px;
}

.modal.tps-modal-glass .modal-title{
  color: color-mix(in srgb, var(--contrast-color, #fff), transparent 12%);
  font-weight: 600;
  letter-spacing: .2px;
}

.modal.tps-modal-glass .btn-close{
  filter: invert(1);
  opacity: .8;
}

.modal.tps-modal-glass .btn-close:hover{
  opacity: 1;
}

.modal.tps-modal-glass .modal-body{
  padding: 16px;
}

.modal.tps-modal-glass .modal-footer{
  border-top: 0;
  background: transparent;
  padding: 12px 16px;
  gap: 10px;
}

.modal.tps-modal-glass .modal-footer .btn{
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.modal.tps-modal-glass a.btn,
.modal.tps-modal-glass .modal-footer a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  line-height: 1.2;
}

.modal.tps-modal-glass a.btn.disabled,
.modal.tps-modal-glass a.btn[aria-disabled="true"]{
  pointer-events: none;
  opacity: .65;
}

.modal.tps-modal-glass .modal-footer .btn:focus{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, var(--tps-accent, #7c3aed)), transparent 75%);
}

.modal.tps-modal-glass .modal-footer .btn.btn-primary{
  border: 1px solid color-mix(in srgb, var(--accent-color, var(--tps-accent, #7c3aed)), transparent 55%);
  background: color-mix(in srgb, var(--accent-color, var(--tps-accent, #7c3aed)), transparent 18%);
  color: var(--contrast-color, #fff);
}

.modal.tps-modal-glass .modal-footer .btn.btn-primary:hover{
  background: color-mix(in srgb, var(--accent-color, var(--tps-accent, #7c3aed)), black 12%);
  transform: translateY(-1px);
}

.modal.tps-modal-glass .modal-footer .btn.btn-secondary{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: color-mix(in srgb, var(--contrast-color, #fff), transparent 10%);
}

.modal.tps-modal-glass .modal-footer .btn.btn-secondary:hover{
  background: rgba(255,255,255,.12);
  border-color: color-mix(in srgb, var(--accent-color, var(--tps-accent, #7c3aed)), transparent 55%);
  transform: translateY(-1px);
}

.modal.tps-modal-glass.show + .modal-backdrop{
  opacity: .55;
  background: #000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal.tps-modal-glass.tps-modal-glass--light .modal-content{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 14px 44px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 78%),
    0 18px 60px color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 90%);
}

.modal.tps-modal-glass.tps-modal-glass--light .modal-title{
  color: rgba(17,24,39,.92);
}

.modal.tps-modal-glass.tps-modal-glass--light .btn-close{
  filter: none;
  opacity: .75;
}

.modal.tps-modal-glass.tps-modal-glass--light .btn-close:hover{
  opacity: 1;
}

.modal.tps-modal-glass.tps-modal-glass--light.show + .modal-backdrop{
  opacity: .35;
  background: #000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal.tps-modal-glass.tps-modal-glass--light .modal-footer .btn.btn-primary,
.modal.tps-modal-glass.tps-modal-glass--light .modal-footer .btn.btn-success{
  color: #fff !important;
}

.modal.tps-modal-glass.tps-modal-glass--light .modal-footer .btn.btn-secondary{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92) !important;
}

.modal.tps-modal-glass.tps-modal-glass--light .modal-footer .btn.btn-secondary:hover{
  background: rgba(0,0,0,.05);
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 55%);
}

.tps-modal-glass .tps-ui-demo{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tps-modal-glass .tps-ui-demo .tps-ui-demo-title{
  margin: 0;
  padding: 0;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-ui-demo .tps-ui-demo-title{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-ui-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 992px){
  .tps-modal-glass .tps-ui-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.tps-modal-glass .tps-ui-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tps-modal-glass .tps-ui{
  --tps-ui-accent: var(--tps-accent, #7c3aed);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.tps-modal-glass.tps-modal-glass--light .tps-ui{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-ui__ico{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  position: relative;
  box-sizing: border-box;
}

.tps-modal-glass.tps-modal-glass--light .tps-ui__ico{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-ui__ico i{
  line-height: 0;
}

.tps-modal-glass .tps-ui__body{
  min-width: 0;
}

.tps-modal-glass .tps-ui__title{
  margin: 0;
  padding: 0;
  font-weight: 600;
  color: rgba(255,255,255,.94);
}

.tps-modal-glass.tps-modal-glass--light .tps-ui__title{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-ui__text{
  margin: 4px 0 0 0;
  padding: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.35;
}

.tps-modal-glass.tps-modal-glass--light .tps-ui__text{
  color: rgba(17,24,39,.74);
}

.tps-modal-glass .tps-ui--sm{
  padding: 10px 12px;
  border-radius: 12px;
}

.tps-modal-glass .tps-ui--sm .tps-ui__title{
  font-size: 13px;
}

.tps-modal-glass .tps-ui--sm .tps-ui__text{
  font-size: 12.5px;
}

.tps-modal-glass .tps-ui--sm .tps-ui__ico{
  width: 30px;
  height: 30px;
}

.tps-modal-glass .tps-ui--sm .tps-ui__ico i{
  font-size: 14px;
}

.tps-modal-glass .tps-ui--md{
  padding: 12px 14px;
  border-radius: 14px;
}

.tps-modal-glass .tps-ui--md .tps-ui__title{
  font-size: 14px;
}

.tps-modal-glass .tps-ui--md .tps-ui__text{
  font-size: 13px;
}

.tps-modal-glass .tps-ui--md .tps-ui__ico{
  width: 34px;
  height: 34px;
}

.tps-modal-glass .tps-ui--md .tps-ui__ico i{
  font-size: 16px;
}

.tps-modal-glass .tps-ui--lg{
  padding: 14px 16px;
  border-radius: 16px;
}

.tps-modal-glass .tps-ui--lg .tps-ui__title{
  font-size: 15px;
}

.tps-modal-glass .tps-ui--lg .tps-ui__text{
  font-size: 14px;
}

.tps-modal-glass .tps-ui--lg .tps-ui__ico{
  width: 40px;
  height: 40px;
}

.tps-modal-glass .tps-ui--lg .tps-ui__ico i{
  font-size: 18px;
}

.tps-modal-glass .tps-ui--success{
  --tps-ui-accent: var(--tps-success, #16a34a);
}

.tps-modal-glass .tps-ui--danger{
  --tps-ui-accent: var(--tps-danger, #ef4444);
}

.tps-modal-glass .tps-ui--warning{
  --tps-ui-accent: var(--tps-warning, #f59e0b);
}

.tps-modal-glass .tps-ui--info{
  --tps-ui-accent: var(--tps-info, #38bdf8);
}

.tps-modal-glass .tps-ui--neutral{
  --tps-ui-accent: rgba(255,255,255,.55);
}

.tps-modal-glass.tps-modal-glass--light .tps-ui--neutral{
  --tps-ui-accent: rgba(17,24,39,.35);
}

.tps-modal-glass .tps-ui--success,
.tps-modal-glass .tps-ui--danger,
.tps-modal-glass .tps-ui--warning,
.tps-modal-glass .tps-ui--info{
  border-color: color-mix(in srgb, var(--tps-ui-accent), transparent 60%);
  background: color-mix(in srgb, var(--tps-ui-accent), transparent 92%);
}

.tps-modal-glass .tps-ui--success .tps-ui__ico,
.tps-modal-glass .tps-ui--danger .tps-ui__ico,
.tps-modal-glass .tps-ui--warning .tps-ui__ico,
.tps-modal-glass .tps-ui--info .tps-ui__ico{
  border-color: color-mix(in srgb, var(--tps-ui-accent), transparent 55%);
  background: color-mix(in srgb, var(--tps-ui-accent), transparent 86%);
}

.tps-modal-glass .tps-ui__ico.tps-ico-spin{
  overflow: visible;
}

.tps-modal-glass .tps-ui__ico.tps-ico-spin::before{
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--tps-ui-accent), transparent 72%);
  border-top-color: color-mix(in srgb, var(--tps-ui-accent), transparent 8%);
  animation: tpsIcoSpin .9s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes tpsIcoSpin{
  to{
    transform: rotate(360deg);
  }
}

.tps-modal-glass .tps-ui--titleonly{
  align-items: center;
}

.tps-modal-glass .tps-ui--titleonly .tps-ui__text{
  display: none;
}

.tps-modal-glass .tps-ui--titleonly .tps-ui__title{
  margin: 0;
}

.tps-modal-glass .tps-ui--titleonly .tps-ui__body{
  display: flex;
  align-items: center;
  min-height: 0;
}

.tps-modal-glass .tps-badge{
  --tps-badge-accent: var(--tps-accent, #7c3aed);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tps-badge-accent), transparent 60%);
  background: color-mix(in srgb, var(--tps-badge-accent), transparent 88%);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .15px;
  white-space: nowrap;
}

.tps-modal-glass.tps-modal-glass--light .tps-badge{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-badge i{
  line-height: 0;
}

.tps-modal-glass .tps-badge--success{
  --tps-badge-accent: var(--tps-success, #16a34a);
}

.tps-modal-glass .tps-badge--danger{
  --tps-badge-accent: var(--tps-danger, #ef4444);
}

.tps-modal-glass .tps-badge--warning{
  --tps-badge-accent: var(--tps-warning, #f59e0b);
}

.tps-modal-glass .tps-badge--info{
  --tps-badge-accent: var(--tps-info, #38bdf8);
}

.tps-modal-glass .tps-badge--neutral{
  --tps-badge-accent: rgba(255,255,255,.55);
}

.tps-modal-glass.tps-modal-glass--light .tps-badge--neutral{
  --tps-badge-accent: rgba(17,24,39,.35);
}

.tps-modal-glass .tps-badge--sm{
  padding: 4px 10px;
  font-size: 12px;
}

.tps-modal-glass .tps-badge--md{
  padding: 5px 12px;
  font-size: 13px;
}

.tps-modal-glass .tps-badge--lg{
  padding: 7px 14px;
  font-size: 14px;
}

.tps-modal-glass .tps-note{
  --tps-note-accent: var(--tps-accent, #7c3aed);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-note{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-note__dot{
  min-width: 10px;
  min-height: 10px;
  border-radius: 999px;
  background: var(--tps-note-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tps-note-accent), transparent 72%);
}

.tps-modal-glass .tps-note__text{
  font-weight: 650;
  letter-spacing: .12px;
}

.tps-modal-glass .tps-note--success{
  --tps-note-accent: var(--tps-success, #16a34a);
}

.tps-modal-glass .tps-note--danger{
  --tps-note-accent: var(--tps-danger, #ef4444);
}

.tps-modal-glass .tps-note--warning{
  --tps-note-accent: var(--tps-warning, #f59e0b);
}

.tps-modal-glass .tps-note--info{
  --tps-note-accent: var(--tps-info, #38bdf8);
}

.tps-modal-glass .tps-note--sm{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12.5px;
}

.tps-modal-glass .tps-note--md{
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
}

.tps-modal-glass .tps-note--lg{
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
}

.tps-modal-glass .tps-empty{
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  text-align: center;
  color: rgba(255,255,255,.90);
}

.tps-modal-glass.tps-modal-glass--light .tps-empty{
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-empty__ico{
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
}

.tps-modal-glass.tps-modal-glass--light .tps-empty__ico{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
}

.tps-modal-glass .tps-empty__ico i{
  font-size: 22px;
  line-height: 0;
}

.tps-modal-glass .tps-empty__title{
  margin: 0;
  font-weight: 600;
  letter-spacing: .2px;
}

.tps-modal-glass .tps-empty__text{
  margin: 6px 0 0 0;
  color: rgba(255,255,255,.82);
}

.tps-modal-glass.tps-modal-glass--light .tps-empty__text{
  color: rgba(17,24,39,.70);
}

.tps-modal-glass .tps-empty--sm{
  padding: 12px;
  border-radius: 14px;
}

.tps-modal-glass .tps-empty--sm .tps-empty__title{
  font-size: 13px;
}

.tps-modal-glass .tps-empty--sm .tps-empty__text{
  font-size: 12.5px;
}

.tps-modal-glass .tps-empty--md{
  padding: 14px;
}

.tps-modal-glass .tps-empty--md .tps-empty__title{
  font-size: 14px;
}

.tps-modal-glass .tps-empty--md .tps-empty__text{
  font-size: 13px;
}

.tps-modal-glass .tps-empty--lg{
  padding: 16px;
  border-radius: 18px;
}

.tps-modal-glass .tps-empty--lg .tps-empty__title{
  font-size: 15px;
}

.tps-modal-glass .tps-empty--lg .tps-empty__text{
  font-size: 14px;
}

.tps-modal-glass .tps-custom-container{
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
}

.tps-modal-glass.tps-modal-glass--light .tps-custom-container{
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
}

.tps-modal-glass .tps-ui-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .15px;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
  text-decoration: none;
}

.tps-modal-glass.tps-modal-glass--light .tps-ui-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-ui-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 55%);
  transform: translateY(-1px);
}

.tps-modal-glass.tps-modal-glass--light .tps-ui-btn:hover{
  background: rgba(0,0,0,.05);
}

.tps-modal-glass .tps-ui-btn--accent{
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 55%);
  background: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 18%);
}

.tps-modal-glass .tps-ui-btn--accent:hover{
  background: color-mix(in srgb, var(--tps-accent, #7c3aed), black 12%);
}

.tps-modal-glass .tps-copy__btn{
  border-radius: 10px;
  height: 36px;
  padding: 0 12px;
}

.tps-modal-glass .tps-ui-btn--sm{
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
}

.tps-modal-glass .tps-ui-btn--md{
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

.tps-modal-glass .tps-ui-btn--lg{
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

.tps-modal-glass .tps-confirm{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-confirm{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-confirm__title{
  margin: 0;
  font-weight: 850;
  letter-spacing: .2px;
}

.tps-modal-glass .tps-confirm__text{
  margin: 6px 0 0 0;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
}

.tps-modal-glass.tps-modal-glass--light .tps-confirm__text{
  color: rgba(17,24,39,.70);
}

.tps-modal-glass .tps-confirm__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.tps-modal-glass .tps-confirm--sm{
  padding: 12px;
  border-radius: 14px;
}

.tps-modal-glass .tps-confirm--sm .tps-confirm__title{
  font-size: 13px;
}

.tps-modal-glass .tps-confirm--sm .tps-confirm__text{
  font-size: 12.5px;
}

.tps-modal-glass .tps-confirm--md{
  padding: 14px;
}

.tps-modal-glass .tps-confirm--md .tps-confirm__title{
  font-size: 14px;
}

.tps-modal-glass .tps-confirm--md .tps-confirm__text{
  font-size: 13px;
}

.tps-modal-glass .tps-confirm--lg{
  padding: 16px;
  border-radius: 18px;
}

.tps-modal-glass .tps-confirm--lg .tps-confirm__title{
  font-size: 15px;
}

.tps-modal-glass .tps-confirm--lg .tps-confirm__text{
  font-size: 14px;
}

.tps-modal-glass .tps-load{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-load{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-load__row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.tps-modal-glass .tps-load__text{
  font-weight: 700;
  letter-spacing: .15px;
  color: rgba(255,255,255,.90);
  margin: 0;
}

.tps-modal-glass.tps-modal-glass--light .tps-load__text{
  color: rgba(17,24,39,.88);
}

.tps-modal-glass .tps-load__sub{
  margin: 6px 0 0 0;
  color: rgba(255,255,255,.78);
}

.tps-modal-glass.tps-modal-glass--light .tps-load__sub{
  color: rgba(17,24,39,.66);
}

.tps-modal-glass .tps-load--sm{
  padding: 12px;
  border-radius: 14px;
}

.tps-modal-glass .tps-load--sm .tps-load__text{
  font-size: 13px;
}

.tps-modal-glass .tps-load--sm .tps-load__sub{
  font-size: 12.5px;
}

.tps-modal-glass .tps-load--md{
  padding: 14px;
}

.tps-modal-glass .tps-load--md .tps-load__text{
  font-size: 14px;
}

.tps-modal-glass .tps-load--md .tps-load__sub{
  font-size: 13px;
}

.tps-modal-glass .tps-load--lg{
  padding: 16px;
  border-radius: 18px;
}

.tps-modal-glass .tps-load--lg .tps-load__text{
  font-size: 15px;
}

.tps-modal-glass .tps-load--lg .tps-load__sub{
  font-size: 14px;
}

.tps-modal-glass .tps-skel{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.tps-modal-glass .tps-skel-line{
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 240% 100%;
  animation: tpsSkel 1.35s ease-in-out infinite;
}

.tps-modal-glass.tps-modal-glass--light .tps-skel-line{
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.10), rgba(0,0,0,.05));
}

.tps-modal-glass .tps-skel-line.w-60{
  width: 60%;
}

.tps-modal-glass .tps-skel-line.w-80{
  width: 80%;
}

.tps-modal-glass .tps-skel-line.w-40{
  width: 40%;
}

@keyframes tpsSkel{
  0%{
    background-position: 0% 0;
  }
  100%{
    background-position: 100% 0;
  }
}

.tps-modal-glass .tps-field{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-field{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-field__label{
  display: block;
  margin: 0 0 6px 0;
  font-weight: 800;
  letter-spacing: .15px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-field__label{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-field__req{
  color: color-mix(in srgb, var(--tps-danger, #ef4444), white 25%);
}

.tps-modal-glass .tps-field__input{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}

.tps-modal-glass.tps-modal-glass--light .tps-field__input{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-field__input:focus{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 75%);
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 45%);
}

.tps-modal-glass .tps-field__hint{
  margin: 8px 0 0 0;
  color: rgba(255,255,255,.76);
}

.tps-modal-glass.tps-modal-glass--light .tps-field__hint{
  color: rgba(17,24,39,.66);
}

.tps-modal-glass .tps-field__msg{
  margin: 8px 0 0 0;
  font-weight: 750;
  letter-spacing: .12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tps-modal-glass .tps-field__msg--ok{
  color: color-mix(in srgb, var(--tps-success, #16a34a), white 8%);
}

.tps-modal-glass .tps-field__msg--err{
  color: color-mix(in srgb, var(--tps-danger, #ef4444), white 8%);
}

.tps-modal-glass .tps-field--sm{
  padding: 12px;
  border-radius: 14px;
}

.tps-modal-glass .tps-field--sm .tps-field__label{
  font-size: 13px;
}

.tps-modal-glass .tps-field--sm .tps-field__hint{
  font-size: 12.5px;
}

.tps-modal-glass .tps-field--sm .tps-field__msg{
  font-size: 12.5px;
}

.tps-modal-glass .tps-field--md{
  padding: 14px;
}

.tps-modal-glass .tps-field--md .tps-field__label{
  font-size: 14px;
}

.tps-modal-glass .tps-field--md .tps-field__hint{
  font-size: 13px;
}

.tps-modal-glass .tps-field--md .tps-field__msg{
  font-size: 13px;
}

.tps-modal-glass .tps-field--lg{
  padding: 16px;
  border-radius: 18px;
}

.tps-modal-glass .tps-field--lg .tps-field__label{
  font-size: 15px;
}

.tps-modal-glass .tps-field--lg .tps-field__hint{
  font-size: 14px;
}

.tps-modal-glass .tps-field--lg .tps-field__msg{
  font-size: 14px;
}

.tps-modal-glass .tps-copy{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
}

.tps-modal-glass.tps-modal-glass--light .tps-copy{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.tps-modal-glass .tps-copy__label{
  margin: 0 0 8px 0;
  font-weight: 850;
  letter-spacing: .15px;
  color: rgba(255,255,255,.92);
}

.tps-modal-glass.tps-modal-glass--light .tps-copy__label{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-copy__frame{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 10px 10px;
}

.tps-modal-glass.tps-modal-glass--light .tps-copy__frame{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}

.tps-modal-glass .tps-copy__text{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: rgba(255,255,255,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tps-modal-glass.tps-modal-glass--light .tps-copy__text{
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-copy--sm{
  padding: 12px;
  border-radius: 14px;
}

.tps-modal-glass .tps-copy--sm .tps-copy__label{
  font-size: 13px;
}

.tps-modal-glass .tps-copy--md{
  padding: 14px;
}

.tps-modal-glass .tps-copy--md .tps-copy__label{
  font-size: 14px;
}

.tps-modal-glass .tps-copy--lg{
  padding: 16px;
  border-radius: 18px;
}

.tps-modal-glass .tps-copy--lg .tps-copy__label{
  font-size: 15px;
}

.tps-modal-glass .tps-code{
  margin: 0;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: auto;
  color: rgba(255,255,255,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.35;
}

.tps-modal-glass.tps-modal-glass--light .tps-code{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(17,24,39,.92);
}

.tps-modal-glass .tps-code--sm{
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 12px;
}

.tps-modal-glass .tps-code--md{
  font-size: 12.5px;
  padding: 12px 14px;
  border-radius: 14px;
}

.tps-modal-glass .tps-code--lg{
  font-size: 13.5px;
  padding: 14px 16px;
  border-radius: 16px;
}

.tps-modal-glass .tps-footer-extra{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tps-modal-glass .tps-footer-extra.tps-footer-extra--swap-sm{
  flex-direction: column-reverse;
}

@media (min-width: 992px){
  .tps-modal-glass .tps-footer-extra{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
    align-items: center;
  }

  .tps-modal-glass .tps-footer-extra > :only-child{
    grid-column: 1 / -1;
    justify-self: center;
  }

  .tps-modal-glass .tps-footer-extra > :last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
  }
}

.tps-modal-glass .btn.tps-btn-lg{
  height: 51px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .18px;
}

.tps-modal-glass .btn.tps-btn-fluid{
  width: 100%;
}

.tps-modal-glass .btn.btn-success{
  color: #fff;
}

.tps-modal-glass .btn .tps-btn-ico{
  position: relative;
  display: inline-block;
  line-height: 1;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  transition: transform .18s ease;
}

.tps-modal-glass .btn .tps-btn-ico::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1em + 12px);
  height: calc(1em + 12px);
  transform: translate(-50%, -50%);
  border-radius: 7px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-sizing: border-box;
  pointer-events: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.tps-modal-glass.tps-modal-glass--light .btn .tps-btn-ico::before{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
}

.tps-modal-glass .btn .tps-btn-ico i{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  line-height: 1;
  display: block;
}

.tps-modal-glass .btn .tps-btn-ico--left{
  margin-right: 12px;
}

.tps-modal-glass .btn .tps-btn-ico--right{
  margin-left: 12px;
}

.tps-modal-glass .btn:hover .tps-btn-ico::before{
  background: rgba(255,255,255,.13);
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 65%);
}

.tps-modal-glass.tps-modal-glass--light .btn:hover .tps-btn-ico::before{
  background: rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--tps-accent, #7c3aed), transparent 70%);
}

.tps-modal-glass .btn:hover .tps-btn-ico--right{
  transform: translateX(4px);
}

/* ========================================================================== */
/* END: tps-modal-glass                                                       */
/* ========================================================================== */

/* ========================================================================== */
/* TPS Toast (layer positions + glass toast shell + link button)              */
/* ========================================================================== */

.tps-toast-layer{
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 32px));
  max-width: 100%;
  pointer-events: none;
}

@media (max-width: 575.98px){
  .tps-toast-layer{
    width: calc(100vw - 32px);
  }
}

.tps-toast-layer--br{
  right: 16px;
  bottom: 16px;
}

.tps-toast-layer--tr{
  right: 16px;
  top: 95px;
}

.tps-toast-layer--bl{
  left: 16px;
  bottom: 16px;
}

.tps-toast-layer--tl{
  left: 16px;
  top: 95px;
}

.tps-toast-layer--bc{
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
}

.tps-toast-layer--tc{
  left: 50%;
  transform: translateX(-50%);
  top: 95px;
}

.tps-toast{
  pointer-events: auto;
  width: 100%;
  background: rgba(0, 0, 0, .78);
  border: 0;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 14px 44px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--tps-accent), transparent 78%),
    0 18px 60px color-mix(in srgb, var(--tps-accent), transparent 84%),
    0 6px 18px color-mix(in srgb, var(--tps-accent), transparent 88%);
  overflow: hidden;
  padding: 0;
  margin: 0;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.tps-toast.is-open{
  transform: translateY(0);
  opacity: 1;
}

.tps-toast--anchor{
  transition: opacity .12s ease;
  transform: translateY(0);
}

.tps-toast-box{
  padding: 12px 14px;
}

.tps-toast-box .mw{
  max-width: 100%;
}

.tps-toast-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tps-toast-content{
  min-width: 0;
}

.tps-toast-title{
  font-weight: 700;
  letter-spacing: .15px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: rgba(255,255,255,.96);
}

.tps-toast-text{
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.86);
}

.tps-toast-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 25px;
  padding: 0 10px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  background: color-mix(in srgb, var(--tps-accent), transparent 78%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tps-accent), transparent 70%);
  transition: transform .15s ease, background .15s ease;
}

.tps-toast-link:hover{
  background: color-mix(in srgb, var(--tps-accent), transparent 70%);
  transform: translateY(-1px);
  color: #fff;
}

.tps-toast-link:active{
  transform: translateY(0);
}


/* ========================================================================== */
/* END: TPS Toast                                                             */
/* ========================================================================== */

/* ========================================================================== */
/* TPS Breadcrumbs (section shell + scrollable list + items/links/current)    */
/* ========================================================================== */

.tps-bc-sec{
  padding: 5px 0;
  background:
    radial-gradient(1200px 1200px at -200px -200px,
      color-mix(in oklab, var(--tps-accent, #6f42c1) 6%, transparent) 0%,
      transparent 40%) no-repeat;
  border-top: 1px solid color-mix(in oklab, var(--tps-border, #e6e6e6) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--tps-border, #e6e6e6) 70%, transparent);
}

.tps-bc-flex{
  display: flex;
}

.tps-bc-row{
  width: 100%;
  font-size: .75em;
}

.tps-breadcrumb{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

.tps-breadcrumb::-webkit-scrollbar{
  height: 6px;
}

.tps-breadcrumb::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--tps-accent, #6f42c1) 25%, transparent);
  border-radius: 10px;
}

.tps-breadcrumb-item{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: color-mix(in oklab, var(--tps-text, #111) 85%, #000);
}

.tps-breadcrumb-item:not(:last-child)::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 8px;
  min-width: 7px;
  min-height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='currentColor' d='M2.5 0L1 1.5 3.6 4 1 6.5 2.5 8l4-4-4-4z'/%3E%3C/svg%3E") no-repeat center;
}

.tps-bc-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: .15rem .55rem;
  border-radius: 5px;
  text-decoration: none;
  text-overflow: ellipsis;
  color: color-mix(in oklab, var(--tps-text, #111) 92%, #000);
  background: color-mix(in oklab, var(--tps-border, #e6e6e6) 22%, transparent);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.tps-bc-link:hover{
  color: inherit;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--tps-accent, #6f42c1) 12%, transparent),
    color-mix(in oklab, var(--tps-accent-2, #9b59b6) 8%, transparent));
}

.tps-bc-link:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--tps-accent, #6f42c1) 60%, transparent);
  outline-offset: 2px;
  text-decoration: none;
}

.tps-bc-current{
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: .15rem .55rem;
  border-radius: 5px;
  font-weight: 600;
  text-overflow: ellipsis;
  color: color-mix(in oklab, var(--tps-text, #111) 100%, #000);
  background: color-mix(in oklab, var(--tps-border, #e6e6e6) 45%, transparent);
}

.tps-bc-home{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--tps-accent-2, #9b59b6);
  background: color-mix(in oklab, var(--tps-accent, #6f42c1) 16%, transparent);
}

@media (max-width: 576px){
  .tps-breadcrumb{
    gap: 8px;
  }

  .tps-bc-link,
  .tps-bc-current{
    max-width: 28ch;
  }
}

/* ========================================================================== */
/* END: TPS Breadcrumbs                                                       */
/* ========================================================================== */

/* ========================================================================== */
/* Global Header (base variables + stacking + transitions)                     */
/* ========================================================================== */

.header{
  --background-color: rgba(0, 0, 0, 0);
  --heading-color: #fff;
  --surface-color: rgba(255, 255, 255, .085);
  z-index: 997;
  color: var(--default-color);
  background-color: var(--background-color);
  transition: .5s;
}

/* ========================================================================== */
/* Header Topbar (layout + contact + social links)                             */
/* ========================================================================== */

.header .topbar{
  height: 40px;
  padding: 0;
  font-size: 14px;
  background-color: var(--background-color);
  transition: .5s;
}

.header .topbar .contact-info i{
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span{
  padding-left: 5px;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a{
  line-height: 0;
  transition: .3s;
}

.header .topbar .contact-info i a:hover{
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a{
  display: inline-flex;
  margin-left: 20px;
  line-height: 0;
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  transition: .3s;
}

.header .topbar .social-links a:hover{
  color: var(--contrast-color);
}

@media (max-width: 575px){
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span{
    font-size: 13px;
  }
}

/* ========================================================================== */
/* Header Branding (fixed height + vertical padding)                           */
/* ========================================================================== */

.header .branding{
  height: 82px;
  padding: 8px 0;
  box-sizing: border-box;
}

.branding .container{
  gap: 12px;
}

/* ========================================================================== */
/* Header Logo (layout + image sizing + sitename)                              */
/* ========================================================================== */

.header .logo{
  line-height: 1;
}

.header .logo img{
  max-height: 36px;
  margin-right: 8px;
}

.header .logo .sitename{
  margin: 0;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--heading-color);
}

.header .logo .sitename .tps-mark--accent{
  color: var(--tps-accent);
}

@media (max-width: 1199px){
  .header .logo .sitename{
    display: none;
  }
}

/* ========================================================================== */
/* Header On Scroll (background + shadow + topbar collapse)                    */
/* ========================================================================== */

.scrolled .header{
  --background-color: rgba(7, 12, 16, .8);
  box-shadow: 0 0 18px rgba(0, 0, 0, .1);
}

.scrolled .header .topbar{
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

/* ========================================================================== */
/* Navigation Menu Base (shared reset)                                         */
/* ========================================================================== */

.navmenu{
  padding: 0;
}

/* ========================================================================== */
/* Desktop Navigation (menu layout + dropdowns + megamenu)                     */
/* ========================================================================== */

@media (min-width: 1200px){
  .navmenu ul{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .navmenu li{
    position: relative;
  }

  .navmenu > ul > li{
    padding: 15px 14px;
    white-space: nowrap;
  }

  .navmenu > ul > li:last-child{
    padding-right: 0;
  }

  .navmenu a,
  .navmenu label{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    color: var(--nav-color);
    transition: .3s;
  }

  .navmenu label{
    background: transparent;
    border: none;
  }

  .navmenu > ul > li > a::before,
  .navmenu > ul > li > label::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    visibility: hidden;
    background-color: var(--nav-hover-color);
    transition: .3s;
  }

  .navmenu a:hover::before,
  .navmenu li:hover > a::before,
  .navmenu label:hover::before,
  .navmenu li:hover > label::before{
    width: 100%;
    visibility: visible;
  }

  .navmenu a i,
  .navmenu label i{
    margin-left: 5px;
    font-size: 12px;
    line-height: 0;
    transition: .3s;
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus{
    color: color-mix(in srgb, var(--nav-color) 90%, white 15%);
  }

  .navmenu .dropdown ul{
    position: absolute;
    top: 130%;
    left: 14px;
    z-index: 999;
    display: block;
    min-width: 200px;
    margin: 0;
    padding: 10px 0;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    transition: .3s;
  }

  .navmenu .dropdown ul a{
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i{
    font-size: 12px;
  }

  .navmenu .dropdown:hover > ul{
    top: 100%;
    opacity: 1;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul{
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover > ul{
    top: 0;
    left: -100%;
    opacity: 1;
    visibility: visible;
  }

  .navmenu .megamenu-2{
    position: static;
  }

  .navmenu .megamenu-2 .mobile-megamenu{
    display: none;
  }

  .navmenu .megamenu-2 .desktop-megamenu{
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    max-height: 80vh;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    background-color: var(--nav-dropdown-background-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    transition: .3s;
  }

  .navmenu .megamenu-2:hover > .desktop-megamenu{
    top: 100%;
    opacity: 1;
    visibility: visible;
  }

  .navmenu .megamenu-2 .tab-navigation{
    width: 250px;
    flex-shrink: 0;
    padding: 25px 0;
    background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
    border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs{
    border: none;
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item{
    width: 100%;
    padding-left: 10px;
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link{
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 18px 25px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--nav-dropdown-color);
    transition: .3s;
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link:hover{
    padding-left: 30px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link.active{
    border-left-color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link.active i{
    color: var(--accent-color);
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link.active span{
    font-weight: 600;
    color: var(--accent-color);
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link .tab-ico{
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
  }

  .navmenu .megamenu-2 .tab-navigation .nav-tabs .nav-item .nav-link span{
    font-size: 15px;
    font-weight: 500;
    transition: .3s;
  }

  .navmenu .megamenu-2 .tab-content .content-grid{
    display: block;
    margin-bottom: 30px;
  }

  .navmenu .megamenu-2 .tab-content .content-grid .product-section{
    display: block;
  }

  .navmenu .megamenu-2 .tab-content .content-grid .product-section .section-title{
    margin: 0 0 16px;
    padding: 0 0 10px;
    text-align: left;
    line-height: 1.3;
    font-size: 16px;
    font-weight: 600;
    color: var(--default-color);
    border-bottom: 2px solid var(--accent-color);
  }

  .navmenu .megamenu-2 .tab-content .content-grid .product-section .product-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .navmenu .megamenu-2 .tab-content .content-grid .product-section .product-list .product-link{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    text-decoration: none;
    white-space: normal;
    color: var(--nav-dropdown-color);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    transition: .3s;
  }

  .navmenu .megamenu-2 .tab-content .content-grid .product-section .product-list .product-link:hover{
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    transform: translateY(-1px);
  }

  .navmenu .megamenu-2 .product-link i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 1px;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 24px;
    color: color-mix(in srgb, var(--nav-dropdown-color), transparent 20%);
    transition: .3s;
  }

  .navmenu .megamenu-2 .product-link .pl-image{
    display: block;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .megamenu-2 .product-link div{
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
  }

  .navmenu .megamenu-2 .product-link div span{
    display: block;
    min-height: 24px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    transform: translateY(4px);
  }

  .navmenu .megamenu-2 .product-link div small{
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: color-mix(in srgb, var(--nav-dropdown-color), transparent 40%);
  }

  .navmenu .megamenu-2 .tab-content .featured-banner{
    padding: 25px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu .megamenu-2 .tab-content .featured-banner .banner-content{
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .navmenu .megamenu-2 .tab-content .featured-banner .banner-content .banner-image{
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
  }

  .navmenu .megamenu-2 .tab-content .featured-banner .banner-content .banner-info{
    flex: 1;
    min-width: 0;
  }

  .navmenu .megamenu-2 .tab-content .featured-banner .banner-content .banner-info .banner-title{
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--default-color);
  }

  .navmenu .megamenu-2 .tab-content .featured-banner .banner-content .banner-info p{
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category{
    padding: 25px;
    border-radius: 10px;
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    transition: .3s;
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category:hover{
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category i{
    display: block;
    margin-bottom: 15px;
    font-size: 24px;
    color: var(--accent-color);
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category .rc-title{
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--default-color);
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category p{
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu-2 .tab-content .resources-layout .resource-categories .resource-category .resource-link{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color);
    transition: .3s;
  }

  .navmenu .megamenu-2 > .mm-btn{
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color), black 15%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color), transparent 70%);
  }

  .navmenu .megamenu-2 > .mm-btn::before{
    display: none;
  }

  .navmenu .megamenu-2 > .mm-btn .toggle-dropdown{
    margin-left: 6px;
    opacity: .9;
    color: var(--contrast-color);
  }

  .navmenu .megamenu-2:hover > .mm-btn{
    transform: translateY(-1px);
  }

  .navmenu .megamenu-2:active > .mm-btn{
    transform: translateY(0) scale(.98);
  }

  .navmenu .dropdown ul > li > label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--nav-dropdown-color);
    background: transparent;
  }

  .navmenu .dropdown ul > li > label:hover{
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown .dropdown > label{
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown .dropdown > label:hover{
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown.dd-open > ul,
  .navmenu .dropdown.dd-open:hover > ul{
    top: 100%;
    opacity: 1;
    visibility: visible;
  }

  .navmenu .dropdown.dd-closing > ul,
  .navmenu .dropdown.dd-closing:hover > ul{
    top: 130%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .navmenu .megamenu-2.mm-open > .desktop-megamenu,
  .navmenu .megamenu-2.mm-open:hover > .desktop-megamenu{
    top: 100%;
    opacity: 1;
    visibility: visible;
  }

  .navmenu .megamenu-2.mm-closing > .desktop-megamenu,
  .navmenu .megamenu-2.mm-closing:hover > .desktop-megamenu{
    top: 130%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .navmenu .megamenu-2 .product-link .pl-price-row{
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    width: auto;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu-2 .product-link .pl-price-row .pl-price{
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--default-color);
  }

  .navmenu .megamenu-2 .product-link .pl-price-row .pl-old{
    flex: 0 0 auto;
    font-size: 12px;
    text-decoration: line-through;
    color: color-mix(in srgb, var(--nav-dropdown-color), transparent 35%);
  }

  .navmenu .megamenu-2 .product-link .pl-price-row .pl-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color), black 18%);
  }
}

/* ========================================================================== */
/* Mobile Navigation (off-canvas menu + dropdown toggles)                      */
/* ========================================================================== */

@media (max-width: 1199px){
  .branding .container{
    position: relative;
  }

  .header-actions{
    align-items: center;
    gap: 14px;
    padding-right: 52px;
    margin-left: auto;
  }

  .mobile-nav-toggle{
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1000;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    color: var(--nav-color);
    transform: translateY(-50%);
    transition: .3s;
  }

  .navmenu{
    z-index: 9997;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
  }

  .navmenu > ul{
    position: fixed;
    top: 60px;
    left: 20vw;
    right: max(12px, env(safe-area-inset-right) + 12px);
    bottom: max(12px, env(safe-area-inset-bottom) + 12px);
    z-index: 9998;
    display: none;
    width: auto;
    max-width: calc(80vw - (max(12px, env(safe-area-inset-right) + 12px)));
    margin: 0;
    padding: 10px 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    color: var(--nav-dropdown-color);
    transition: .3s;
  }

  .navmenu label i{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    margin-left: 5px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 0;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    transition: .3s;
  }

  .navmenu label i:hover{
    color: var(--contrast-color);
    background-color: var(--accent-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus{
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu label .toggle-dropdown{
    pointer-events: none;
  }

  .navmenu .dropdown > ul{
    position: static;
    z-index: 99;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    transition: .3s;
  }

  .navmenu .dropdown ul ul{
    background-color: rgba(33, 37, 41, .06);
  }

  .navmenu .dropdown > .dd-check:checked + label + ul{
    display: block;
  }

  .navmenu .dropdown > .dd-check:checked + label .toggle-dropdown{
    transform: rotate(180deg);
    color: var(--contrast-color);
    background-color: var(--accent-color);
  }

  .navmenu .dropdown > label{
    width: 100%;
  }

  .navmenu .megamenu-2 .desktop-megamenu{
    display: none;
  }

  .navmenu .megamenu-2 .mobile-megamenu{
    position: static;
    z-index: 99;
    display: none;
    margin: 10px 20px;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: .3s;
  }

  .navmenu .megamenu-2 .mobile-megamenu li{
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .megamenu-2 .mobile-megamenu li:last-child{
    border-bottom: none;
  }

  .navmenu .megamenu-2 .mobile-megamenu li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--nav-dropdown-color);
    transition: .3s;
  }

  .navmenu .megamenu-2 .mobile-megamenu li a:hover{
    color: var(--nav-dropdown-hover-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  }

  .navmenu .megamenu-2 .mobile-megamenu li ul{
    padding: 0;
    background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  }

  .navmenu .megamenu-2 .mobile-megamenu li ul li a{
    padding-left: 35px;
    font-size: 14px;
    font-weight: 400;
  }

  .navmenu .megamenu-2 > .mm-check:checked + .mm-btn + .mobile-megamenu{
    display: block;
  }

  .navmenu .megamenu-2 > .mm-check:checked + .mm-btn .toggle-dropdown{
    transform: rotate(180deg);
    color: var(--contrast-color);
    background-color: var(--accent-color);
  }

  .mobile-nav-active{
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10000;
    margin-right: 0;
    font-size: 32px;
    color: #fff;
    transform: none;
  }

  .mobile-nav-active .navmenu{
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: rgba(33, 37, 41, .8);
    transition: .3s;
  }

  .mobile-nav-active .navmenu > ul{
    display: block;
  }

  .header-actions{
    gap: 14px;
    margin-left: auto;
  }

  .ha-txt{
    font-size: 11px;
  }
}

/* ========================================================================== */
/* Navigation CTA Button (primary action link)                                 */
/* ========================================================================== */

.navmenu .cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), black 15%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color), transparent 70%);
  transition: transform .15s ease, background-color .3s, box-shadow .3s, color .3s;
}

.navmenu .cta-btn i{
  font-size: 16px;
  transition: transform .15s ease;
}

.navmenu .cta-btn:hover{
  transform: translateY(-1px);
}

.navmenu .cta-btn:hover i{
  transform: translateX(2px);
}

.navmenu .featured-banner .cta-btn{
  margin-top: 8px;
}

/* ========================================================================== */
/* Header Actions (icon buttons + badge + auth switch)                         */
/* ========================================================================== */

.header-actions{
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-left: auto;
}

.ha-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.ha-ico{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  overflow: visible;
  background: color-mix(in srgb, #000, transparent 58%);
  border: 0 solid color-mix(in srgb, #000, transparent 58%);
  transition: transform .15s ease, background-color .3s, border-color .3s;
}

.ha-ico i{
  font-size: 20px;
  line-height: 1;
  color: var(--accent-color);
}

.ha-txt{
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--nav-color);
}

.ha-btn:hover .ha-ico{
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 55%);
  transform: translateY(-1px);
}

@media (min-width: 1400px){
  .ha-ico{
    width: 38px;
    height: 38px;
  }
}

.ha-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), black 20%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}

.ha-badge::after{
  content: attr(data-count);
}

.header-actions .ha-auth{
  display: none;
}

.header-actions.is-auth .ha-login{
  display: none;
}

.header-actions.is-auth .ha-auth{
  display: flex;
}

.ha-avatar{
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.ha-avatar .ha-avatar-txt{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--accent-color);
}

.ha-ico-img{
  display: block;
  max-width: 30px;
  max-height: 30px;
  padding: 3px;
  border-radius: 50%;
  object-fit: contain;
}

/* ========================================================================== */
/* Header Action Buttons (normalize button styling to match links)             */
/* ========================================================================== */

button.ha-btn{
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}

button.ha-btn:focus{
  outline: none;
}

/* ========================================================================== */
/* END: Global Header + Navigation                                             */
/* ========================================================================== */

/* ========================================================================== */
/* Topbar Search (shell + input + button)                                      */
/* ========================================================================== */

.header .topbar .tps-topbar-search{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 300px;
  min-width: 200px;
  max-width: 250px;
  margin: 0 10px;
}

.header .topbar .tps-topbar-search .tps-live{
  width: 100%;
  margin: 0;
}

.header .topbar .tps-topbar-search .tps-topbar-shell{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 26px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

.header .topbar .tps-topbar-search .tps-topbar-input{
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  color: var(--contrast-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.header .topbar .tps-topbar-search .tps-topbar-input:focus,
.header .topbar .tps-topbar-search .tps-topbar-input:focus-visible{
  border: 0;
  outline: none;
  box-shadow: none;
}

.header .topbar .tps-topbar-search .tps-topbar-input::-moz-focus-inner{
  border: 0;
}

.header .topbar .tps-topbar-search .tps-topbar-input::placeholder{
  color: color-mix(in srgb, var(--contrast-color), transparent 52%);
  font-weight: 400;
}

.header .topbar .tps-topbar-search .tps-topbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 62%);
  background: color-mix(in srgb, var(--accent-color), transparent 18%);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color), transparent 78%);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}

.header .topbar .tps-topbar-search .tps-topbar-btn:hover{
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-1px);
}

.header .topbar .tps-topbar-search .tps-topbar-btn:active{
  transform: translateY(0);
}

.header .topbar .tps-topbar-search .tps-topbar-btn i{
  font-size: 13px;
  line-height: 0;
}

@media (max-width: 575px){
  .header .topbar .tps-topbar-search{
    display: none;
  }
}

/* ========================================================================== */
/* Topbar Live Search (dropdown positioning + compact sizing)                  */
/* ========================================================================== */

.header .topbar .tps-topbar-search .tps-live--topbar .tps-livebox{
  position: fixed;
  top: 44px;
  left: 50%;
  z-index: 20000;
  width: min(380px, calc(100vw - 24px));
  transform: translateX(-50%);
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-livesuggest{
  font-size: 11px;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-livetitle{
  font-size: 9px;
  letter-spacing: .6px;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-liveitem a{
  padding: 5px 7px;
  border-radius: 9px;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-liveitem .tps-liveitem-title{
  font-size: 11px;
  font-weight: 500;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-liveitem .tps-liveitem-ico{
  width: 21px;
  height: 21px;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-liveitem .tps-liveitem-ico i{
  font-size: 12px;
}

.header .topbar .tps-topbar-search .tps-live--topbar .tps-liveall{
  height: 30px;
  font-size: 12px;
  font-weight: 700;
}

/* ========================================================================== */
/* END: Topbar Search                                                         */
/* ========================================================================== */

/* ========================================================================== */
/* Hero Title (gradient text + typography + glow)                              */
/* ========================================================================== */

.tps-hero-mp .tps-title{
  font-family: var(--tps-font-mono);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -.015em;
  color: transparent;
  background: linear-gradient(90deg, #3c156b 0%, var(--tps-accent) 40%, var(--tps-grape) 60%, #260e46 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(124, 58, 237, .10), 0 0 28px rgba(167, 139, 250, .08);
}

/* ========================================================================== */
/* Hero Prefix (accent text)                                                  */
/* ========================================================================== */

.tps-hero-mp .pfx{
  font-size: 2rem;
  color: var(--tps-secondary-2);
}

/* ========================================================================== */
/* Hero Cursor (blink animation)                                              */
/* ========================================================================== */

.tps-hero-mp .cursor{
  display: inline-block;
  width: .6ch;
  height: 1em;
  margin-left: .2ch;
  background: var(--tps-accent);
  transform: translateY(.18ch);
  animation: mp-blink 1s steps(1) infinite;
}

@keyframes mp-blink{
  50%{
    opacity: 0;
  }
}

/* ========================================================================== */
/* Hero Search (focus shadow)                                                 */
/* ========================================================================== */

.tps-hero-mp .tps-search{
  border-color: rgba(124, 58, 237, .28);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .10);
}

.tps-hero-mp .tps-search:focus-within{
  box-shadow: 0 16px 40px rgba(124, 58, 237, .16);
}

/* ========================================================================== */
/* END: Hero Title + Cursor + Search                                          */
/* ========================================================================== */

/* ========================================================================== */
/* TPS Footer (base shell + spacing + colors)                                  */
/* ========================================================================== */

.tps-footer{
  position: relative;
  padding-top: 36px;
  padding-bottom: 16px;
  font-size: 14px;
  color: var(--default-color);
  background-color: #020617;
}

.tps-footer .tps-footer-top{
  padding-bottom: 24px;
}

/* ========================================================================== */
/* Footer Grid (geometry + block spacing)                                      */
/* ========================================================================== */

.tps-footer .tps-footer-grid{
  row-gap: 18px;
}

.tps-footer .tps-footer-block{
  padding: 8px 4px;
}

/* ========================================================================== */
/* Footer About (logo + accent underline + text badge)                         */
/* ========================================================================== */

.tps-footer .tps-footer-about{
  padding-right: 12px;
}

.tps-footer .tps-footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  line-height: 1;
  text-decoration: none;
}

.tps-footer .tps-footer-logo::after{
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin-left: 2px;
  background-color: var(--accent-color);
}

.tps-footer .tps-footer-sitename{
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--heading-color);
}

.tps-footer .tps-footer-about-text{
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.tps-footer .tps-footer-about-text strong{
  color: var(--heading-color);
}

.tps-footer .tps-footer-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  background-color: #020617;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--default-color), transparent 80%),
    0 8px 20px rgba(0, 0, 0, .7);
}

.tps-footer .tps-footer-badge-square{
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--accent-color);
}

/* ========================================================================== */
/* Footer Column Titles (heading + underline)                                  */
/* ========================================================================== */

.tps-footer .tps-footer-title{
  position: relative;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--heading-color);
}

.tps-footer .tps-footer-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 36px;
  height: 2px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

/* ========================================================================== */
/* Footer Links (list + square markers + hover motion)                         */
/* ========================================================================== */

.tps-footer .tps-footer-links ul{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tps-footer .tps-footer-links li{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.tps-footer .tps-footer-links li::before{
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.tps-footer .tps-footer-links a{
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  text-decoration: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: color .18s ease, transform .14s ease;
}

.tps-footer .tps-footer-links a span{
  display: inline-block;
}

.tps-footer .tps-footer-links a:hover{
  color: var(--accent-color);
  transform: translateX(1px);
}

/* ========================================================================== */
/* Footer Contacts (compact text styling)                                      */
/* ========================================================================== */

.tps-footer .tps-footer-contact p{
  margin-bottom: 4px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.tps-footer .tps-footer-contact strong{
  color: var(--heading-color);
}

.tps-footer .tps-footer-contact span{
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

/* ========================================================================== */
/* Footer Bottom Bar (divider + copy + legal links)                            */
/* ========================================================================== */

.tps-footer .tps-footer-bottom{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
}

.tps-footer .tps-footer-bottom-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.tps-footer .tps-footer-copy{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tps-footer .tps-footer-copy-main{
  white-space: nowrap;
}

.tps-footer .tps-footer-copy-desc{
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.tps-footer .tps-footer-dot{
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background-color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.tps-footer .tps-footer-legal{
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.tps-footer .tps-footer-legal-entity{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.tps-footer .tps-footer-legal-entity span{
  white-space: nowrap;
}

.tps-footer .tps-footer-legal-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tps-footer .tps-footer-legal-links a{
  white-space: nowrap;
  text-decoration: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: color .18s ease;
}

.tps-footer .tps-footer-legal-links a:hover{
  color: var(--accent-color);
  text-decoration: underline;
}

.tps-footer .tps-footer-sep{
  opacity: .6;
}

/* ========================================================================== */
/* Footer Responsive (spacing + layout shifts)                                 */
/* ========================================================================== */

@media (max-width: 991.98px){
  .tps-footer .tps-footer-about{
    padding-right: 0;
  }
}

@media (max-width: 767.98px){
  .tps-footer{
    padding-top: 28px;
  }

  .tps-footer .tps-footer-bottom-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .tps-footer .tps-footer-legal{
    margin-left: 0;
  }
}

@media (max-width: 575.98px){
  .tps-footer .tps-footer-title{
    font-size: 13px;
  }

  .tps-footer .tps-footer-links li{
    padding: 3px 0;
  }
}

/* ========================================================================== */
/* END: TPS Footer                                                            */
/* ========================================================================== */


/* ========================================================================== */
/* Header Branding Snow (overlay layers + animated snow particles)             */
/* ========================================================================== */

#header .branding.tps-branding-snow{
  position: relative;
  isolation: isolate;
}

#header .branding.tps-branding-snow::before,
#header .branding.tps-branding-snow::after{
  content: "";
  position: absolute;
  top: -40px;
  right: 0;
  bottom: -40px;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .88) 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .88) 35%, rgba(0, 0, 0, 0) 100%);
}

#header .branding.tps-branding-snow::before{
  opacity: .88;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .98) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .82) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, .72) 0 .8px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 255, 255, .90) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, .62) 0 .7px, transparent 1.3px);
  background-size: 140px 140px;
  filter: blur(.12px);
  animation: tps-snow-fall-1 10s linear infinite;
}

#header .branding.tps-branding-snow::after{
  opacity: .68;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 255, 255, .72) 0 1.3px, transparent 2.1px),
    radial-gradient(circle, rgba(255, 255, 255, .66) 0 1.1px, transparent 1.9px);
  background-size: 220px 220px;
  filter: blur(.30px);
  animation: tps-snow-fall-2 16s linear infinite;
}

@keyframes tps-snow-fall-1{
  0%{
    background-position: 0 0, 40px -60px, -20px -120px, 70px -180px, -60px -240px;
  }

  100%{
    background-position: 0 260px, 40px 200px, -20px 140px, 70px 80px, -60px 20px;
  }
}

@keyframes tps-snow-fall-2{
  0%{
    background-position: 0 -180px, 60px -260px, -80px -320px;
  }

  100%{
    background-position: 0 240px, 60px 160px, -80px 100px;
  }
}

@media (prefers-reduced-motion: reduce){
  #header .branding.tps-branding-snow::before,
  #header .branding.tps-branding-snow::after{
    animation: none !important;
  }
}

/* ========================================================================== */
/* Branding Content Layer (keep content above snow overlays)                   */
/* ========================================================================== */

#header .branding.tps-branding-snow > .container-fluid{
  position: relative;
  z-index: 2;
}

/* ========================================================================== */
/* Header Back Button (reveal on scroll + interactive states)                  */
/* ========================================================================== */

#header .branding .tps-header-back{
  position: absolute;
  top: 100%;
  left: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  line-height: 1;
  text-decoration: none;
  color: var(--tps-accent);
  background: #fff;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}

body.scrolled #header .branding .tps-header-back{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#header .branding .tps-header-back:hover{
  color: var(--tps-accent);
}

#header .branding .tps-header-back:active{
  transform: translateY(1px);
}

#header .branding .tps-header-back:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tps-accent) 25%, transparent);
}

#header .branding .tps-header-back i{
  font-size: 1.75rem;
  line-height: 1;
}

@media (max-width: 575.98px){
  #header .branding .tps-header-back{
    width: 40px;
    height: 40px;
  }

  #header .branding .tps-header-back i{
    font-size: 1.6rem;
  }
}

/* ========================================================================== */
/* Header Logo (inline layout + fixed logo sizing)                             */
/* ========================================================================== */

#header .branding a.logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

#header .branding a.logo img{
  display: block;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  height: 32px;
  min-width: 32px;
}

@media (max-width: 575.98px){
  #header .branding a.logo img{
    height: 32px;
    min-width: 32px;
  }
}

/* ========================================================================== */
/* END: Header Branding Snow                                                   */
/* ========================================================================== */