/* Brighter public marketing system: dashboard structure with richer color. */
.public-refresh {
  --bg: #11162a;
  --panel: #202943;
  --panel-2: #26314f;
  --text: #fbfcff;
  --muted: #bec8d5;
  --line: rgba(226,235,255,.17);
  --purple: #8b5cf6;
  --blue: #4f8cff;
  --cyan: #45d7ef;
  --green: #43dfa7;
  color-scheme: dark;
  background:
    radial-gradient(circle at 10% 5%, rgba(132,85,255,.28), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(52,211,153,.24), transparent 25%),
    linear-gradient(145deg, #171b38 0%, #13233c 45%, #14322f 100%);
  background-attachment: fixed;
}

.public-refresh::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.public-refresh .page-design-bg,
.public-refresh .contact-design-bg { opacity: .6; }

.public-refresh .home-orb,
.public-refresh .features-orb,
.public-refresh .pricing-orb,
.public-refresh .contact-orb {
  background:
    radial-gradient(circle at 14% 12%, rgba(139,92,246,.28), transparent 27%),
    radial-gradient(circle at 86% 20%, rgba(69,215,239,.2), transparent 26%),
    radial-gradient(circle at 72% 78%, rgba(67,223,167,.18), transparent 29%);
}

.public-refresh nav.unified-site-nav {
  background: rgba(23,28,55,.78);
  border-bottom-color: rgba(226,235,255,.14);
  box-shadow: 0 14px 44px rgba(7,12,30,.18);
}

.public-refresh nav.unified-site-nav .nav-links {
  background: rgba(31,39,69,.88);
  border-color: rgba(226,235,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(7,12,30,.18);
}

.public-refresh nav.unified-site-nav .nav-links a { color: #c0c8d8; }
.public-refresh nav.unified-site-nav .nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.public-refresh nav.unified-site-nav .nav-links a.active,
.public-refresh nav.unified-site-nav .nav-links a[aria-current="page"] {
  background: linear-gradient(120deg, rgba(139,92,246,.28), rgba(67,223,167,.2));
  box-shadow: inset 0 0 0 1px rgba(105,230,187,.34), 0 10px 28px rgba(80,94,240,.13);
}

.public-refresh .btn-primary {
  background: linear-gradient(112deg, #8754ff, #4d82ff 57%, #36d9a1);
  box-shadow: 0 15px 38px rgba(74,91,232,.28);
}

.public-refresh .btn-ghost,
.public-refresh .btn-secondary {
  background: rgba(255,255,255,.075);
  border-color: rgba(226,235,255,.2);
  color: #f6f8ff;
}

.public-refresh .btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

.public-refresh .badge,
.public-refresh .live-pill,
.public-refresh .pricing-badges span,
.public-refresh .feature-pill,
.public-refresh .plan-tag,
.public-refresh .eyebrow {
  border-color: rgba(203,218,255,.18);
  color: #d8e2ff;
}

.public-refresh .badge,
.public-refresh .live-pill,
.public-refresh .pricing-badges span,
.public-refresh .feature-pill,
.public-refresh .plan-tag {
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.public-refresh .gradient-text {
  background: linear-gradient(90deg, #fff 2%, #a9b8ff 34%, #68e8c0 72%, #d4fff0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.public-refresh .lead,
.public-refresh .section-head p,
.public-refresh p { color: var(--muted); }

.public-refresh main > section {
  position: relative;
  border-top: 1px solid transparent;
}

.public-refresh main > section:not(:first-child):nth-of-type(even) {
  background: linear-gradient(180deg, rgba(115,132,198,.08), rgba(255,255,255,.025));
  border-top-color: rgba(226,235,255,.08);
  border-bottom: 1px solid rgba(226,235,255,.08);
}

.public-refresh .home-hero,
.public-refresh .features-hero.pro,
.public-refresh .pricing-hero-pro,
.public-refresh .contact-hero-pro {
  padding-top: 104px;
  padding-bottom: 92px;
}

.public-refresh .home-hero::before,
.public-refresh .features-hero.pro::before,
.public-refresh .pricing-hero-pro::before {
  background: radial-gradient(circle, rgba(93,224,186,.3), rgba(86,111,255,.12) 40%, transparent 68%);
}

.public-refresh .hero-copy h1,
.public-refresh .features-hero h1,
.public-refresh .pricing-copy h1,
.public-refresh .contact-copy h1 {
  text-shadow: 0 18px 55px rgba(25,30,70,.28);
}

.public-refresh .command-card,
.public-refresh .feature-command,
.public-refresh .current-plan-card,
.public-refresh .contact-card-pro {
  border-color: rgba(220,232,255,.2);
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.3), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(67,223,167,.2), transparent 34%),
    linear-gradient(155deg, rgba(47,57,96,.94), rgba(24,51,65,.92));
  box-shadow: 0 36px 100px rgba(8,14,38,.3), inset 0 1px 0 rgba(255,255,255,.07);
}

.public-refresh .hero-video-preview,
.public-refresh .preview-video.pro {
  background:
    radial-gradient(circle at 42% 28%, rgba(90,232,188,.38), transparent 33%),
    linear-gradient(135deg, rgba(116,95,235,.32), rgba(36,82,90,.46));
  border-color: rgba(230,239,255,.17);
}

.public-refresh .stat,
.public-refresh .usage-mini,
.public-refresh .metric-mini,
.public-refresh .proof-item,
.public-refresh .feature-proof-strip > div {
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  border-color: rgba(226,235,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.public-refresh .workflow-card,
.public-refresh .feature-card-pro,
.public-refresh .realtime-card,
.public-refresh .compare-card-pro,
.public-refresh .feature-stack-card,
.public-refresh .support-card,
.public-refresh .faq-card,
.public-refresh .card,
.public-refresh .inbox-card,
.public-refresh .comparison-card,
.public-refresh .agency-pro {
  border-color: rgba(222,233,255,.17);
  background:
    radial-gradient(circle at 8% 0%, rgba(122,93,240,.16), transparent 34%),
    linear-gradient(145deg, rgba(45,54,89,.9), rgba(29,57,67,.84));
  box-shadow: 0 24px 74px rgba(7,14,37,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

.public-refresh .workflow-card:hover,
.public-refresh .feature-card-pro:hover,
.public-refresh .support-card:hover,
.public-refresh .faq-card:hover {
  transform: translateY(-6px);
  border-color: rgba(104,232,190,.36);
  box-shadow: 0 30px 86px rgba(24,38,82,.3), 0 0 44px rgba(69,215,239,.08);
}

.public-refresh .workflow-card .icon,
.public-refresh .feature-card-pro .icon,
.public-refresh .support-card .icon,
.public-refresh .card .icon,
.public-refresh .contact-point span {
  background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(67,223,167,.2));
  border-color: rgba(145,215,230,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.public-refresh .middle-spotlight .spotlight-shell,
.public-refresh .final-cta {
  border-color: rgba(220,232,255,.19);
  background:
    radial-gradient(circle at 10% 15%, rgba(139,92,246,.32), transparent 38%),
    radial-gradient(circle at 90% 82%, rgba(67,223,167,.22), transparent 34%),
    linear-gradient(130deg, rgba(39,46,84,.95), rgba(24,62,68,.92));
  box-shadow: 0 34px 100px rgba(8,15,40,.28);
}

.public-refresh .price-card-pro,
.public-refresh .upgraded-price-card {
  border-color: rgba(222,233,255,.18);
  background: linear-gradient(155deg, rgba(47,56,91,.96), rgba(28,52,66,.94));
  box-shadow: 0 24px 70px rgba(7,14,37,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

.public-refresh .price-card-pro.featured,
.public-refresh .upgraded-price-card.featured {
  border-color: rgba(112,234,193,.44);
  background:
    radial-gradient(circle at top, rgba(139,92,246,.32), transparent 40%),
    linear-gradient(155deg, rgba(53,61,105,.98), rgba(25,69,70,.96));
  box-shadow: 0 34px 100px rgba(29,43,99,.32), 0 0 70px rgba(67,223,167,.1);
}

.public-refresh .price-card-pro,
.public-refresh .upgraded-price-card {
  --plan-accent: #8b5cf6;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 30px 28px 26px;
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.public-refresh [data-plan-card="Free"] { --plan-accent: #60a5fa; }
.public-refresh [data-plan-card="Creator"] { --plan-accent: #43dfa7; }
.public-refresh [data-plan-card="Pro"] { --plan-accent: #a78bfa; }

.public-refresh .price-card-pro::before,
.public-refresh .upgraded-price-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  top: -135px;
  right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--plan-accent) 34%, transparent), transparent 68%);
  pointer-events: none;
}

.public-refresh .price-card-pro::after,
.public-refresh .upgraded-price-card::after {
  content: "";
  position: absolute;
  inset: 0 22px auto;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--plan-accent), transparent);
  opacity: .8;
}

.public-refresh .price-card-pro:hover,
.public-refresh .upgraded-price-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--plan-accent) 46%, transparent);
  box-shadow: 0 34px 90px rgba(7,14,37,.3), 0 0 45px color-mix(in srgb, var(--plan-accent) 10%, transparent);
}

.public-refresh .price-card-pro.featured,
.public-refresh .upgraded-price-card.featured {
  transform: translateY(-12px);
}

.public-refresh .price-card-pro.featured:hover,
.public-refresh .upgraded-price-card.featured:hover {
  transform: translateY(-18px);
}

.public-refresh .plan-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 42%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--plan-accent) 14%, rgba(15,24,48,.84));
  color: var(--plan-accent);
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--plan-accent) 15%, transparent);
}

.public-refresh .price-card-pro .plan-tag,
.public-refresh .upgraded-price-card .plan-tag {
  width: max-content;
  margin-bottom: 12px;
  border-color: color-mix(in srgb, var(--plan-accent) 34%, transparent);
  background: color-mix(in srgb, var(--plan-accent) 10%, transparent);
  color: color-mix(in srgb, var(--plan-accent) 75%, white);
}

.public-refresh .price-card-pro h3,
.public-refresh .upgraded-price-card h3 {
  margin: 0 0 5px;
  font-size: 30px;
  letter-spacing: -.04em;
}

.public-refresh .plan-kicker {
  min-height: 20px;
  color: #c4cfdf;
  font-size: 12px;
  font-weight: 850;
}

.public-refresh .price-card-pro .price,
.public-refresh .upgraded-price-card .price {
  margin: 20px 0 8px;
  font-size: clamp(44px,4.4vw,58px);
  line-height: .95;
}

.public-refresh .price-card-pro > p,
.public-refresh .upgraded-price-card > p {
  min-height: 48px;
  line-height: 1.55;
}

.public-refresh .feature-list,
.public-refresh .upgraded-price-card .features {
  margin: 23px 0 26px;
  padding-top: 21px;
  border-top: 1px solid rgba(225,235,255,.11);
}

.public-refresh .feature-list li,
.public-refresh .upgraded-price-card .features li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.35;
}

.public-refresh .feature-list li::before,
.public-refresh .upgraded-price-card .features li::before {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  margin: -1px 6px 0 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--plan-accent) 14%, transparent);
  color: var(--plan-accent);
  font-size: 10px;
}

