.tabs {
  display: inline-flex;
  background: var(--bg-2);
  padding: 5px;
  border-radius: 999px;
  margin: 0 auto var(--s2);
  border: 1px solid var(--line);
  position: relative;
  gap: 4px;
}
.tab {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .2s;
  position: relative;
  z-index: 1;
}
.tab.active { color: var(--white); }
.tab-pill {
  position: absolute;
  top: 5px; bottom: 5px;
  background: var(--ink);
  border-radius: 999px;
  transition: all .3s cubic-bezier(.7,.2,.2,1);
  z-index: 0;
}

.tab-row { display: flex; justify-content: center; }

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--s3);
}
.highlight {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s, box-shadow .2s;
}
.highlight:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.highlight.stable {
  background: linear-gradient(135deg, var(--ink), oklch(28% 0.06 252));
  color: var(--white);
  border-color: transparent;
}
.highlight.variable {
  background: linear-gradient(135deg, oklch(96% 0.05 145), var(--white));
  border-color: oklch(82% 0.12 145);
}
.highlight .pill-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: oklch(98% 0.01 252);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}
.highlight.stable .pill-label { background: oklch(30% 0.06 252); color: var(--green); }
.highlight.variable .pill-label { background: var(--ink); color: var(--green); }
.highlight h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.highlight .redacted {
  display: flex;
  align-items: center;
  gap: 12px;
}
.highlight .redacted-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, oklch(70% 0.02 252), oklch(85% 0.02 252));
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.highlight.stable .redacted-mark {
  background: linear-gradient(135deg, oklch(35% 0.04 252), oklch(45% 0.04 252));
}
.highlight .redacted-mark::after {
  content: "?";
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  opacity: 0.7;
}
.highlight .redacted-name { flex: 1; }
.highlight .redacted-name .blur {
  display: block;
  height: 14px;
  width: 110px;
  background: linear-gradient(90deg, oklch(85% 0.01 252), oklch(80% 0.01 252));
  border-radius: 4px;
  filter: blur(4px);
  margin-bottom: 6px;
}
.highlight.stable .redacted-name .blur { background: linear-gradient(90deg, oklch(45% 0.04 252), oklch(40% 0.04 252)); }
.highlight .redacted-name small {
  font-size: 12px;
  color: var(--ink-3);
}
.highlight.stable .redacted-name small { color: oklch(75% 0.04 252); }
.highlight .price-mega {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.highlight .price-mega .euro { font-size: 56px; }
.highlight .price-mega .unit {
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  font-family: var(--body);
  letter-spacing: 0;
}
.highlight.stable .price-mega .unit { color: oklch(75% 0.04 252); }
.highlight .price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.highlight .price-row > div {
  background: var(--bg-2);
  padding: 10px 12px;
  border-radius: 10px;
}
.highlight.stable .price-row > div {
  background: oklch(30% 0.06 252);
}
.highlight .price-row small {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.highlight.stable .price-row small { color: oklch(75% 0.04 252); }
.highlight .price-row strong {
  font-size: 14px;
  font-weight: 700;
}
.highlight .reveal-btn { margin-top: 4px; }
.highlight .corner-deco {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
}
.highlight.stable .corner-deco {
  background: radial-gradient(circle, oklch(78% 0.22 145 / 0.25), transparent 65%);
}
.highlight.variable .corner-deco {
  background: radial-gradient(circle, oklch(58% 0.22 252 / 0.18), transparent 65%);
}

.price-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 24px;
  transition: all .2s;
  display: flex; flex-direction: column; gap: 14px;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.price-card.featured {
  border-color: var(--blue);
  box-shadow: var(--shadow-blue);
  background: linear-gradient(180deg, var(--white), var(--blue-50));
}
.price-card .tag {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.price-card .tag.blue { background: var(--blue); color: var(--white); }
.price-card .tag.dark { background: var(--ink); color: var(--green); }

.price-head { display: flex; align-items: center; gap: 12px; }
.price-head h4 { font-size: 18px; }
.price-head small { color: var(--ink-3); font-size: 13px; font-weight: 500; }

.price-main {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin: 6px 0;
}
.price-main .big {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-main .unit { color: var(--ink-3); font-size: 13px; }
.price-main .delta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-600);
  background: var(--green-100);
  padding: 4px 8px;
  border-radius: 999px;
}
.price-main .delta.up {
  color: var(--danger);
  background: oklch(95% 0.04 25);
}

.price-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 13px;
}
.price-meta .row {
  display: flex; flex-direction: column;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 8px;
}
.price-meta .row small { color: var(--ink-3); font-size: 11px; }
.price-meta .row strong { font-weight: 700; }

.price-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.price-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.price-tag.green { background: var(--green-100); color: oklch(34% 0.12 145); border-color: oklch(82% 0.12 145); }
.price-tag.blue { background: var(--blue-50); color: var(--blue-700); border-color: oklch(82% 0.08 252); }

.avg-toggle-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.avg-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
}
.avg-toggle-prominent {
  padding: 6px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  border-radius: 999px;
  min-width: 340px;
}
.avg-toggle button {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .2s;
  z-index: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.avg-toggle-prominent button {
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  justify-content: center;
}
.avg-toggle button.active { color: var(--white); }
.avg-toggle .pill {
  position: absolute;
  top: 5px; bottom: 5px;
  background: var(--ink);
  border-radius: 999px;
  transition: all .3s cubic-bezier(.7,.2,.2,1);
}
.avg-toggle-prominent .pill {
  top: 6px; bottom: 6px;
}

.avg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: var(--s2);
  perspective: 1200px;
}
.avg-card {
  background: transparent;
  position: relative;
  min-height: 200px;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.7,.1,.25,1);
}
.avg-card.flipped { transform: rotateY(180deg); }
.avg-card .face {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 22px;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.avg-card .back { transform: rotateY(180deg); }
.avg-card.now .face {
  background: linear-gradient(135deg, var(--ink), oklch(25% 0.05 252));
  color: var(--white);
  border-color: transparent;
}
.avg-card .age {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.avg-card.now .face .age { color: var(--green); }
.avg-card .price {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.avg-card .price .cents { font-size: 18px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.avg-card.now .face .price .cents { color: oklch(75% 0.05 252); }
.avg-card .label { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.avg-card.now .face .label { color: oklch(75% 0.05 252); }
.avg-card .bar {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.avg-card .bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  transition: width 1s cubic-bezier(.6,.2,.2,1);
}
.avg-card.now .face .bar { background: oklch(28% 0.04 252); }
.avg-card.now .face .bar > div { background: var(--green); }
.avg-card .annual-calc {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  font-family: var(--display);
  letter-spacing: -0.01em;
}
.avg-card.now .back .annual-calc { color: oklch(75% 0.05 252); }
.avg-card .annual-diff {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.avg-card.now .back .annual-diff {
  background: oklch(34% 0.12 145);
  color: var(--green);
}
.avg-card .back .annual-diff.up {
  background: oklch(95% 0.04 25);
  color: var(--danger);
}

@media (min-width: 720px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .avg-grid { grid-template-columns: repeat(4, 1fr); }
  .highlight-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}