/* Loaded after page styles. Screen rules must not alter certificate printing. */
.public-banner-section { padding: 60px; }
.brand-light-logo, .brand-clearspace-demo { padding: 48px; }
.brand-clearspace-text { margin-right: 48px; }
.brand-color-usage { grid-template-columns: repeat(3, 1fr); }
.brand-voice-examples { grid-template-columns: repeat(2, 1fr); }
@media screen {
  body[data-public-page] { overflow-x: visible; overflow-wrap: anywhere; }
  body[data-public-page] :is(img, svg, video) { max-width: 100%; }
  body[data-public-page] :is(main, form, .field, .hero-inner, .hero-content, .nav-right, .shell) { min-width: 0; }
  body[data-public-page] :is(.footer-grid, .services-grid, .process-steps, .vision-mission, .form-grid, .courses-grid, .plans, .details, .tracks, .validation) > * { min-width: 0; }
  body[data-public-page] :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
    box-sizing: border-box; min-width: 0; max-width: 100%; font-size: 16px; min-height: 44px;
  }
  body[data-public-page] input[type="file"] { width: 100%; overflow: hidden; }
  body[data-public-page] input::file-selector-button { max-width: 100%; white-space: normal; min-height: 44px; }
  body[data-public-page] :is(button, .btn-primary, .btn-outline, .btn-training, .btn-white, .back, .nav-back, .wa, .course-action, .radio-label) {
    min-height: 44px; max-width: 100%; white-space: normal;
  }
  body[data-public-page] :is(.back, .nav-back, .wa, .course-action) { display: inline-flex; align-items: center; justify-content: center; }
  body[data-public-page] :is(a, button, input, select, textarea):focus-visible { outline: 2px solid #74c0fc; outline-offset: 4px; }
  body[data-public-page] :is(section[id], #registrationForm, #courseCatalog) { scroll-margin-top: 120px; }
  body[data-public-page] .wa-float { bottom: max(24px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); }
  body[data-public-page] .mobile-nav {
    z-index: 101; height: 100vh; height: 100dvh; visibility: hidden;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: contain; transition: transform .4s, visibility .4s;
  }
  body[data-public-page] .mobile-nav.open { visibility: visible; }
  body[data-public-page] .mobile-nav .nav-close { width: 44px; height: 44px; top: max(14px, env(safe-area-inset-top)); }
  body[data-public-page] .mobile-nav .nav-item { min-height: 44px; }
  body[data-public-page] .hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; }
  body[data-public-page] .social-icons a { min-width: 44px; min-height: 44px; }
  body[data-public-page] .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-public-page="training"] .courses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-public-page="training"] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-public-page="training"] .program-fee { flex-wrap: wrap; gap: 12px; }
  body[data-public-page="training"] .radio-label input[type="radio"] { display: block; width: 18px; height: 18px; accent-color: #388bfd; }
  body[data-public-page="training"] .radio-dot { display: none; }
  body[data-public-page="training"] .radio-label:focus-within { outline: 2px solid #74c0fc; outline-offset: 3px; }
  body[data-public-page="appointment"] main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  body[data-public-page="attendance"] .phone-row { grid-template-columns: minmax(0, 1fr) minmax(105px, 145px); }
  body[data-public-page="pricing"] .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-public-page="pricing"] .nav { flex-wrap: wrap; gap: 16px; }
  body[data-public-page="pricing"] .nav-links { flex-wrap: wrap; min-width: 0; }
  body[data-public-page="pricing"] .nav-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; }
  body[data-public-page="pricing"] :is(.price, .price-note) { flex-wrap: wrap; gap: 6px; max-width: 100%; }
  body[data-public-page="pricing"] :is(.plan, .detail, .email-eligibility) { min-width: 0; }
  body[data-public-page="brand"] :is(.page, .toc-text, .type-card, .rule-card, .app-card, .swatch, .value-card) { min-width: 0; }
  body[data-public-page="brand"] :is(.toc-grid, .logo-grid, .type-grid, .rules-grid, .apps-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-public-page="brand"] .brand-color-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-public-page="brand"] .brand-voice-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-public-page="brand"] .page { overflow: visible; }
  body[data-public-page="brand"] #cover { overflow: hidden; }
  body[data-public-page="brand"] :is(.cover-meta, .type-weight-row) { flex-wrap: wrap; }
  body[data-public-page="verify"] :is(.page-actions, .verified) { flex-wrap: wrap; gap: 12px; }
  body[data-public-page="verify"] .certificate { overflow-wrap: anywhere; }
  body[data-public-page="verify"] .track strong { font-size: 14px; }
  body[data-public-page="verify"] .track span { font-size: 12px; }
  body[data-public-page="verify"] .fact { font-size: 14px; }
}

@media screen and (max-width: 1200px) {
  body[data-public-page] #navbar, body[data-public-page] #navbar.scrolled {
    padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
    padding-top: max(12px, env(safe-area-inset-top));
  }
  body[data-public-page] #navbar :is(.nav-links, .nav-cta, .nav-train) { display: none; }
  body[data-public-page] #navbar .hamburger { display: flex; }
  body[data-public-page] #navbar .nav-logo img { height: 52px; }
  body[data-public-page] #navbar ~ .hero { padding-top: calc(112px + env(safe-area-inset-top)); }
}