.public-refresh .price-card-pro > .btn,
.public-refresh .upgraded-price-card > .btn {
  width: 100%;
  min-height: 50px;
  margin-top: auto;
  border-color: color-mix(in srgb, var(--plan-accent) 35%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--plan-accent) 82%, #5b21b6), color-mix(in srgb, var(--plan-accent) 72%, #2563eb));
  color: #fff;
  box-shadow: 0 15px 36px color-mix(in srgb, var(--plan-accent) 20%, transparent);
}

.public-refresh .popular-badge,
.public-refresh .upgraded-price-card .popular {
  top: 18px;
  right: 18px;
  border: 1px solid rgba(67,223,167,.38);
  background: rgba(20,72,65,.78);
  color: #8fffd4;
  box-shadow: 0 10px 28px rgba(24,185,130,.15);
}

.public-refresh .pricing-toggle .toggle,
.public-refresh .pricing-toggle.pro .toggle {
  background: rgba(255,255,255,.09);
  border-color: rgba(222,233,255,.18);
}

.public-refresh .pricing-toggle button.active,
.public-refresh .pricing-toggle.pro button.active {
  background: linear-gradient(110deg, rgba(139,92,246,.7), rgba(54,206,159,.62));
  color: #fff;
}

.public-refresh .save-chip {
  display: inline-flex;
  margin-left: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(67,223,167,.14);
  color: #8fffd4;
  font-size: 9px;
  letter-spacing: .02em;
  vertical-align: middle;
}

