/* V1 pricing layout — loaded only on pricing.html */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pricing-page .bill-toggle button.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.pricing-page {
  --blue: #1e9bf0;
  --blue-600: #0e86db;
  --yellow: #fbbf24;
  --yellow-deep: #f59e0b;
  --green: #5bc940;
  --green-deep: #3fae28;
  --pink: #f0418a;
  --pink-deep: #db2777;
  --ink: #0e1217;
  --text: #10151c;
  --muted: #7c8593;
  --muted-2: #9aa3b1;
  --line: #e6e9ef;
  --line-strong: #d7dce4;
  --panel: #eef1f5;
  --card: #ffffff;
  --bg: #f5f7fa;
  --bg-2: #ffffff;
  --shadow-sm: 0 4px 14px rgba(16, 21, 28, .06);
  --shadow-md: 0 14px 40px rgba(16, 21, 28, .10);
  --shadow-lift: 0 24px 70px rgba(16, 21, 28, .16);
  --shadow-blue: 0 16px 40px rgba(30, 155, 240, .38);
  --r-pill: 999px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.pricing-page .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.pricing-page .eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricing-page .c-blue { color: var(--blue); }
.pricing-page .c-green { color: var(--green-deep); }
.pricing-page .c-pink { color: var(--pink-deep); }
.pricing-page .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pricing-page .btn svg { width: 17px; height: 17px; }
.pricing-page .btn.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.pricing-page .btn.btn-primary:hover {
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(45, 75, 240, .42);
}
.pricing-page .btn.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.pricing-page .btn.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pricing-page .btn-block { width: 100%; justify-content: center; }
.pricing-page .nav-pill .btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
  transform: none;
}
.pricing-page .nav-pill .btn-primary:hover { opacity: 0.9; transform: none; background: var(--ink); }

    /* section head */
    .section-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto
    }

    .section-head h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(30px, 4vw, 44px);
      letter-spacing: -.025em;
      line-height: 1.05;
      margin-top: 14px
    }

    .section-head p {
      color: var(--muted);
      font-size: 17px;
      margin-top: 14px
    }

    /* Polar success callback */
    .thanks {
      padding: 28px 0 0
    }

    .thanks-card {
      max-width: 560px;
      margin: 0 auto;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-md);
      padding: 36px 28px 32px;
      text-align: center
    }

    .thanks-check {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 20px;
      background: var(--green);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 32px;
      font-weight: 800;
      line-height: 1
    }

    .thanks-card h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: 26px;
      letter-spacing: -.03em
    }

    .thanks-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
      margin-top: 8px
    }

    .thanks-card .btn {
      margin-top: 20px
    }

    /* pricing hero */
    .phero {
      text-align: center;
      padding: 72px 0 26px
    }

    .phero-title {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(38px, 5.4vw, 66px);
      letter-spacing: -.03em;
      line-height: 1.02;
      margin-top: 14px
    }

    .phero-sub {
      color: var(--muted);
      font-size: 18px;
      max-width: 520px;
      margin: 18px auto 0;
      line-height: 1.6
    }

    .bill-toggle {
      display: inline-flex;
      gap: 5px;
      margin-top: 30px;
      padding: 5px;
      background: var(--panel);
      border-radius: var(--r-pill)
    }

    .bill-toggle button {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: var(--body);
      font-weight: 600;
      font-size: 14px;
      color: var(--muted);
      padding: 9px 20px;
      border-radius: var(--r-pill);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .18s ease
    }

    .bill-toggle button.sel {
      background: var(--card);
      color: var(--text);
      box-shadow: var(--shadow-sm)
    }

    .bill-toggle .save {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--green-deep);
      background: rgba(91, 201, 64, .16);
      padding: 2px 8px;
      border-radius: var(--r-pill)
    }

    /* plan cards */
    .plans {
      padding: 20px 0 40px
    }

    .plan-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 920px;
      margin: 0 auto
    }

    .plan {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 34px 30px;
      position: relative;
      display: flex;
      flex-direction: column;
      transition: transform .22s ease, box-shadow .22s ease
    }

    .plan:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md)
    }

    .plan.featured {
      border: 2px solid var(--blue);
      box-shadow: var(--shadow-blue)
    }

    .plan-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--blue);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: var(--r-pill);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      box-shadow: var(--shadow-blue)
    }

    .plan-badge svg {
      width: 13px;
      height: 13px
    }

    .plan-name {
      font-family: var(--display);
      font-weight: 800;
      font-size: 23px;
      letter-spacing: -.01em
    }

    .plan-for {
      color: var(--muted);
      font-size: 14px;
      margin-top: 6px;
      min-height: 40px
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      gap: 3px;
      margin-top: 18px
    }

    .plan-price .cur {
      font-family: var(--display);
      font-weight: 700;
      font-size: 26px;
      color: var(--text)
    }

    .plan-price .amt {
      font-family: var(--display);
      font-weight: 800;
      font-size: 52px;
      letter-spacing: -.03em;
      line-height: 1
    }

    .plan-price .per {
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
      margin-left: 4px
    }

    .plan-billed {
      color: var(--muted);
      font-size: 13px;
      margin-top: 6px;
      min-height: 20px
    }

    .plan-note {
      color: var(--muted);
      font-size: 13px;
      margin-top: 6px;
      min-height: 40px;
      line-height: 1.5
    }

    .plan .btn-block {
      margin-top: 22px
    }

    .plan-feats {
      list-style: none;
      margin-top: 26px;
      display: flex;
      flex-direction: column;
      gap: 15px
    }

    .plan-feats li {
      display: flex;
      gap: 12px;
      align-items: flex-start
    }

    .plan-feats .ck {
      width: 22px;
      height: 22px;
      border-radius: 7px;
      flex: none;
      display: grid;
      place-items: center;
      margin-top: 1px;
      background: rgba(91, 201, 64, .16);
      color: var(--green-deep)
    }

    .plan-feats .ck-blue {
      background: rgba(30, 155, 240, .14);
      color: var(--blue)
    }

    .plan-feats .ck svg {
      width: 13px;
      height: 13px
    }

    .plan-feats b {
      font-family: var(--display);
      font-weight: 700;
      font-size: 14.5px;
      display: block
    }

    .plan-feats span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45
    }

    .plan-foot {
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      margin-top: 30px
    }

    .plan-foot a {
      color: var(--blue);
      font-weight: 600
    }

    /* fixed price slider */
    .fixed {
      padding: 90px 0
    }

    .slider-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 38px 40px;
      max-width: 940px;
      margin: 48px auto 0;
      box-shadow: var(--shadow-sm)
    }

    .slider-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap
    }

    .slider-val {
      font-family: var(--display);
      font-weight: 800;
      font-size: 30px;
      letter-spacing: -.02em
    }

    .slider-val span {
      font-size: 15px;
      color: var(--muted);
      font-weight: 500
    }

    .slider-hint {
      color: var(--muted);
      font-size: 13px
    }

    #pricing-volume {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 8px;
      margin-top: 20px;
      background: var(--panel);
      outline: none;
      cursor: pointer
    }

    #pricing-volume::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--blue);
      border: 4px solid var(--card);
      box-shadow: var(--shadow-blue);
      cursor: pointer
    }

    #pricing-volume::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--blue);
      border: 4px solid var(--card);
      cursor: pointer
    }

    .vs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 34px
    }

    .vs {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 22px 20px;
      text-align: center
    }

    .vs-likz {
      background: var(--blue);
      border-color: var(--blue)
    }

    .vs-name {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .vs-likz .vs-name {
      color: rgba(255, 255, 255, .85)
    }

    .vs-amt {
      display: block;
      font-family: var(--display);
      font-weight: 800;
      font-size: 38px;
      letter-spacing: -.03em;
      margin-top: 10px;
      line-height: 1
    }

    .vs-likz .vs-amt {
      color: #fff
    }

    .vs-amt small {
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0
    }

    .vs-likz .vs-amt small {
      color: rgba(255, 255, 255, .8)
    }

    .vs p {
      font-size: 12.5px;
      color: var(--muted);
      margin-top: 12px;
      line-height: 1.5
    }

    .vs-likz p {
      color: rgba(255, 255, 255, .85)
    }

    .vs-foot {
      text-align: center;
      color: var(--muted);
      font-size: 14.5px;
      margin-top: 26px
    }

    .vs-foot b {
      color: var(--text)
    }

    /* feature table */
    .ftable-sec {
      padding: 90px 0;
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .ftable-scroll {
      overflow-x: auto;
      margin-top: 48px
    }

    .ftable {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px
    }

    .ftable th,
    .ftable td {
      padding: 16px 18px;
      text-align: center;
      border-bottom: 1px solid var(--line)
    }

    .ftable thead th {
      font-family: var(--display);
      font-weight: 700;
      font-size: 14px;
      color: var(--muted);
      vertical-align: bottom
    }

    .ftable thead .likz-col {
      color: var(--text);
      font-size: 15px
    }

    .ftable thead .likz-col img.logo {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      margin: 0 auto 6px;
      box-shadow: none
    }

    .ftable .feat-col {
      text-align: left;
      font-family: var(--display);
      font-weight: 700;
      font-size: 14.5px;
      color: var(--text);
      width: 34%
    }

    .ftable td {
      font-size: 14px;
      color: var(--muted)
    }

    .ftable tbody .likz-col {
      background: rgba(30, 155, 240, .05)
    }

    .ftable tbody tr:hover td {
      background: rgba(30, 155, 240, .03)
    }

    .ftable tbody tr:hover .likz-col {
      background: rgba(30, 155, 240, .08)
    }

    .ftable i {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      font-style: normal;
      font-size: 12px;
      font-weight: 700
    }

    .ftable i.yes {
      background: rgba(91, 201, 64, .16);
      color: var(--green-deep)
    }

    .ftable i.yes::before {
      content: "✓"
    }

    .ftable i.no {
      background: var(--panel);
      color: var(--muted-2)
    }

    .ftable i.no::before {
      content: "—"
    }

    .ftable i.mid {
      width: auto;
      padding: 0 10px;
      border-radius: var(--r-pill);
      background: rgba(251, 191, 36, .16);
      color: var(--yellow-deep);
      font-size: 11px;
      letter-spacing: .02em
    }

    /* testimonials */
    .quotes {
      padding: 90px 0
    }

    .quote-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 48px
    }

    .quote {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 28px 26px;
      transition: transform .2s ease, box-shadow .2s ease
    }

    .quote:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md)
    }

    .quote .stars {
      color: var(--yellow);
      font-size: 16px;
      letter-spacing: 2px
    }

    .quote blockquote {
      font-size: 15px;
      line-height: 1.65;
      margin-top: 14px;
      color: var(--text)
    }

    .quote figcaption {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line)
    }

    .quote .q-name {
      font-family: var(--display);
      font-weight: 700;
      font-size: 14.5px
    }

    .quote .q-role {
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px
    }

    /* trust */
    .trust {
      padding: 20px 0 90px
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .trust-item {
      text-align: center;
      padding: 10px
    }

    .trust-item .t-ico {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--panel);
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      color: var(--blue)
    }

    .trust-item .t-ico svg {
      width: 26px;
      height: 26px
    }

    .trust-item h3 {
      font-family: var(--display);
      font-weight: 700;
      font-size: 18px
    }

    .trust-item p {
      color: var(--muted);
      font-size: 14px;
      margin-top: 8px;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.55
    }

    /* faq */
    .faq {
      padding: 90px 0;
      background: var(--bg-2);
      border-top: 1px solid var(--line)
    }

    .faq-list {
      max-width: 760px;
      margin: 44px auto 0;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .faq-item {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      overflow: hidden
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      cursor: pointer;
      background: transparent;
      border: none;
      font-family: var(--display);
      font-weight: 700;
      font-size: 16px;
      color: var(--text);
      padding: 20px 22px
    }

    .faq-q svg {
      width: 20px;
      height: 20px;
      color: var(--muted);
      flex: none;
      transition: transform .25s ease
    }

    .faq-item.open .faq-q svg {
      transform: rotate(45deg)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease
    }

    .faq-a p {
      padding: 0 22px 20px;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.65
    }


.pricing-page .faq.pricing-faq {
  max-width: none;
  margin: 0;
  padding: 90px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.pricing-page .faq-list {
  max-width: 760px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-page .faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 0;
}
.pricing-page .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  padding: 20px 22px;
  list-style: none;
}
.pricing-page .faq summary::-webkit-details-marker { display: none; }
.pricing-page .faq summary::after {
  content: "+";
  color: var(--muted);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.pricing-page .faq details[open] summary::after { content: "×"; }
.pricing-page .faq details p {
  margin: 0;
  padding: 0 22px 20px;
  max-width: none;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.pricing-page .faq details a { color: var(--blue); font-weight: 600; }

@media (max-width: 820px) {
  .pricing-page .plan-grid { grid-template-columns: 1fr; max-width: 440px; }
  .pricing-page .vs-grid { grid-template-columns: 1fr; }
  .pricing-page .quote-grid { grid-template-columns: 1fr; }
  .pricing-page .trust-grid { grid-template-columns: 1fr; }
  .pricing-page .slider-card { padding: 28px 22px; }
}
@media (max-width: 560px) {
  .pricing-page .wrap { padding: 0 18px; }
}