:root {
  --public-surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 246, 0.92));
  --public-surface-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 249, 247, 0.9));
  --public-surface-border: rgba(23, 58, 59, 0.1);
  --public-surface-border-strong: rgba(23, 58, 59, 0.15);
  --public-surface-shadow: 0 16px 34px rgba(23, 58, 59, 0.08);
  --public-surface-shadow-hover: 0 20px 40px rgba(23, 58, 59, 0.12);
  --public-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --public-bullet-ring: 0 0 0 6px rgba(255, 135, 92, 0.14);
}

:where(body.public-canvas, body) :is(
  .consulting-live-shell,
  .control-shell,
  .section-shell,
  .pricing-shell,
  .compare-shell,
  .billing-shell,
  .note-shell
) {
  box-shadow:
    var(--public-surface-highlight),
    0 18px 36px rgba(23, 58, 59, 0.08);
}

:where(body.public-canvas, body) :is(
  .detail-card,
  .audience-card,
  .benefit-card,
  .trust-card,
  .faq-card,
  .contact-card,
  .legal-card,
  .pricing-facts,
  .faq-item
) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-surface-border);
  border-radius: 30px;
  background: var(--public-surface-bg);
  box-shadow:
    var(--public-surface-highlight),
    var(--public-surface-shadow);
  backdrop-filter: blur(10px);
}

:where(body.public-canvas, body) :is(
  .control-card,
  .time-compare-card,
  .billing-step,
  .quick-fact
) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-surface-border);
  border-radius: 28px;
  background: var(--public-surface-bg-soft);
  box-shadow:
    var(--public-surface-highlight),
    0 14px 30px rgba(23, 58, 59, 0.08);
  backdrop-filter: blur(10px);
}

:where(body.public-canvas, body) :is(
  .detail-card,
  .audience-card,
  .benefit-card,
  .trust-card,
  .faq-card,
  .control-card,
  .time-compare-card,
  .contact-card,
  .legal-card,
  .billing-step,
  .quick-fact,
  .pricing-facts,
  .faq-item
) {
  transition:
    transform 0.16s ease-out,
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out;
}

:where(body.public-canvas, body) :is(
  .detail-card,
  .audience-card,
  .benefit-card,
  .trust-card,
  .faq-card,
  .control-card,
  .time-compare-card,
  .contact-card,
  .legal-card,
  .billing-step,
  .quick-fact,
  .pricing-facts,
  .faq-item
):hover {
  transform: translateY(-2px);
  border-color: var(--public-surface-border-strong);
  box-shadow:
    var(--public-surface-highlight),
    var(--public-surface-shadow-hover);
}

:where(body.public-canvas, body) .audience-side {
  box-shadow:
    var(--public-surface-highlight),
    0 16px 30px rgba(23, 58, 59, 0.08);
}

:where(body.public-canvas, body) .audience-side-block {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

:where(body.public-canvas, body) :is(
  .feature-points,
  .audience-list,
  .trust-list,
  .pricing-list,
  .hero-points,
  .contact-card ul,
  .legal-card ul
) {
  list-style: none;
  padding: 0;
}

:where(body.public-canvas, body) :is(.contact-card ul, .legal-card ul) {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

:where(body.public-canvas, body) :is(
  .feature-points li,
  .audience-list li,
  .trust-list li,
  .pricing-list li,
  .hero-points li,
  .contact-card li,
  .legal-card li
) {
  position: relative;
  display: block;
  min-width: 0;
  padding-left: 24px;
}

:where(body.public-canvas, body) :is(
  .feature-points li,
  .audience-list li,
  .trust-list li,
  .pricing-list li,
  .hero-points li,
  .contact-card li,
  .legal-card li
)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-orange-600);
  box-shadow: var(--public-bullet-ring);
  transform: translateY(-50%);
}

:where(body.public-canvas, body) .pricing-list li {
  color: var(--brand-green-600);
}

@media (max-width: 820px) {
  :where(body.public-canvas, body) :is(
    .detail-card,
    .audience-card,
    .benefit-card,
    .trust-card,
    .faq-card,
    .contact-card,
    .legal-card,
    .pricing-facts,
    .faq-item
  ) {
    border-radius: 26px;
  }

  :where(body.public-canvas, body) :is(
    .control-card,
    .time-compare-card,
    .billing-step,
    .quick-fact
  ) {
    border-radius: 24px;
  }
}