.public-refresh .pricing-toggle button.active .save-chip {
  background: rgba(7,20,18,.28);
  color: #d8fff0;
}

.public-refresh .billing-save-note {
  margin: -21px auto 38px;
  color: #9daac0;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.public-refresh .agency-pro {
  position: relative;
  overflow: hidden;
  border-color: rgba(167,139,250,.32);
  background:
    radial-gradient(circle at 6% 20%, rgba(139,92,246,.22), transparent 34%),
    radial-gradient(circle at 92% 70%, rgba(67,223,167,.17), transparent 35%),
    linear-gradient(140deg, rgba(42,48,84,.97), rgba(24,61,70,.95));
  box-shadow: 0 30px 90px rgba(8,15,40,.25);
}

.public-refresh .agency-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.public-refresh .agency-perks span {
  padding: 7px 10px;
  border: 1px solid rgba(222,233,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #cbd6e8;
  font-size: 10px;
  font-weight: 850;
}

.public-refresh .comparison-card {
  border-color: rgba(222,233,255,.16);
  background:
    radial-gradient(circle at 70% 0, rgba(67,223,167,.09), transparent 28%),
    linear-gradient(160deg, rgba(35,43,77,.96), rgba(21,45,59,.96));
  box-shadow: 0 28px 80px rgba(8,15,40,.24);
}

.public-refresh .comparison-table th {
  padding-block: 20px;
  color: #fff;
  font-size: 13px;
}

.public-refresh .comparison-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.025);
}

