/* ===================================================================
   FLOWTRIG — pricing.css
   World-class pricing: 4 billing tabs (Monthly / Yearly / One-time /
   Custom), tier cards with add-on dividers + count badges, and an
   expandable feature-comparison table. Uses global theme tokens.
   =================================================================== */

.pr-sec{ position:relative; }

/* ---- billing tabs ---- */
.pr-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:5px; gap:4px; position:relative; }
.pr-toggle button{ position:relative; z-index:1; padding:9px 18px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--tx-soft); display:inline-flex; align-items:center; gap:7px; transition:color .25s; white-space:nowrap; }
.pr-toggle button.on{ color:#fff; }
.pr-toggle .pr-pill{ position:absolute; top:5px; bottom:5px; border-radius:10px; background:var(--g-a160); box-shadow:0 6px 18px -8px rgba(43,232,129,.7); transition:left .32s cubic-bezier(.4,1.1,.4,1), width .32s cubic-bezier(.4,1.1,.4,1); z-index:0; }
.pr-toggle .save{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.18); }
.pr-toggle button:not(.on) .save{ background:var(--green-soft); color:var(--neon); }

/* ---- cards row ---- */
.pr-panel{ display:none; }
.pr-panel.active{ display:block; animation:pr-fade .45s ease; }
@keyframes pr-fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.pr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; margin-top:8px; }
.pr-grid.one{ grid-template-columns:minmax(0,520px); justify-content:center; }
@media(max-width:900px){ .pr-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

/* ---- mobile billing toggle: horizontal scroll, no overflow ---- */
@media(max-width:560px){
  .pr-toggle{ display:flex; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content:flex-start; }
  .pr-toggle::-webkit-scrollbar{ display:none; }
  .pr-toggle button{ flex:0 0 auto; padding:9px 14px; font-size:12.5px; white-space:nowrap; }
  .pr-toggle .pr-pill{ display:none; }
  .pr-toggle button.on{ background:var(--g-a160); border-radius:10px; }
}

/* ---- mobile pricing carousel: swipe through plans ---- */
@media(max-width:900px){
  .pr-panel.active .pr-grid{ display:flex; max-width:100%; margin-inline:0; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:20px 4px 12px; scroll-padding:0 16px; }
  .pr-panel.active .pr-grid::-webkit-scrollbar{ display:none; }
  .pr-panel.active .pr-grid.one{ justify-content:flex-start; }
  .pr-grid .pr-card{ flex:0 0 84%; max-width:340px; scroll-snap-align:center; }
  .pr-carousel-hint{ display:flex; }
}
.pr-carousel-hint{ display:none; align-items:center; justify-content:center; gap:10px; margin-top:6px; font-size:12px; color:var(--tx-mute); }
.pr-carousel-hint .dots{ display:flex; gap:6px; }
.pr-carousel-hint .dots i{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s, width .2s; }
.pr-carousel-hint .dots i.on{ width:18px; border-radius:3px; background:var(--neon); }
.pr-carousel-hint .arrow{ display:inline-flex; }
.pr-carousel-hint svg{ width:15px; height:15px; }
.pr-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px 24px; display:flex; flex-direction:column; transition:transform .25s, border-color .2s, box-shadow .25s; }
.pr-card:hover{ transform:translateY(-3px); border-color:var(--line-glow); box-shadow:0 24px 50px -30px rgba(0,0,0,.5); }
.pr-card.feat{ border-color:rgba(43,232,129,.45); background:linear-gradient(180deg, color-mix(in oklab,var(--neon) 10%, var(--surface)) 0%, var(--surface) 38%); box-shadow:0 0 50px -20px rgba(43,232,129,.5); }
.pr-card .pop{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--g-a160); color:#fff; font-weight:800; font-size:11px; letter-spacing:.04em; padding:5px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(43,232,129,.6); }
.pr-ico{ width:48px; height:48px; border-radius:14px; background:var(--green-soft); border:1px solid rgba(43,232,129,.2); display:flex; align-items:center; justify-content:center; color:var(--neon); margin-bottom:16px; }
.pr-card.feat .pr-ico{ background:var(--g-a160); color:#04140B; }
.pr-ico svg{ width:24px; height:24px; }
/* clean evenly-spaced brand chips (integrations style) */
.pr-brands{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.pr-brands i{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(12,28,22,.12); box-shadow:0 3px 8px -4px rgba(0,0,0,.28); transition:transform .25s cubic-bezier(.3,1.3,.4,1); }
.pr-card:hover .pr-brands i{ transform:translateY(-2px); }
.pr-brands i svg{ width:19px; height:19px; }
.pr-brands .b-wa{ color:#25D366; }
.pr-brands .b-ig{ color:#E1306C; }
.pr-brands .b-tg{ color:#2C9FE8; }
.pr-brands .b-sh{ color:#95BF46; }
.pr-brands .b-fb{ color:#1877F2; }
.pr-brands .b-woo{ padding:0; overflow:hidden; background:#873EFF; }
.pr-brands .b-woo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pr-name{ font-family:var(--font-d); font-size:23px; font-weight:600; letter-spacing:-.02em; }
.pr-badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:6px; margin-top:7px; }
.pr-badge.trial{ background:var(--green-soft); color:var(--neon); }
.pr-badge.paid{ background:rgba(91,157,246,.16); color:#5B9DF6; }
.pr-badge.custom{ background:rgba(122,108,246,.16); color:var(--purple-2); }
.pr-desc{ font-size:13px; color:var(--tx-mute); margin-top:12px; min-height:38px; line-height:1.45; }
.pr-price{ display:flex; align-items:baseline; gap:6px; margin-top:14px; flex-wrap:wrap; }
.pr-price .cur{ font-family:var(--font-d); font-size:24px; font-weight:600; color:var(--tx-soft); }
.pr-price .amt{ font-family:var(--font-d); font-size:46px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.pr-price .amt.sm{ font-size:34px; }
.pr-price .was{ font-size:17px; color:var(--tx-mute); text-decoration:line-through; font-family:var(--font-d); align-self:center; }
.pr-per{ font-size:12.5px; color:var(--tx-mute); margin-top:6px; }
.pr-cta{ margin-top:18px; width:100%; justify-content:center; }

.pr-feats{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
.pr-feats .fh{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-mute); display:flex; align-items:center; gap:7px; margin-top:4px; }
/* centered chip-divider category headings (QR Add-on style) */
.pr-cat{ display:flex; align-items:center; gap:8px; margin:7px 0 3px; }
.pr-cat::before, .pr-cat::after{ content:""; height:1px; flex:1; background:var(--line); }
.pr-cat span{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pr-cat span svg{ width:11px; height:11px; }
.pr-cat.inc span{ background:var(--green-soft); color:var(--neon); }
.pr-cat.mon span{ background:rgba(122,108,246,.16); color:var(--purple-2); }
.pr-cat.gc span{ background:rgba(91,157,246,.16); color:#5B9DF6; }
.pr-cat.st span{ background:rgba(244,180,58,.16); color:var(--amber); }
.pr-cat.ig span{ background:rgba(243,104,176,.16); color:#F368B0; }
.pr-feat .fk.fkb{ background:linear-gradient(160deg,#9D90FF,#6A5AE0); color:#fff; box-shadow:0 3px 8px -3px rgba(106,90,224,.6); }
.pr-feat .fk.fkb svg{ width:12px; height:12px; }
.pr-feats .fh:first-child{ margin-top:0; }
.pr-feats .fh .fhi{ width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; }
.pr-feats .fh .fhi svg{ width:11px; height:11px; }
.pr-feats .fh.ig{ color:#F368B0; } .pr-feats .fh.ig .fhi{ background:rgba(243,104,176,.16); color:#F368B0; }
.pr-feats .fh.gc{ color:#5B9DF6; } .pr-feats .fh.gc .fhi{ background:rgba(91,157,246,.16); color:#5B9DF6; }
.pr-feats .fh.st{ color:var(--amber); } .pr-feats .fh.st .fhi{ background:rgba(244,180,58,.16); color:var(--amber); }
.pr-feats .fh.mon{ color:var(--purple-2); } .pr-feats .fh.mon .fhi{ background:rgba(122,108,246,.16); color:var(--purple-2); }
.pr-feat{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tx-soft); }
.pr-feat .fk{ width:18px; height:18px; flex:0 0 18px; border-radius:50%; background:var(--green-soft); color:var(--neon); display:inline-flex; align-items:center; justify-content:center; }
.pr-feat .fk svg{ width:11px; height:11px; }
.pr-feat .fk.x{ background:rgba(255,107,87,.14); color:var(--rose); }
.pr-feat.off{ color:var(--tx-mute); opacity:.7; }
.pr-feat .cnt{ margin-left:auto; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--fill-2); color:var(--tx-soft); }
/* add-on divider chips */
.pr-addon{ display:flex; align-items:center; gap:8px; margin:4px 0 1px; }
.pr-addon::before, .pr-addon::after{ content:""; height:1px; flex:1; background:var(--line); }
.pr-addon span{ font-size:10px; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.pr-addon.qr span{ background:rgba(244,180,58,.16); color:var(--amber); }
.pr-addon.ig span{ background:rgba(232,99,170,.16); color:#F368B0; }
.pr-addon.tg span{ background:rgba(91,157,246,.16); color:#4FA3FF; }

/* trust strip under cards */
.pr-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.pr-trust .t{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--tx-soft); }
.pr-trust .t svg{ width:17px; height:17px; color:var(--neon); }

/* ---- comparison table ---- */
.pr-compare{ margin-top:48px; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); }
.pr-compare .pc-head{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; background:var(--surface-2); border-bottom:1px solid var(--line); }
.pr-compare .pc-head .pc-c{ padding:16px 18px; text-align:center; }
.pr-compare .pc-head .pc-c:first-child{ text-align:left; display:flex; align-items:center; font-family:var(--font-d); font-weight:600; font-size:15px; }
.pc-head .pc-c .pn{ font-family:var(--font-d); font-weight:600; font-size:15px; }
.pc-head .pc-c.hl .pn{ color:var(--neon); }
.pc-head .pc-c .pp{ font-size:11px; color:var(--tx-mute); margin-top:2px; }
.pc-rows{ position:relative; }
.pc-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; border-bottom:1px solid var(--line-2); transition:background .15s; }
.pc-row:hover{ background:color-mix(in oklab, var(--neon) 4%, transparent); }
.pc-row:last-child{ border-bottom:0; }
.pc-row .lbl{ padding:13px 18px; font-size:13px; font-weight:500; color:var(--tx); display:flex; align-items:center; gap:8px; }
.pc-row .lbl .gi{ font-size:10px; font-weight:700; }
.pc-row .v{ padding:13px 14px; text-align:center; font-size:13px; font-weight:600; color:var(--tx-soft); display:flex; align-items:center; justify-content:center; border-left:1px solid var(--line-2); }
.pc-row .v.hl{ background:color-mix(in oklab, var(--neon) 5%, transparent); }
.pc-yes{ width:22px; height:22px; border-radius:50%; background:var(--green-soft); color:var(--neon); display:inline-flex; align-items:center; justify-content:center; }
.pc-yes svg{ width:12px; height:12px; }
.pc-no{ width:22px; height:22px; border-radius:50%; background:rgba(255,107,87,.14); color:var(--rose); display:inline-flex; align-items:center; justify-content:center; }
.pc-no svg{ width:11px; height:11px; }
/* collapsible region */
.pc-extra{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1); }
.pc-extra > div{ overflow:hidden; }
.pr-compare.open .pc-extra{ grid-template-rows:1fr; }
.pc-fade{ position:relative; }
.pr-compare:not(.open) .pc-fade::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:80px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--surface)); }
.pc-more{ display:flex; justify-content:center; padding:18px; border-top:1px solid var(--line-2); }
.pc-more button{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--neon); background:var(--green-soft); border:1px solid rgba(43,232,129,.25); padding:9px 18px; border-radius:999px; transition:background .2s, transform .2s; }
.pc-more button:hover{ background:color-mix(in oklab, var(--neon) 18%, transparent); transform:translateY(-1px); }
.pc-more button .chev{ transition:transform .3s; }
.pr-compare.open .pc-more button .chev{ transform:rotate(180deg); }
/* channel-colored labels */
.gi-ig{ color:#F368B0; } .gi-tg{ color:#4FA3FF; } .gi-fb{ color:#5B8DEF; }

@media(max-width:760px){
  .pr-compare{ overflow-x:auto; }
  .pr-compare .pc-head, .pc-row{ grid-template-columns:1.4fr .9fr .9fr .9fr; min-width:540px; }
}
@media(prefers-reduced-motion: reduce){ .pc-extra{ transition:none; } }

/* ===================================================================
   PRICING PAGE — vendor comparison table
   =================================================================== */
.pv-cmp{ border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); }
.pv-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }
.pv-row.head{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.pv-row:not(.head):not(:last-child){ border-bottom:1px solid var(--line-2); }
.pv-row .c{ padding:15px 14px; font-size:13.5px; display:flex; align-items:center; justify-content:center; text-align:center; border-left:1px solid var(--line-2); }
.pv-row .c.lbl{ justify-content:flex-start; text-align:left; font-weight:600; border-left:0; gap:8px; }
.pv-row.head .c{ font-family:var(--font-d); font-weight:600; font-size:14.5px; flex-direction:column; gap:2px; }
.pv-row .c.us{ background:color-mix(in oklab,var(--neon) 8%, transparent); }
.pv-row.head .c.us{ color:var(--neon); position:relative; }
.pv-row.head .c.us .pin{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--g-a160); padding:2px 8px; border-radius:999px; }
.pv-yes{ width:24px;height:24px;border-radius:50%; background:var(--green-soft); color:var(--neon); display:inline-flex; align-items:center; justify-content:center; }
.pv-yes svg{ width:13px; height:13px; }
.pv-no{ width:24px;height:24px;border-radius:50%; background:rgba(255,107,87,.14); color:var(--rose); display:inline-flex; align-items:center; justify-content:center; }
.pv-no svg{ width:12px; height:12px; }
.pv-row .c .sm{ font-size:11.5px; color:var(--tx-mute); }
@media(max-width:760px){ .pv-cmp{ overflow-x:auto; } .pv-row{ grid-template-columns:1.5fr .9fr .9fr .9fr .9fr; min-width:660px; } }

/* transparency note above plans (white pill, one line) */
.pr-transparency{ display:flex; align-items:center; gap:9px; justify-content:center; width:fit-content; max-width:100%; margin:0 auto 24px; padding:10px 18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); font-size:13px; line-height:1.45; color:var(--tx-soft); }
.pr-transparency svg{ width:16px; height:16px; flex:0 0 16px; color:var(--neon); }
.pr-transparency strong{ color:var(--neon-dim); font-weight:700; }
@media(max-width:640px){ .pr-transparency{ font-size:12px; align-items:flex-start; } }