/* Manultas demo: the plans and gallery pages */
.pg-main { flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) max(16px, env(safe-area-inset-right, 0px)) 72px max(16px, env(safe-area-inset-left, 0px));
  color: #c9d3e4; font: 15px/1.6 "IBM Plex Sans", system-ui, sans-serif; }
.pg-label { color: #7f8ba3; font: 500 11px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.pg-hero h1 { margin: 10px 0 6px; color: #e7edf7; font: 600 clamp(30px, 4.4vw, 52px)/1.06 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
.pg-hero p { margin: 0; color: #9fb0cc; font-size: 17px; }
.pg-row { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.pg-sec { margin-top: 64px; }
.pg-sec > h2 { margin: 0 0 18px; color: #e7edf7; font: 600 24px/1.2 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.01em; }

/* plans */
.plans { margin-top: 36px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border: 1px solid rgba(140, 170, 220, 0.18); border-radius: 10px; background: #070b14; }
.plan.is-pick { border-color: rgba(255, 181, 71, 0.6); box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.25), 0 20px 60px rgba(255, 181, 71, 0.06); }
.plan.is-ent { background: linear-gradient(180deg, #0b1222, #070b14); }
.plan .tag { position: absolute; top: -10px; left: 20px; padding: 3px 8px; border-radius: 999px; background: #ffb547; color: #04060b; font: 600 10px/1.2 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.plan h2 { margin: 0; color: #e7edf7; font: 600 18px/1.2 "IBM Plex Sans", system-ui, sans-serif; }
.plan .price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plan .price b { color: #e7edf7; font: 600 34px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
.plan .price span { color: #7f8ba3; font-size: 13px; }
.plan .what { margin: 0; color: #9fb0cc; font-size: 14px; line-height: 1.5; min-height: 3em; }
.plan .credits { margin: 0; display: flex; align-items: center; gap: 8px; color: #e7edf7; font: 500 12px/1.3 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.plan .credits i, .g-price i { width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: #ffb547; box-shadow: 0 0 6px #ffb547; }
.plan ul { margin: 6px 0 auto; padding: 14px 0 18px; border-top: 1px solid rgba(140, 170, 220, 0.14); list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.plan li::before { content: "✓"; color: #ffb547; font-size: 13px; }

/* compare */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(140, 170, 220, 0.14); }
.cmp thead th { color: #7f8ba3; font: 500 11px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.cmp tbody th { color: #e7edf7; font-weight: 500; }
.cmp .y { color: #ffb547; }
.cmp .n { color: #4d5870; }

/* credits */
.faq details { border-bottom: 1px solid rgba(140, 170, 220, 0.14); padding: 14px 0; max-width: 820px; }
.faq summary { cursor: pointer; color: #e7edf7; font-weight: 500; }
.faq p { margin: 8px 0 0; color: #9fb0cc; }

/* gallery */
.g-tabs { margin: 30px 0 18px; display: flex; gap: 6px; }
.g-tabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(140, 170, 220, 0.22); background: none; color: #9fb0cc; cursor: pointer; font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif; }
.g-tabs button.is-on { background: #e7edf7; color: #04060b; border-color: #e7edf7; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.g-card { display: flex; flex-direction: column; border: 1px solid rgba(140, 170, 220, 0.18); border-radius: 10px; overflow: hidden; background: #070b14; transition: border-color 0.15s, transform 0.15s; }
.g-card:hover { border-color: rgba(255, 181, 71, 0.5); transform: translateY(-2px); }
.g-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: #060a14; overflow: hidden; }
.g-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-badge { position: absolute; left: 12px; top: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(4, 6, 11, 0.8); border: 1px solid rgba(255, 181, 71, 0.5); color: #ffb547;
  font: 500 10px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.g-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.g-body h2 { margin: 0; font: 600 19px/1.25 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.01em; }
.g-body h2 a { color: #e7edf7; text-decoration: none; }
.g-text { margin: 0; color: #9fb0cc; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-stats { margin: 0; color: #7f8ba3; font: 12px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.g-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid rgba(140, 170, 220, 0.12); font-size: 13px; }
.g-by { color: #7f8ba3; }
.g-price { display: inline-flex; align-items: center; gap: 6px; color: #e7edf7; font: 500 12px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.g-price.is-free { color: #7ee0a8; }
.g-acts { display: flex; gap: 8px; }
.g-acts .mn-btn { flex: 1; }
.g-empty { color: #7f8ba3; text-align: center; padding: 40px 0; }
.g-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-steps { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 6px; }
.g-quota { margin: 10px 0 0 !important; color: #ffb547 !important; font: 500 13px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace !important; }
.g-price.is-own { color: #9fb0cc; }
.g-badge.is-own { color: #9fb0cc; border-color: rgba(140, 170, 220, 0.4); }
.soon { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(126, 224, 168, 0.5); color: #7ee0a8; vertical-align: 1px;
  font: 500 10px/1.5 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.bill { margin-top: 30px; display: inline-flex; padding: 4px; gap: 4px; border: 1px solid rgba(140, 170, 220, 0.22); border-radius: 999px; }
.bill button { padding: 7px 16px; border-radius: 999px; border: 0; background: none; color: #9fb0cc; cursor: pointer; font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif; }
.bill button.is-on { background: #e7edf7; color: #04060b; }
.bill .save { margin-left: 4px; color: #7ee0a8; font-size: 11px; }
.bill button.is-on .save { color: #1a7f4b; }
.offer { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(255, 181, 71, 0.5); background: linear-gradient(90deg, rgba(255, 181, 71, 0.12), rgba(255, 181, 71, 0.02)); color: #e7edf7; font-size: 15px; }
.offer b { color: #ffb547; }
.offer-tag { padding: 3px 8px; border-radius: 999px; background: #ffb547; color: #04060b; font: 600 10px/1.3 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.offer + .bill { margin-top: 16px; }
.pg-h-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pg-h-offer .offer-tag { font-size: 12px; padding: 5px 11px; letter-spacing: 0.08em; }
.pg-hero + .bill { margin-top: 26px; }