@media screen and (max-width: 900px) {
  body[data-public-page="pricing"] .plans { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body[data-public-page="pricing"] .plan.featured { transform: none; }
  body[data-public-page="brand"] :is(.toc-grid, .logo-grid, .type-grid, .rules-grid, .apps-grid, .brand-color-usage, .brand-voice-examples) { grid-template-columns: minmax(0, 1fr); }
  body[data-public-page="brand"] .brand-clearspace-demo { flex-direction: column; gap: 24px; }
  body[data-public-page="brand"] .brand-clearspace-text { margin-right: 0; }
  body[data-public-page="training"] .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 820px) {
  body[data-public-page="appointment"] main { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 768px) {
  body[data-public-page] { padding-bottom: env(safe-area-inset-bottom); }
  body[data-public-page]:not([data-public-page="verify"]):not([data-public-page="attendance"]) {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }
  body[data-public-page="attendance"] {
    padding: max(14px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  body[data-public-page] :is(.hero-title, .intro h1) { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.25; }
  body[data-public-page] :is(.hero-subtitle, .hero-desc, .hero-sub, .section-sub, .intro p) { font-size: 1rem; line-height: 1.85; }
  body[data-public-page] .section-title { font-size: clamp(1.65rem, 6vw, 2.3rem); }
  body[data-public-page] .hero-code-card pre { font-size: .8rem; line-height: 1.7; }
  body[data-public-page] .hero-code-card { transform: none; }
  body[data-public-page] .mobile-nav { width: min(90vw, 380px); }
  body[data-public-page] .wa-float {
    position: static; width: fit-content; margin: 24px auto; justify-content: center;
  }
  body[data-public-page] .wa-float .wa-tooltip { display: none; }
  body[data-public-page="home"] .wa-float {
    position: fixed; margin: 0; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left));
  }
  body[data-public-page] .training-banner { margin-inline: 0; }
  body[data-public-page] .public-banner-section { padding: 40px 16px; }
  body[data-public-page] .training-banner-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  body[data-public-page] .partners > :is(.section-tag, .section-title, .section-sub) { margin-inline: 16px; }
  body[data-public-page="training"] :is(.courses-grid, .form-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-public-page="training"] nav {
    gap: 12px; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
  }
  body[data-public-page="training"] .nav-logo { flex-shrink: 0; max-width: 45%; }
  body[data-public-page="training"] .hero { padding-top: calc(110px + env(safe-area-inset-top)); }
  body[data-public-page="training"] .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
  body[data-public-page="appointment"] .topbar { height: auto; min-height: 82px; flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  body[data-public-page="verify"] { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  body[data-public-page="verify"] .certificate { padding: 48px 30px 36px; }
  body[data-public-page="verify"] .title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  body[data-public-page="verify"] .student-name { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  body[data-public-page="verify"] .completion { font-size: 16px; }
  body[data-public-page="verify"] .error { padding: 28px 20px; }
}

@media screen and (max-width: 600px) {
  body[data-public-page="pricing"] .top { padding-inline: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  body[data-public-page="pricing"] .nav { justify-content: center; }
  body[data-public-page="pricing"] .nav-links { width: 100%; justify-content: center; gap: 8px; }
  body[data-public-page="pricing"] .plans { padding-inline: 16px; }
  body[data-public-page="pricing"] .plan { padding: 24px 20px; }
  body[data-public-page="pricing"] .details { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  body[data-public-page="pricing"] .email-eligibility { margin-inline: 16px; }
  body[data-public-page="brand"] .cover-headline { font-size: clamp(2rem, 7vw, 2.6rem); }
  body[data-public-page="brand"] :is(.cover-sub, .section-head p, .rule-text, #backcover p) { font-size: 15px; }
  body[data-public-page="brand"] .section-head h2 { font-size: clamp(1.75rem, 7vw, 2.4rem); line-height: 1.25; }
  body[data-public-page="brand"] :is(.palette, .logo-row, .social-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-public-page="brand"] :is(.brand-light-logo, .brand-clearspace-demo) { padding: 20px; }
  body[data-public-page="brand"] .sig-inner { flex-wrap: wrap; padding-right: 12px; gap: 16px; }
  body[data-public-page="brand"] .biz-card { aspect-ratio: auto; min-height: 220px; gap: 24px; }
  body[data-public-page="brand"] .biz-card-top { gap: 12px; }
  body[data-public-page="brand"] .type-scale-row { align-items: flex-start; flex-direction: column; }
  body[data-public-page="brand"] .type-weight-row { gap: 10px; }
  body[data-public-page="attendance"] .phone-row { grid-template-columns: minmax(0, 1fr); }
  body[data-public-page="verify"] .tracks { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body[data-public-page] *, body[data-public-page] *::before, body[data-public-page] *::after {
    animation: none !important; transition: none !important;
  }
  body[data-public-page] .reveal { opacity: 1; transform: none; }
}