/* Public pages share the workspace's frosted material, at marketing-page scale. */
body.public-site {
  --public-glass: rgb(255 255 255 / .58);
  --public-glass-raised: rgb(255 255 255 / .82);
  --public-glass-soft: rgb(255 255 255 / .32);
  --public-glass-edge: rgb(255 255 255 / .82);
  --public-glass-line: rgb(123 152 190 / .16);
  --public-glass-shadow: inset 0 1px 0 rgb(255 255 255 / .88), 0 8px 28px rgb(38 78 132 / .07);
  --public-glass-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .94), 0 12px 32px rgb(38 78 132 / .1);
  --public-glass-filter: blur(24px) saturate(135%);
  --public-glass-filter-soft: blur(12px) saturate(135%);
  --public-nav-surface: rgb(255 255 255 / .94);
  --public-nav-filter: blur(6px) saturate(105%);
  --public-glass-tint: rgb(225 238 255 / .32);
  --public-glass-tint-raised: rgb(225 238 255 / .42);
  --public-glass-shadow-modal: inset 0 1px 0 rgb(255 255 255 / .88), 0 24px 64px rgb(20 38 69 / .18);
  --public-glass-radius: 14px;
  --public-glass-radius-sm: 10px;
  --public-glass-ambient-blue: rgb(194 219 251 / .42);
  --public-glass-ambient-cyan: rgb(196 236 245 / .34);
  --public-glass-dark: rgb(20 38 69 / .94);
  --public-glass-dark-edge: rgb(255 255 255 / .12);
  --public-glass-dark-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 8px 28px rgb(20 38 69 / .1);
}

/* Navigation stays visible; its glass background appears after leaving the top. */
body.public-site .site-header {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.public-site .site-header.is-scrolled {
  border-bottom-color: var(--public-glass-edge);
  background: var(--public-nav-surface);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .55), 0 4px 16px rgb(38 78 132 / .035);
  -webkit-backdrop-filter: var(--public-nav-filter);
  backdrop-filter: var(--public-nav-filter);
}
body.public-site.menu-open .site-header {
  border-bottom-color: var(--public-glass-line);
  background: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Quiet light behind the glass gives it depth while the page stays white. */
.public-site :is(.intro-grid, .component-grid, .feature-grid, .workflow, .measurement-rows,
  .engine-concept, .engine-platform-list, .engine-action-types, .pricing-grid,
  .provider-comparison, .plan-comparison, .faq-groups, .news-grid) {
  position: relative;
  isolation: isolate;
}
.public-site :is(.intro-grid, .component-grid, .feature-grid, .workflow, .measurement-rows,
  .engine-concept, .engine-platform-list, .engine-action-types, .pricing-grid,
  .provider-comparison, .plan-comparison, .faq-groups, .news-grid)::before {
  position: absolute;
  z-index: -1;
  inset: -20px -12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 18% 25%, var(--public-glass-ambient-blue), transparent 66%),
    radial-gradient(ellipse at 88% 76%, var(--public-glass-ambient-cyan), transparent 64%);
  filter: blur(28px);
  content: "";
  pointer-events: none;
}

/* One material for standalone cards, data panels, FAQs and screenshot frames. */
.public-site :is(.intro-card, .component-card, .feature-card, .workflow > li, .faq-list details,
  .story-faq details, .engine-concept-panel, .engine-action-types article,
  .pricing-card, .info-card, .service-panel, .service-delivery, .service-channels > div,
  .coverage-demo, .trend-visual, .source-facts > div,
  .competition-facts > span, .engine-platform-list > li, .service-review > li,
  .product-preview, .story-shot, .provider-table-wrap, .story-lightbox, .news-card,
  .news-empty, .terms-contact, .pricing-contact-business-card) {
  border: 1px solid var(--public-glass-edge);
  border-radius: var(--public-glass-radius);
  background: var(--public-glass);
  box-shadow: var(--public-glass-shadow);
  -webkit-backdrop-filter: var(--public-glass-filter);
  backdrop-filter: var(--public-glass-filter);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease),
    border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

