.pui-grid, .pui-table-wrap, .pui-faq-list, .pui-note {
  --pui-bg: #0e0f11;
  --pui-bg-2: #141518;
  --pui-line: rgba(255, 255, 255, 0.10);
  --pui-line-strong: rgba(255, 255, 255, 0.22);
  --pui-text: #e9ebee;
  --pui-text-strong: #f7f7f8;
  --pui-muted: #9aa0a7;
  --pui-faint: #8b9097;
  --pui-silver: #d3d7dc;
  font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
}


.pui-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; align-items: stretch;
  margin: 34px 0 0; padding: 0;
}
.pui-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; isolation: isolate;
  padding: 32px 30px 30px; border-radius: 16px; text-align: left;
  background:
    radial-gradient(at 0% 100%, rgba(211, 215, 220, 0.16) 0px, transparent 55%),
    radial-gradient(at 88% 8%, rgba(211, 215, 220, 0.10) 0px, transparent 50%),
    #0e0f11;
  color: var(--pui-text); border: 1px solid var(--pui-line);
  box-shadow: inset 0 -16px 28px -18px rgba(255, 255, 255, 0.22);
}
.pui-card:hover { border-color: rgba(255, 255, 255, 0.18); }
.pui-card.is-featured { border-color: var(--pui-silver); box-shadow: inset 0 -16px 28px -18px rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(211, 215, 220, 0.28), 0 22px 48px -22px rgba(0, 0, 0, 0.75); }
.pui-card.is-current { border-color: rgba(255, 255, 255, 0.34); }