.public-refresh .comparison-table th:nth-child(3),
.public-refresh .comparison-table td:nth-child(3) {
  background: rgba(67,223,167,.055);
}

.public-refresh .comparison-table th:first-child,
.public-refresh .comparison-table td:first-child {
  color: #e8eef8;
  font-weight: 800;
}

.public-refresh .comparison-scroll-note {
  display: none;
  margin: -20px 0 12px;
  color: #9daac0;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.public-refresh .comparison-table th,
.public-refresh .comparison-table td {
  border-color: rgba(226,235,255,.1);
}

.public-refresh .comparison-table tbody tr:hover { background: rgba(255,255,255,.045); }

.public-refresh .contact-point {
  background: rgba(255,255,255,.075);
  border-color: rgba(222,233,255,.15);
}

.public-refresh .contact-card-pro input,
.public-refresh .contact-card-pro select,
.public-refresh .contact-card-pro textarea {
  background: rgba(13,21,45,.5);
  border-color: rgba(222,233,255,.17);
}

.public-refresh .contact-card-pro input:focus,
.public-refresh .contact-card-pro select:focus,
.public-refresh .contact-card-pro textarea:focus {
  border-color: rgba(89,229,184,.68);
  box-shadow: 0 0 0 4px rgba(67,223,167,.12);
}

.public-refresh .footer,
.public-refresh .unified-footer {
  margin-top: 0;
  background: rgba(20,25,49,.75);
  border-top-color: rgba(222,233,255,.13);
}

.public-refresh .trust-strip {
  padding: 0 0 34px;
  border: 0;
  background: transparent;
}

.public-refresh .trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(222,233,255,.16);
  border-radius: 22px;
  background: rgba(21,29,54,.72);
  box-shadow: 0 22px 60px rgba(7,14,37,.18), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

.public-refresh .trust-strip-grid > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 11px;
  align-items: center;
  min-width: 0;
  padding: 21px 20px;
  border-right: 1px solid rgba(222,233,255,.11);
}