/* Repeated mini-panels and insets sit on a lighter, quieter glass layer. */
.public-site :is(.faq-category-nav a, .feature-mark, .publishing-points > span) {
  border: 1px solid var(--public-glass-edge);
  border-radius: var(--public-glass-radius-sm);
  background: var(--public-glass-soft);
  box-shadow: inset 0 1px 0 var(--public-glass-edge);
  -webkit-backdrop-filter: var(--public-glass-filter);
  backdrop-filter: var(--public-glass-filter);
}
.public-site :is(.intro-inset, .record-visual, .daily-visual) {
  border: 1px solid var(--public-glass-edge);
  border-radius: var(--public-glass-radius-sm);
  background: var(--public-glass-soft);
  box-shadow: inset 0 1px 0 var(--public-glass-edge);
}
.public-site .service-panel .competition-facts > span {
  border-radius: var(--public-glass-radius-sm);
  background: var(--public-glass-soft);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.public-site .service-review > li {
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
}
.public-site .service-review > li > span { margin-bottom: 0; }
.public-site .feature-card.feature-card-primary { border: 0; }
.public-site .feature-card-primary .platform-logo {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Panel headings share the surface instead of painting an opaque band over it. */
.public-site :is(.engine-concept-panel-head, .story-shot figcaption,
  .product-preview figcaption, .provider-score-table caption, .provider-score-table thead th) {
  border-color: var(--public-glass-line);
  background: var(--public-glass-soft);
}
.public-site .engine-concept-panel .engine-concept-panel-head { background: var(--public-glass-soft); }
.public-site .engine-concept-list li { border-bottom-color: var(--public-glass-line); }
.public-site .story-shot figcaption { border-top-color: var(--public-glass-line); }
.public-site :is(.zoom-label, .story-lightbox header button) {
  border-color: var(--public-glass-edge);
  background: var(--public-glass-raised);
  box-shadow: var(--public-glass-shadow);
}
.public-site .zoom-label {
  border-radius: var(--public-glass-radius-sm);
  -webkit-backdrop-filter: var(--public-glass-filter-soft);
  backdrop-filter: var(--public-glass-filter-soft);
}
.public-site .lightbox-viewport { background: var(--public-glass-soft); }
.public-site .story-lightbox header { border-color: var(--public-glass-line); }

/* Keep the recommended plan distinct through a fine blue edge, not a solid fill. */
.public-site .pricing-card.pricing-card-featured {
  border-color: var(--accent-line);
  background: var(--public-glass-raised);
  box-shadow: var(--public-glass-shadow), 0 0 0 1px rgb(16 106 254 / .04);
}
.public-site .provider-comparison .provider-score-table :is(th, td) { border-color: var(--public-glass-line); }
.public-site .provider-score-table :is(th, td).provider-current {
  background: var(--public-glass-tint);
}
.public-site .provider-score-table tbody :is(.provider-group-row, .provider-price-row) > * {
  background: var(--public-glass-soft);
}
.public-site .provider-score-table tbody tr.provider-price-row td.provider-current {
  border-color: var(--public-glass-line);
  background: var(--public-glass-tint-raised);
}
.public-site .provider-score-table tbody tr.provider-price-row > * {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.public-site dialog.story-lightbox { background: var(--public-glass-raised); }

/* One frosted surface per contact dialog; its transparent outer shell stays bare. */
.public-site .pricing-contact-dialog .pricing-contact-business-card {
  border-radius: inherit;
  background: var(--public-glass-raised);
  box-shadow: var(--public-glass-shadow-modal);
}
.public-site .pricing-contact-business-card :is(.pricing-contact-brand, .pricing-contact-details > div) {
  border-color: var(--public-glass-line);
  background: transparent;
  box-shadow: none;
}
.public-site .pricing-contact-business-card .pricing-contact-qr {
  border-color: var(--public-glass-edge);
  border-radius: var(--public-glass-radius-sm);
  background: var(--public-glass-raised);
  box-shadow: inset 0 1px 0 var(--public-glass-edge);
}

/* News reading actions are insets, not a second floating card inside each card. */
.public-site.story-news .news-card .news-read {
  background: var(--public-glass-soft);
  box-shadow: inset 0 1px 0 var(--public-glass-edge);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.public-site.story-news .news-card:is(:hover, :focus-visible) .news-read {
  background: var(--public-glass-raised);
  box-shadow: inset 0 1px 0 var(--public-glass-edge);
}
.public-site.story-news :is(.news-card-media, .news-cover-empty) { background: var(--public-glass-tint); }
.public-site .terms-contact > div { border-color: var(--public-glass-line); }

/* FAQ rows become individual cards with consistent internal spacing. */
.public-site .story-faq { display: grid; gap: 12px; }
.public-site .story-faq summary { padding: 22px 56px 22px 24px; }
.public-site .story-faq summary::after { top: 20px; right: 24px; }
.public-site .story-faq details > div { padding: 0 56px 24px 24px; }
.public-site :is(.story-faq, .faq-list) details[open] {
  border-color: var(--accent-line);
  background: var(--public-glass-raised);
}
.public-site .faq-category-nav a:is(:hover, :focus-visible) {
  border-color: var(--accent-line);
  background: var(--public-glass-raised);
}

/* A light glass closing area continues the page material without a dark slab. */
.public-site .site-footer {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.public-site .site-footer::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 20% 45%, var(--public-glass-ambient-blue), transparent 66%),
    radial-gradient(ellipse at 82% 78%, var(--public-glass-ambient-cyan), transparent 64%);
  /* Fade the entire ambient layer to zero at the join, not just each light. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48%);
  mask-image: linear-gradient(to bottom, transparent, #000 48%);
  content: "";
  pointer-events: none;
}
.public-site .final-cta { background: transparent; }
.public-site .final-inner {
  grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr);
  gap: 48px;
  padding: 56px;
}
.public-site .final-copy { min-width: 0; }
.public-site :is(.final-inner, .footer-inner) {
  border: 1px solid var(--public-glass-edge);
  background: var(--public-glass);
  color: var(--ink);
  box-shadow: var(--public-glass-shadow);
  -webkit-backdrop-filter: var(--public-glass-filter);
  backdrop-filter: var(--public-glass-filter);
}
.public-site .final-cta h2 { color: var(--ink); }
.public-site .final-cta .scroll-title .title-accent {
  background: none;
  color: var(--accent-dark);
  -webkit-text-fill-color: currentColor;
}
.public-site .final-links {
  display: flex;
  flex-wrap: wrap;
  justify-self: start;
  width: auto;
  max-width: none;
  gap: 0 20px;
  margin-top: 24px;
}
.public-site .final-links a {
  min-height: 44px;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
}
.public-site .final-links a svg { width: 12px; height: 12px; color: var(--muted); }
.public-site .final-links a:hover {
  background: transparent;
  color: var(--accent-dark);
}
.public-site .final-links a:hover svg { color: var(--accent-dark); }
.public-site .footer-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--public-glass-edge);
  border-radius: var(--public-glass-radius);
  background: var(--public-glass-soft);
}
.public-site .footer-contact h3 { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.public-site .footer-contact-name { margin-top: 12px; color: var(--ink); font-size: 21px; font-weight: 650; line-height: 1.4; }
.public-site .footer-contact-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); font-size: 16px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.public-site .footer-contact-phone:hover { color: var(--accent-dark); }
.public-site .footer-contact-note { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.public-site .footer-contact-qr { min-width: 0; margin: 0; text-align: center; }
.public-site .footer-contact-qr img { display: block; width: 100%; height: auto; padding: 8px; border-radius: var(--public-glass-radius-sm); background: var(--surface); }
.public-site .footer-contact-qr figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 1120px) {
  .public-site .final-inner { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 32px; padding: 40px; }
  .public-site .footer-contact { grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; padding: 20px; }
}
@media (max-width: 860px) {
  .public-site .final-inner { grid-template-columns: minmax(0, 1fr); }
  .public-site .footer-contact { width: 100%; grid-template-columns: minmax(0, 1fr) 132px; }
}
.public-site .footer-brand p { margin: 0; color: var(--muted); line-height: 1.6; }
.public-site .footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px 20px;
}
.public-site .footer-inner :is(small, .footer-terms, .footer-beian) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.public-site .footer-beian { text-decoration-color: var(--public-glass-line); }
.public-site .footer-inner a:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
.public-site .site-footer a:focus-visible { outline-color: var(--accent-dark); }
@media (max-width: 680px) {
  .public-site .final-inner { gap: 28px; padding: 32px 24px; }
  .public-site .final-links { gap: 0 18px; margin-top: 20px; }
  .public-site .footer-contact { grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; padding: 18px; }
  .public-site .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .public-site .footer-meta { justify-content: flex-start; gap: 8px 16px; text-align: left; }
  .public-site .footer-brand p { max-width: none; }
}
@media (max-width: 380px) {
  .public-site .final-inner { padding: 28px 20px; }
  .public-site .footer-contact { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 14px; }
  .public-site .footer-contact-phone { font-size: 14px; }
}
@media (prefers-reduced-transparency: reduce) {
  .public-site .site-footer::before { display: none; }
}

@media (hover: hover) {
  .public-site :is(.intro-card, .component-card, .feature-card, .workflow > li, .pricing-card,
    .info-card, .engine-action-types article, .news-card):hover {
    border-color: var(--public-glass-edge);
    background: var(--public-glass-raised);
    box-shadow: var(--public-glass-shadow-hover);
    transform: translateY(-2px);
  }
  .public-site .feature-card.feature-card-primary:hover { border-color: transparent; }
  .public-site .pricing-card.pricing-card-featured:hover { border-color: var(--accent-line); }
  .public-site .provider-score-table tbody tr:not(.provider-group-row):hover > * {
    background-color: var(--public-glass-soft);
  }
  .public-site .provider-score-table tbody tr:not(.provider-group-row):hover > td.provider-current {
    background-color: var(--public-glass-tint-raised);
  }
}

/* On narrow screens each comparison row is the card, rather than the whole table. */
@media (max-width: 920px) {
  .public-site .service-review { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .public-site .provider-comparison .provider-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .public-site .provider-comparison .provider-score-table caption { background: transparent; }
  .public-site .provider-comparison .provider-score-table tbody tr:not(.provider-group-row) {
    border-color: var(--public-glass-edge);
    border-radius: var(--public-glass-radius);
    background: var(--public-glass);
    box-shadow: var(--public-glass-shadow);
    -webkit-backdrop-filter: var(--public-glass-filter);
    backdrop-filter: var(--public-glass-filter);
  }
  .public-site .provider-comparison .provider-score-table tbody :is(th[scope="row"], td.score-rule) {
    background: transparent;
  }
  .public-site .provider-comparison .provider-score-table tbody td[data-provider] {
    border-radius: var(--public-glass-radius-sm);
    background: var(--public-glass-soft);
  }
  .public-site .provider-comparison .provider-score-table tbody td.provider-current {
    background: var(--public-glass-tint);
  }
  .public-site .provider-comparison .provider-score-table tbody tr.provider-price-row td.provider-current {
    background: var(--public-glass-tint-raised);
  }
  .public-site .provider-comparison .provider-score-table tbody .provider-group-row th {
    background: transparent;
  }
}

@media (max-width: 680px) {
  .public-site :is(.intro-grid, .component-grid, .feature-grid, .workflow, .measurement-rows,
    .engine-concept, .engine-platform-list, .engine-action-types, .pricing-grid,
    .provider-comparison, .plan-comparison, .faq-groups, .news-grid)::before {
    inset-inline: 0;
    filter: blur(18px);
  }
  .public-site .story-faq { gap: 10px; }
  .public-site .story-faq summary { padding: 20px 46px 20px 20px; }
  .public-site .story-faq summary::after { top: 18px; right: 20px; }
  .public-site .story-faq details > div { padding: 0 20px 20px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.public-site {
    --public-glass: #f8fbff;
    --public-glass-raised: #fff;
    --public-glass-soft: #f5f8fc;
    --public-glass-tint: #edf4ff;
    --public-glass-tint-raised: #e7f0ff;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.public-site {
    --public-glass: #f8fbff;
    --public-glass-raised: #fff;
    --public-glass-soft: #f5f8fc;
    --public-glass-filter: none;
    --public-glass-filter-soft: none;
    --public-nav-surface: #fff;
    --public-nav-filter: none;
    --public-glass-tint: #edf4ff;
    --public-glass-tint-raised: #e7f0ff;
    --public-glass-ambient-blue: transparent;
    --public-glass-ambient-cyan: transparent;
    --public-glass-dark: var(--dark);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.public-site .site-header { transition: none; }
  .public-site :is(.intro-card, .component-card, .feature-card, .workflow > li, .pricing-card,
    .info-card, .engine-action-types article, .news-card):hover { transform: none; }
}