/* Social Browser pricing page — visual system v100 — 2026-10-06 */
.pricing-page{
  --pricing-line:rgba(112,183,230,.18);
  --pricing-line-strong:rgba(95,190,247,.42);
  --pricing-text:#f3f8fc;
  --pricing-muted:#9bb5c9;
  --pricing-blue:#48b9f3;
  --pricing-green:#59d69d;
  --pricing-surface:#0a1d2d;
  --pricing-surface-2:#0c2234;
}
.pricing-page .ia-shell{
  width:min(1320px,calc(100% - 56px));
}
.pricing-page .ia-hero{padding:64px 0 46px}
.pricing-page .pricing-plans-section{
  padding:56px 0 68px;
  background:
    radial-gradient(circle at 50% 0,rgba(47,155,225,.075),transparent 34%),
    #07111d;
}
.pricing-page .pricing-plans-section>.ia-shell>.ia-head{
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}
.pricing-page .pricing-plans-section>.ia-shell>.ia-head .ia-eyebrow{
  margin-bottom:10px;
}
.pricing-page .pricing-plans-section>.ia-shell>.ia-head h2{
  margin-bottom:12px;
  color:#fff;
  font-size:clamp(36px,4.4vw,54px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.pricing-page .pricing-plans-section>.ia-shell>.ia-head p{
  max-width:820px;
  margin-inline:auto;
  color:#a8c0d3;
  font-size:16px;
  line-height:1.7;
}

.pricing-page .pricing-plan-grid{
  align-items:stretch;
  gap:18px;
}
.pricing-page .pricing-plan-card{
  position:relative;
  display:flex;
  min-height:505px;
  flex-direction:column;
  padding:24px 24px 20px;
  overflow:hidden;
  border:1px solid var(--pricing-line);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(13,37,56,.98),rgba(8,27,42,.98));
  box-shadow:
    0 16px 42px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.pricing-page .pricing-plan-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(78,190,246,.66),transparent);
  opacity:.62;
}
.pricing-page .pricing-plan-card:hover{
  transform:translateY(-4px);
  border-color:var(--pricing-line-strong);
  background:
    linear-gradient(180deg,rgba(15,43,65,.99),rgba(9,29,45,.99));
  box-shadow:
    0 22px 52px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.pricing-page .pricing-plan-card[data-plan-id="free"]{
  background:linear-gradient(180deg,rgba(11,31,47,.96),rgba(8,25,39,.98));
}
.pricing-page .pricing-plan-card[data-plan-id="max"]{
  z-index:2;
  transform:translateY(-5px);
  border-color:rgba(85,218,154,.52);
  background:
    radial-gradient(circle at 50% 0,rgba(70,211,145,.105),transparent 30%),
    linear-gradient(180deg,#0d2b31,#09222c 100%);
  box-shadow:
    0 24px 60px rgba(14,99,74,.18),
    0 0 0 1px rgba(86,215,155,.08),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.pricing-page .pricing-plan-card[data-plan-id="max"]::before{
  height:4px;
  background:linear-gradient(90deg,transparent,#58d89d 20%,#7ee8b7 50%,#58d89d 80%,transparent);
  opacity:.9;
}
.pricing-page .pricing-plan-card[data-plan-id="max"]:hover{
  transform:translateY(-8px);
  border-color:rgba(93,226,164,.72);
  box-shadow:
    0 28px 66px rgba(14,99,74,.24),
    0 0 0 1px rgba(86,215,155,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.pricing-page .pricing-plan-card>.ia-eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:25px;
  margin:0 0 15px;
  padding:5px 9px;
  border:1px solid rgba(83,185,242,.20);
  border-radius:999px;
  background:rgba(72,170,229,.07);
  color:#81ccf6;
  font-size:10px;
  letter-spacing:.105em;
}
.pricing-page .pricing-plan-card[data-plan-id="max"]>.ia-eyebrow{
  border-color:rgba(84,214,154,.30);
  background:rgba(84,214,154,.09);
  color:#8ce9bc;
}
.pricing-page .pricing-plan-card h3{
  min-height:44px;
  margin:0;
  color:var(--pricing-text);
  font-family:inherit;
  font-size:21px;
  font-weight:780;
  line-height:1.23;
  letter-spacing:-.022em;
}
.pricing-page .pricing-plan-card .ia-price{
  display:flex;
  min-height:48px;
  align-items:baseline;
  gap:7px;
  margin:6px 0 8px;
  color:#fff;
  font-family:inherit;
  font-size:52px;
  font-weight:900;
  line-height:.98;
  letter-spacing:-.055em;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
.pricing-page .pricing-plan-card .ia-price small{
  color:#9fc5dd;
  font-size:13px;
  font-weight:800;
  letter-spacing:0;
  white-space:nowrap;
}
.pricing-page .pricing-plan-card[data-plan-id="max"] .ia-price{
  color:#f3fff9;
  text-shadow:0 0 22px rgba(81,216,153,.10);
}
.pricing-page .pricing-plan-card .ia-check{
  flex:1;
  margin:0 0 18px;
}
.pricing-page .pricing-plan-card .ia-check li{
  min-height:40px;
  margin:0;
  padding:8px 0 8px 27px;
  border-top:1px solid rgba(130,187,223,.10);
  color:#b9ccda;
  font-size:13.5px;
  line-height:1.45;
}
.pricing-page .pricing-plan-card .ia-check li:first-child{
  border-top:0;
}
.pricing-page .pricing-plan-card .ia-check li::before{
  top:8px;
  left:2px;
  color:var(--pricing-green);
  font-size:15px;
}
.pricing-page .pricing-plan-card .v2-button{
  width:100%;
  min-height:48px;
  margin-top:auto;
  border-radius:11px;
  border:1px solid #3c9cde;
  background:linear-gradient(120deg,#267fd2,#229fd1);
  color:#fff!important;
  font-size:13.5px;
  font-weight:820;
  box-shadow:0 10px 24px rgba(24,114,184,.16);
  opacity:1;
}
.pricing-page .pricing-plan-card .v2-button:hover,
.pricing-page .pricing-plan-card .v2-button:focus-visible{
  border-color:#65c5fa;
  background:linear-gradient(120deg,#328ddd,#2aaddd);
  color:#fff!important;
  box-shadow:0 14px 30px rgba(24,114,184,.24);
}

.pricing-page .pricing-plan-card[data-plan-id="free"] .v2-browser-version-badge{
  display:none!important;
}

.pricing-page .pricing-plan-card[data-plan-id="free"] .v2-button{
  border-color:rgba(114,189,235,.34);
  background:#0e2b40;
  color:#d9effc!important;
  box-shadow:none;
}
.pricing-page .pricing-plan-card[data-plan-id="free"] .v2-button:hover{
  border-color:rgba(114,203,252,.58);
  background:#13364f;
}
.pricing-page .pricing-plan-card[data-plan-id="max"] .v2-button{
  border-color:#55d79c;
  background:linear-gradient(120deg,#209b6d,#36bd83);
  color:#04140d!important;
  box-shadow:0 12px 28px rgba(38,184,123,.18);
}
.pricing-page .pricing-plan-card[data-plan-id="max"] .v2-button:hover,
.pricing-page .pricing-plan-card[data-plan-id="max"] .v2-button:focus-visible{
  border-color:#7ae9b6;
  background:linear-gradient(120deg,#28ab78,#44ca91);
  color:#03120c!important;
  box-shadow:0 16px 34px rgba(38,184,123,.25);
}

/* Keep the comparison table visually tied to the pricing cards. */
.pricing-page .pricing-comparison-section{
  padding:70px 0;
}
.pricing-page .pricing-comparison-section .ia-head{
  max-width:850px;
  margin-bottom:30px;
}
.pricing-page .pricing-comparison-section .ia-table-wrap{
  border-color:var(--pricing-line);
  box-shadow:0 14px 36px rgba(0,0,0,.10);
}
.pricing-page .pricing-comparison-section .v2-plan-table th,
.pricing-page .pricing-comparison-section .v2-plan-table td{
  padding:17px 18px;
}
.pricing-page .pricing-comparison-section .v2-plan-table thead th:nth-child(4),
.pricing-page .pricing-comparison-section .v2-plan-table tbody td:nth-child(4){
  background:rgba(72,206,142,.065);
}
.pricing-page .pricing-comparison-section .v2-plan-table thead th:nth-child(4){
  color:#90ebbb;
}

/* RTL-safe checkmarks and price flow. */
html[dir="rtl"] .pricing-page .pricing-plan-card .ia-check li{
  padding-right:27px;
  padding-left:0;
}
html[dir="rtl"] .pricing-page .pricing-plan-card .ia-check li::before{
  right:2px;
  left:auto;
}
html[dir="rtl"] .pricing-page .pricing-plan-card .ia-price{
  direction:ltr;
  justify-content:flex-end;
}

@media(max-width:1180px){
  .pricing-page .pricing-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pricing-page .pricing-plan-card{
    min-height:500px;
  }
  .pricing-page .pricing-plan-card[data-plan-id="max"]{
    transform:none;
  }
  .pricing-page .pricing-plan-card[data-plan-id="max"]:hover{
    transform:translateY(-4px);
  }
}
@media(max-width:700px){
  .pricing-page .ia-shell{
    width:min(100% - 28px,1320px);
  }
  .pricing-page .ia-hero{padding:42px 0 32px}
  .pricing-page .pricing-plans-section{
    padding:38px 0 50px;
  }
  .pricing-page .pricing-plans-section>.ia-shell>.ia-head{
    margin-bottom:28px;
    text-align:start;
  }
  .pricing-page .pricing-plans-section>.ia-shell>.ia-head h2{
    font-size:36px;
  }
  .pricing-page .pricing-plan-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .pricing-page .pricing-plan-card{
    min-height:0;
    padding:22px 20px;
  }
  .pricing-page .pricing-plan-card h3{
    min-height:0;
    font-size:20px;
  }
  .pricing-page .pricing-plan-card .ia-price{
    min-height:0;
    font-size:46px;
  }
  .pricing-page .pricing-plan-card .ia-check li{
    min-height:0;
  }
}