.public-refresh .trust-strip-grid > div:last-child { border-right: 0; }
.public-refresh .trust-strip-grid strong { color: #fff; font-size: 13px; }
.public-refresh .trust-strip-grid small { grid-column: 2; color: #9facc1; font-size: 10px; line-height: 1.45; }

.public-refresh .trust-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67,223,167,.26);
  border-radius: 11px;
  background: rgba(67,223,167,.1);
  color: #8fffd4;
  font-size: 13px;
  font-weight: 900;
}

.public-refresh .product-proof-box {
  border: 1px solid rgba(222,233,255,.17);
  background:
    radial-gradient(circle at 10% 0%, rgba(139,92,246,.2), transparent 35%),
    linear-gradient(145deg, rgba(45,54,89,.92), rgba(29,57,67,.86));
  box-shadow: 0 28px 80px rgba(7,14,37,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.public-refresh .product-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.public-refresh .product-proof-grid > div {
  display: grid;
  gap: 9px;
  padding: 22px;
  border: 1px solid rgba(222,233,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}

.public-refresh .product-proof-grid span {
  color: #75ecc5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.public-refresh .product-proof-grid strong { color: #fff; }
.public-refresh .product-proof-grid small { color: #aeb9ca; line-height: 1.55; }

@media (max-width: 900px) {
  .public-refresh nav.unified-site-nav.open .nav-links,
  .public-refresh nav.unified-site-nav.open .nav-actions { background: rgba(28,35,66,.98); }
  .public-refresh .trust-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-refresh .trust-strip-grid > div:nth-child(2) { border-right: 0; }
  .public-refresh .trust-strip-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(222,233,255,.11); }
}

@media (max-width: 700px) {
  .public-refresh .home-hero,
  .public-refresh .features-hero.pro,
  .public-refresh .pricing-hero-pro,
  .public-refresh .contact-hero-pro { padding-top: 62px; padding-bottom: 62px; }
  .public-refresh main > section:not(:first-child) { padding-top: 58px; padding-bottom: 58px; }
  .public-refresh .command-card,
  .public-refresh .feature-command,
  .public-refresh .current-plan-card,
  .public-refresh .contact-card-pro { border-radius: 24px; }
  .public-refresh .price-card-pro,
  .public-refresh .upgraded-price-card {
    min-height: 0;
    padding: 25px 22px 22px;
    border-radius: 25px;
  }
  .public-refresh .price-card-pro.featured,
  .public-refresh .upgraded-price-card.featured,
  .public-refresh .price-card-pro.featured:hover,
  .public-refresh .upgraded-price-card.featured:hover {
    transform: none;
  }
  .public-refresh .plan-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
  }
  .public-refresh .price-card-pro > p,
  .public-refresh .upgraded-price-card > p { min-height: 0; }
  .public-refresh .billing-save-note { margin-top: -15px; }
  .public-refresh .agency-pro { padding: 24px 21px; }
  .public-refresh .agency-price { width: 100%; text-align: left; }
  .public-refresh .agency-price .btn { width: 100%; }
  .public-refresh .comparison-scroll-note { display: block; }
  .public-refresh .trust-strip { padding: 0 0 24px; }
  .public-refresh .trust-strip-grid { grid-template-columns: 1fr; border-radius: 18px; }
  .public-refresh .trust-strip-grid > div,
  .public-refresh .trust-strip-grid > div:nth-child(2) {
    padding: 17px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(222,233,255,.11);
  }
  .public-refresh .trust-strip-grid > div:last-child { border-bottom: 0; }
  .public-refresh .product-proof-grid { grid-template-columns: 1fr; }
}
