/* =========================================================
   Kosmoz — Products / platform page
   (loaded after style.css; reuses its tokens, header, footer)
   ========================================================= */

/* =========================================================
   HERO PANEL
   ========================================================= */
.p-hero {
  padding-top: calc(var(--header-h) + clamp(16px, 2.6vw, 32px));
}

.p-hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.6vw, 32px);
  background: #F1F1F1;
  padding: clamp(36px, 4.6vw, 56px) clamp(16px, 4vw, 60px) clamp(22px, 2.8vw, 34px);
  text-align: center;
  transform-origin: 50% 0;
  will-change: transform;
}

/* soft pink light that follows the pointer */
.p-hero-glow {
  position: absolute;
  left: var(--gx, 50%);
  top: var(--gy, 0%);
  width: 620px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 13, 121, .11), rgba(123, 92, 255, .05) 40%, transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left .9s var(--ease), top .9s var(--ease);
}

.p-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
}

.p-title {
  font-size: clamp(1.85rem, 3.9vw, 3.6rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink);
}

.p-sub {
  margin-top: 10px;
  font-size: clamp(.85rem, 1.6rem, 1.2rem);
  color: #181829;
}

/* search */
.p-search-wrap {
  margin-top: clamp(20px, 2.4vw, 30px);
  width: min(780px, 100%);
  display: flex;
  justify-content: center;
}

.p-search {
  position: relative;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 20px;
  border-radius: 25px;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(18, 18, 42, .04);
  transition:
    width .7s var(--ease),
    height .7s var(--ease),
    border-color .5s var(--ease),
    box-shadow .7s var(--ease),
    transform .7s var(--ease);
}

.p-search:hover {
  box-shadow: 0 10px 30px -18px rgba(18, 18, 42, .3);
}

/* focused: grows a little, lifts, pink ring + glow */
.p-search:focus-within {
  width: calc(100% + 24px);
  height: 58px;
  border-color: rgba(226, 13, 121, .35);
  box-shadow: 0 0 0 4px rgba(226, 13, 121, .1), 0 24px 50px -24px rgba(226, 13, 121, .5);
  transform: translateY(-3px);
}

/* pink underline that draws in from the centre */
.p-search::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--violet), transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform .8s var(--ease), opacity .5s;
}

.p-search:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

.p-search-spark {
  width: 18px;
  height: 18px;
  color: var(--pink);
  animation: p-twinkle 2.8s ease-in-out infinite;
  transition: width .6s var(--ease), height .6s var(--ease);
}

.p-search:focus-within .p-search-spark {
  width: 21px;
  height: 21px;
  animation-duration: 1.2s;
}

.p-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.p-search input::placeholder {
  color: #6e6e84;
  transition: color .5s, transform .6s var(--ease);
}

.p-search input:focus::placeholder {
  color: #b4b4c2;
}

.p-search .icon-btn {
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.p-search:focus-within .icon-btn {
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 10px 24px -8px rgba(226, 13, 121, .9);
}

.p-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.p-search .icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.p-search .icon-btn svg {
  width: 17px;
  height: 17px;
}

@keyframes p-twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(.82) rotate(18deg); opacity: .7; }
}

/* category tabs */
.p-tabs-wrap {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 100%;
}

.p-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  background: #f8f8f8;
  border: 1px solid #ebebeb;
  overflow-x: auto;
  scrollbar-width: none;
}

.p-tabs::-webkit-scrollbar {
  display: none;
}

.p-tab {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  transition: color .4s var(--ease);
}

.p-tab:hover {
  color: var(--ink);
}

.p-tab.active {
  color: var(--ink);
  font-weight: 500;
}

.p-tabs-ink {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e4e4e8;
  box-shadow: 0 4px 12px -6px rgba(18, 18, 42, .18);
  transition: transform .6s var(--ease), width .6s var(--ease);
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.p-list {
  padding: clamp(28px, 3.4vw, 44px) 0 clamp(80px, 10vw, 140px);
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.6vw, 48px) clamp(18px, 3vw, 44px);
  padding-inline: clamp(0px, 2.4vw, 30px);
}

.p-card[hidden] {
  display: none;
}

/* reveal: media wipes up, text follows */
.js .p-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s var(--ease) var(--rd, 0s), transform 1.1s var(--ease) var(--rd, 0s);
}

.js .p-card .p-media {
  clip-path: inset(100% 0 0 0 round 10px);
  transition: clip-path 1.2s var(--ease) var(--rd, 0s);
}

.js .p-card .p-info {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease) calc(var(--rd, 0s) + .25s), transform .8s var(--ease) calc(var(--rd, 0s) + .25s);
}

.js .p-card.in {
  opacity: 1;
  transform: none;
}