@property --pui-edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pui-card::before {
  content: ''; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pui-edge-angle), rgba(211, 215, 220, 0) 0deg, rgba(211, 215, 220, 0) 200deg, rgba(247, 248, 248, 0.85) 268deg, rgba(211, 215, 220, 0) 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pui-edge-travel 8s linear infinite;
}
.pui-card.is-featured::before {
  background: conic-gradient(from var(--pui-edge-angle), rgba(211, 215, 220, 0.22) 0deg, rgba(211, 215, 220, 0.22) 190deg, #ffffff 268deg, rgba(211, 215, 220, 0.22) 350deg);
}
.pui-card > * { position: relative; z-index: 1; }
@keyframes pui-edge-travel { to { --pui-edge-angle: 360deg; } }
.pui-ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, 'IBM Plex Mono', monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  padding: 5px 12px; border-radius: 999px; background: #0e0f11; color: #c9cdd2; border: 1px solid rgba(255, 255, 255, 0.22);
}
.pui-card.is-featured .pui-ribbon { background: #e6e9ec; color: #0a0a0b; border-color: #e6e9ec; }
.pui-name {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-display, 'Archivo', 'Arial Narrow', sans-serif); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #aeb3b9;
}
.pui-card.is-featured .pui-name { color: #f2f3f4; }
.pui-current-chip {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; padding: 3px 8px; border-radius: 999px;
  color: var(--pui-text-strong); border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.08);
}
.pui-price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; color: #f7f7f8; }
.pui-amt { font-family: var(--font-display, 'Archivo', sans-serif); font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pui-per { font-size: 0.875rem; color: var(--pui-faint); }
.pui-billed { margin-top: 10px; font-size: 0.8125rem; color: var(--pui-faint); }
.pui-features { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pui-features li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.90625rem; line-height: 1.4; color: #e3e5e8; }
.pui-check { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.pui-check circle { fill: #c8ccd1; }
.pui-check path { stroke: #0a0a0b; }


.pui-sub { margin: 0 0 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8b9097; }
.pui-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 28px; }
.pui-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 0.75rem; color: #e9ebee; background: #141518; border: 1px solid rgba(255, 255, 255, 0.10);
}
.pui-chip img { display: block; flex: 0 0 auto; }
.pui-chip-more { color: #9aa0a7; }
.pui-features + .pui-sub { margin-top: -6px; }

.pui-btn {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin-top: auto; min-height: 46px; padding: 0 16px;
  font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 999px;
  color: #f2f3f4; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pui-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.32); }
.pui-btn:focus-visible { outline: 2px solid #e9ecef; outline-offset: 3px; }
.pui-btn-primary { background: linear-gradient(180deg, #ffffff 0%, #c3c8ce 100%); color: #0a0a0b; border-color: #e9ecef; box-shadow: inset 0 -2px 14px -4px rgba(255, 255, 255, 0.9); }
.pui-btn-primary:hover { background: linear-gradient(180deg, #ffffff 0%, #d9dde2 100%); border-color: #ffffff; }
.pui-btn.is-current, .pui-btn[disabled] { background: transparent; box-shadow: none; color: var(--pui-faint); border-color: rgba(255, 255, 255, 0.12); cursor: default; }
.pui-btn.is-current:hover, .pui-btn[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, 0.12); }

.pui-note { margin: 16px 2px 0; font-size: 0.78125rem; line-height: 1.5; color: var(--pui-faint); background: none; }


.pui-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--pui-line); border-radius: 16px; background: var(--pui-bg); }
.pui-table { min-width: 640px; color: var(--pui-text); }
.pui-trow { display: grid; align-items: center; border-top: 1px solid var(--pui-line); }
.pui-trow.pui-cols-3 { grid-template-columns: minmax(220px, 2.4fr) repeat(3, minmax(0, 1fr)); }
.pui-thead { border-top: 0; background: var(--pui-bg); }
.pui-tlabel { padding: 15px 20px; font-size: 0.875rem; line-height: 1.35; color: var(--pui-text); }
.pui-thead .pui-tlabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pui-faint); align-self: end; }
.pui-tplan { padding: 20px 10px 16px; text-align: center; }
.pui-tplan.is-current { background: rgba(255, 255, 255, 0.04); }
.pui-tplan-name { font-size: 1rem; font-weight: 700; color: var(--pui-text-strong); }
.pui-tplan-price { margin-top: 3px; font-size: 0.8125rem; color: var(--pui-muted); }
.pui-tcell { padding: 15px 10px; text-align: center; font-size: 0.875rem; color: var(--pui-text); font-variant-numeric: tabular-nums; }
.pui-tick { display: inline-flex; }
.pui-tsec > summary {
  list-style: none; cursor: pointer; padding: 15px 20px; border-top: 1px solid var(--pui-line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pui-text-strong); background: var(--pui-bg-2);
}
.pui-tsec > summary::-webkit-details-marker { display: none; }
.pui-tsec > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--pui-muted); border-bottom: 2px solid var(--pui-muted); transform: rotate(-135deg) translate(-2px, -2px); transition: transform .2s; }
.pui-tsec:not([open]) > summary::after { transform: rotate(45deg); }
.pui-tsec > summary:focus-visible { outline: 2px solid var(--pui-silver); outline-offset: -2px; }


.pui-faq-list { margin-top: 14px; border: 1px solid var(--pui-line); border-radius: 16px; background: var(--pui-bg); overflow: hidden; }
.pui-faq-item { border-top: 1px solid var(--pui-line); }
.pui-faq-item:first-child { border-top: 0; }
.pui-faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--pui-text-strong);
}
.pui-faq-item > summary::-webkit-details-marker { display: none; }
.pui-faq-item > summary::after {
  content: '+'; flex: 0 0 auto; font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--pui-silver);
}
.pui-faq-item[open] > summary::after { content: '\2212'; }
.pui-faq-item > summary:focus-visible { outline: 2px solid var(--pui-silver); outline-offset: -2px; }
.pui-faq-a { padding: 0 24px 22px; color: var(--pui-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 70ch; }
.pui-faq-a p { margin: 0 0 10px; }
.pui-faq-a a { color: var(--pui-silver); text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .pui-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .pui-tsec > summary::after { transition: none; } .pui-card::before { animation: none; } }


.pui-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 18px 0 0; }
.pui-pack {
  position: relative; display: flex; flex-direction: column; min-width: 0; isolation: isolate; text-align: left;
  padding: 24px 24px 22px; border-radius: 14px; color: #e3e5e8; border: 1px solid rgba(255, 255, 255, 0.10);
  background: radial-gradient(at 0% 100%, rgba(211, 215, 220, 0.12) 0px, transparent 55%), #0e0f11;
  box-shadow: inset 0 -14px 24px -18px rgba(255, 255, 255, 0.18);
  font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
}
.pui-pack:hover { border-color: rgba(255, 255, 255, 0.18); }
.pui-pack::before {
  content: ''; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pui-edge-angle), rgba(211, 215, 220, 0) 0deg, rgba(211, 215, 220, 0) 210deg, rgba(232, 235, 238, 0.55) 268deg, rgba(211, 215, 220, 0) 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pui-edge-travel 11s linear infinite;
}
.pui-pack > * { position: relative; z-index: 1; }
.pui-pack-name { font-family: var(--font-display, 'Archivo', sans-serif); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #aeb3b9; }
.pui-pack-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-family: var(--font-display, 'Archivo', sans-serif); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #f7f7f8; font-variant-numeric: tabular-nums; }
.pui-pack-price span { font-family: var(--font-ui, Inter, sans-serif); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: #8b9097; }
.pui-pack-credits { margin-top: 14px; font-size: 0.90625rem; font-weight: 600; color: #e3e5e8; }
.pui-pack-note { margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; color: #8b9097; }
@media (max-width: 760px) { .pui-packs { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .pui-pack::before { animation: none; } }