.js .p-card.in .p-media {
  clip-path: inset(0 0 0 0 round 10px);
}

.js .p-card.in .p-info {
  opacity: 1;
  transform: none;
}

.p-link {
  display: block;
}

.p-link:focus-visible {
  outline-offset: 6px;
}

/* =========================================================
   CARD MEDIA (pure-CSS product art)
   ========================================================= */
.p-media {
  --mx: 0;
  --my: 0;
  --py: 0;
  --brand-c: #fff;
  position: relative;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  border-radius: 10px;
  isolation: isolate;
  background: var(--bg-grad);
  transition: box-shadow .6s var(--ease);
}

/* moving sheen */
.p-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.p-link:hover .p-media::after {
  transform: translateX(120%);
  transition: transform 1.1s var(--ease);
}

.p-link:hover .p-media {
  box-shadow: 0 30px 60px -30px var(--glow, rgba(18, 18, 42, .45));
}

/* themes */
.t-blue {
  --bg-grad: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(140deg, #34c6f6 0%, #1792ee 45%, #0b66db 100%);
  --acc: #1a8cf0;
  --acc-2: #6fd2ff;
  --glow: rgba(23, 146, 238, .6);
}

.t-teal {
  --bg-grad: radial-gradient(70% 60% at 85% 10%, rgba(220, 255, 230, .45), transparent 60%), linear-gradient(140deg, #3b6c8c 0%, #4a8f98 50%, #8fd1b0 100%);
  --acc: #3a8f8a;
  --acc-2: #f6eeb8;
  --glow: rgba(58, 143, 138, .6);
}

.t-sky {
  --bg-grad: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(140deg, #6fb6ff 0%, #4f97ff 45%, #a8c9ff 100%);
  --acc: #3f86f5;
  --acc-2: #a3e3ff;
  --brand-c: #1b1b35;
  --glow: rgba(79, 151, 255, .6);
}

.t-pink {
  --bg-grad: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(140deg, #ffd3e3 0%, #ff9fc4 45%, #f45e9f 100%);
  --acc: #f0408c;
  --acc-2: #ffc2da;
  --brand-c: #1b1b35;
  --glow: rgba(244, 94, 159, .6);
}

.t-violet {
  --bg-grad: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(140deg, #d9d5ff 0%, #ab95f6 45%, #8261ea 100%);
  --acc: #7b5cff;
  --acc-2: #d7c9ff;
  --brand-c: #1b1b35;
  --glow: rgba(123, 92, 255, .6);
}

.t-cream {
  --bg-grad: radial-gradient(80% 70% at 20% 0%, #fff, transparent 70%), linear-gradient(170deg, #f6f0ec 0%, #eee3dc 70%, #e2d3ca 100%);
  --acc: #7c1d3a;
  --acc-2: #f1c7d3;
  --brand-c: #1b1b35;
  --glow: rgba(124, 29, 58, .4);
}

/* brand */
.p-brand {
  position: absolute;
  z-index: 4;
  top: 8%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-c);
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1;
  letter-spacing: .01em;
  transition: transform .7s var(--ease);
}

.p-brand b {
  font-weight: 600;
}

.p-brand small {
  font-size: .62em;
  font-weight: 400;
  opacity: .75;
  align-self: flex-end;
  margin-left: -2px;
}

svg.p-mark {
  width: 1.3em;
  height: 1.3em;
  stroke: none;
}

.p-link:hover .p-brand {
  transform: translateY(-2px);
}

/* translucent shell / fan */
.p-shell {
  position: absolute;
  z-index: 1;
  right: -14%;
  top: -6%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 200deg at 50% 60%, rgba(255, 255, 255, .5) 0 5deg, rgba(255, 255, 255, .1) 5deg 11deg);
  -webkit-mask: radial-gradient(circle at 50% 60%, #000 0 30%, transparent 70%);
  mask: radial-gradient(circle at 50% 60%, #000 0 30%, transparent 70%);
  opacity: .75;
  transform: rotate(calc(var(--py) * 14deg));
  transition: transform 1.2s var(--ease);
}

.p-link:hover .p-shell {
  transform: rotate(calc(var(--py) * 14deg + 24deg)) scale(1.08);
}

/* app windows */
.p-win {
  position: absolute;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 18px 30px -14px rgba(18, 18, 42, .35);
  transition: translate .6s cubic-bezier(.25, .8, .25, 1), transform .8s var(--ease);
}

.p-win-back {
  z-index: 2;
  right: -3%;
  top: 19%;
  width: 46%;
  height: 40%;
  translate: calc(var(--mx) * -10px) calc(var(--py) * 22px + var(--my) * -8px);
  background:
    linear-gradient(#eef1f7, #eef1f7) 8% 9% / 26% 5% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 10% 34% / 46% 6% no-repeat,
    linear-gradient(#e7ebf3, #e7ebf3) 10% 48% / 52% 4% no-repeat,
    linear-gradient(#e7ebf3, #e7ebf3) 10% 58% / 40% 4% no-repeat,
    linear-gradient(#5ccf8a, #5ccf8a) 10% 76% / 18% 7% no-repeat,
    radial-gradient(60% 80% at 100% 70%, var(--acc-2), transparent 70%) 0 0 / 100% 100% no-repeat,
    #fff;
}

.p-win-tall {
  top: 14%;
  height: 52%;
  width: 40%;
  right: 4%;
  background:
    linear-gradient(#eef1f7, #eef1f7) 8% 6% / 30% 4% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 8% 20% / 14% 7% no-repeat,
    linear-gradient(#5ccf8a, #5ccf8a) 30% 20% / 14% 7% no-repeat,
    linear-gradient(#ffc04d, #ffc04d) 52% 20% / 14% 7% no-repeat,
    repeating-linear-gradient(#fff 0 9px, #eef1f7 9px 11px) 8% 64% / 84% 46% no-repeat,
    #fff;
}

.p-win-front {
  z-index: 3;
  left: 37%;
  top: 45%;
  width: 52%;
  height: 44%;
  background:
    linear-gradient(90deg, var(--acc), var(--acc-2)) 0 0 / 100% 30% no-repeat,
    linear-gradient(#eef1f7, #eef1f7) 10% 50% / 18% 30% no-repeat,
    linear-gradient(#eef1f7, #eef1f7) 90% 50% / 18% 30% no-repeat,
    #fff;
  translate: calc(var(--mx) * 12px) calc(var(--py) * -12px + var(--my) * 10px);
}

.p-phone {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 22%;
  height: 66%;
  translate: -50% 0;
  border-radius: 5px;
  background:
    radial-gradient(circle, #9aa3ff 0 1.5px, transparent 2px) 50% 32% / 8px 8px,
    linear-gradient(#5d6bff, #5d6bff) 50% 82% / 50% 8% no-repeat,
    #1e2245;
  box-shadow: 0 10px 18px -8px rgba(18, 18, 42, .6);
  transition: transform .8s var(--ease);
}

.p-link:hover .p-win-back {
  transform: translate(-6%, -8%) rotate(-2deg);
}

.p-link:hover .p-win-front {
  transform: translate(-4%, -2%) scale(1.05);
}

.p-link:hover .p-phone {
  transform: translateY(-10%);
}

/* dashboard variant */
.p-win-dash {
  left: 24%;
  top: 40%;
  width: 60%;
  height: 50%;
  background:
    linear-gradient(#eef1f7, #eef1f7) 6% 8% / 24% 5% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 6% 20% / 9% 7% no-repeat,
    linear-gradient(#5ccf8a, #5ccf8a) 18% 20% / 9% 7% no-repeat,
    linear-gradient(#ffc04d, #ffc04d) 30% 20% / 9% 7% no-repeat,
    linear-gradient(#f3f4f8, #f3f4f8) 6% 92% / 56% 20% no-repeat,
    #fff;
}

.p-chart {
  position: absolute;
  left: 6%;
  top: 36%;
  width: 56%;
  height: 34%;
  overflow: visible;
}

.p-chart path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.6s var(--ease) calc(var(--rd, 0s) + .5s);
}

.p-card.in .p-chart path {
  stroke-dashoffset: 0;
}

.p-ring {
  position: absolute;
  right: 8%;
  top: 22%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--acc) 0 var(--ring, 0%), #f1e6ec var(--ring, 0%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
}

.p-bars {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 24%;
  height: 26%;
  background:
    linear-gradient(var(--acc), var(--acc)) 0 100% / 12% 40% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 22% 100% / 12% 70% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 44% 100% / 12% 55% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 66% 100% / 12% 90% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 88% 100% / 12% 75% no-repeat;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s var(--ease) calc(var(--rd, 0s) + .7s);
}

.p-card.in .p-bars {
  transform: none;
}

@property --ring {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.p-ring {
  transition: --ring 1.6s var(--ease) calc(var(--rd, 0s) + .6s);
}

.p-card.in .p-ring {
  --ring: 68%;
}

/* desk / monitor variant */
.p-monitor {
  position: absolute;
  z-index: 2;
  left: 30%;
  top: 26%;
  width: 60%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: #1d1d22;
  padding: 3%;
  box-shadow: 0 22px 30px -18px rgba(18, 18, 42, .55);
  translate: calc(var(--mx) * 8px) calc(var(--py) * -10px + var(--my) * 6px);
  transition: translate .6s cubic-bezier(.25, .8, .25, 1), transform .8s var(--ease);
}

.p-monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14%;
  height: 28%;
  translate: -50% 0;
  background: linear-gradient(90deg, #c9c9cf, #f1f1f4 50%, #b9b9c0);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.p-screen {
  display: block;
  height: 100%;
  border-radius: 2px;
  background:
    linear-gradient(var(--acc), var(--acc)) 0 0 / 16% 100% no-repeat,
    linear-gradient(#eef1f7, #eef1f7) 24% 12% / 30% 7% no-repeat,
    linear-gradient(#f5e4ea, #f5e4ea) 24% 34% / 20% 18% no-repeat,
    linear-gradient(#f5e4ea, #f5e4ea) 50% 34% / 20% 18% no-repeat,
    radial-gradient(circle, #2b2b33 0 45%, transparent 47%) 92% 30% / 20% 34% no-repeat,
    repeating-linear-gradient(#fff 0 6px, #eef1f7 6px 7px) 24% 88% / 58% 34% no-repeat,
    #fff;
}

.p-note {
  position: absolute;
  z-index: 3;
  left: 10%;
  top: 36%;
  width: 30%;
  height: 26%;
  border-radius: 5px;
  background:
    linear-gradient(#eef1f7, #eef1f7) 12% 20% / 50% 9% no-repeat,
    linear-gradient(var(--acc), var(--acc)) 12% 76% / 36% 14% no-repeat,
    linear-gradient(#e7ebf3, #e7ebf3) 12% 44% / 74% 6% no-repeat,
    #fff;
  box-shadow: 0 14px 26px -12px rgba(18, 18, 42, .4);
  translate: calc(var(--mx) * -10px) calc(var(--py) * 18px + var(--my) * -8px);
  transition: translate .6s cubic-bezier(.25, .8, .25, 1), transform .8s var(--ease);
}

.p-cup {
  position: absolute;
  z-index: 3;
  left: 12%;
  bottom: 9%;
  width: 7%;
  height: 13%;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(90deg, #d8cfc8, #fff 45%, #cfc4bc);
}

.p-cup::before {
  content: "";
  position: absolute;
  inset: -40% 20% 100%;
  background: linear-gradient(#e3a43b, #8a5a1f);
  border-radius: 2px;
  transform: rotate(10deg);
  box-shadow: 4px 2px 0 -1px #6f8f6a;
}

.t-cream::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(#e8dad1, #dccbc0);
}

.p-link:hover .p-monitor {
  transform: translateY(-4%) scale(1.03);
}

.p-link:hover .p-note {
  transform: translate(-6%, -10%) rotate(-3deg);
}

/* =========================================================
   CARD INFO
   ========================================================= */
.p-info {
  padding-top: 14px;
}

.p-name {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  transition: color .3s;
}

.p-desc {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
}

.p-desc span:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.p-arrow {
  position: relative;
  flex: 1 0 34px;
  max-width: 62px;
  height: 1px;
  margin-left: auto;
  background: currentColor;
  opacity: .7;
  transform-origin: right;
  transition: max-width .7s var(--ease), color .3s, opacity .3s;
}

.p-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.p-link:hover .p-name {
  color: var(--pink);
}

.p-link:hover .p-arrow {
  max-width: 96px;
  color: var(--pink);
  opacity: 1;
}

/* empty state */
.p-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 60px 0 20px;
  text-align: center;
  color: var(--muted);
  font-size: 17px;
}

.p-empty[hidden] {
  display: none;
}

/* =========================================================
   CURSOR BUBBLE
   ========================================================= */
.p-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  pointer-events: none;
  display: none;
}

.p-cursor span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: 0 14px 30px -10px rgba(226, 13, 121, .7);
  transform: scale(0);
  transition: transform .5s var(--ease);
}

.p-cursor.on span {
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .p-cursor {
    display: block;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
  .p-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 0;
  }

  .p-brand {
    font-size: clamp(14px, 2.4vw, 20px);
  }
}

@media (max-width: 767px) {
  .p-hero-panel {
    padding-inline: 14px;
  }

  .p-search {
    height: 48px;
    padding-left: 14px;
  }

  .p-search:focus-within {
    width: 100%;
    height: 52px;
  }

  .p-search input {
    font-size: 14px;
  }

  .p-tabs-wrap {
    width: calc(100% + 28px);
    margin-inline: -14px;
    padding-inline: 14px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }

  .p-tabs {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .p-tab {
    font-size: 14px;
    padding: 7px 12px;
  }
}

@media (max-width: 575px) {
  .p-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .p-brand {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .p-card,
  .js .p-card .p-info {
    opacity: 1;
    transform: none;
  }

  .js .p-card .p-media {
    clip-path: none;
  }

  .p-chart path {
    stroke-dashoffset: 0;
  }

  .p-bars {
    transform: none;
  }
}