/* ==========================================================================
   AccessoraX — Inner page styles (service, case study, resource, contact)
   Depends on css/style.css for tokens, nav, footer and modal.
   Not loaded on the homepage, which carries its own section styles.
   ========================================================================== */

/* ---------- Shared page scaffolding ---------- */
.content,
.case-container,
.service-container,
.page-container,
.contact-section,
.resources-section {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) 28px;
}
.page-container { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.contact-section, .resources-section { max-width: 1160px; }

/* Prose rhythm inside long-form pages */
.content > h2,
.guide-content > h2,
.guide-content > section > h2,
.content-container > h2,
.case-section > h2,
.service-section > h2,
.page-container > h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 52px 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.content > h2:first-child,
.guide-content > h2:first-child,
.content-container > h2:first-child,
.case-section > h2:first-child,
.service-section > h2:first-child,
.page-container > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.content h3, .guide-content h3, .content-container h3, .case-section h3, .service-section h3, .page-container h3 {
  font-size: 1.15rem;
  margin: 30px 0 10px;
}
.content h4, .guide-content h4, .content-container h4, .case-section h4, .service-section h4 { font-size: 1rem; margin: 22px 0 8px; }

.content p, .guide-content p, .content-container p, .case-section p, .service-section p, .page-container > p {
  margin-bottom: 16px;
  color: var(--text-2);
}
.content ul, .content ol,
.guide-content ul, .guide-content ol,
.content-container ul, .content-container ol,
.case-section ul, .service-section ul, .page-container ul {
  margin: 0 0 20px 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.content li, .guide-content li, .content-container li, .case-section li, .service-section li, .page-container ul li {
  position: relative;
  padding-left: 24px;
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.65;
}
.content li::before, .guide-content li::before, .content-container li::before,
.case-section li::before,
.service-section li::before, .page-container ul li::before {
  content: "";
  position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 1px;
}
.content ol { counter-reset: ax; }
.content ol li::before { display: none; }

.content table:not(.comparison-table) { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.content table:not(.comparison-table) th,
.content table:not(.comparison-table) td {
  padding: 12px 16px; text-align: left; font-size: .9rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Page hero ---------- */
.hero,
.case-hero,
.service-hero,
.page-hero {
  position: relative;
  padding: clamp(48px, 6vw, 84px) 28px clamp(40px, 5vw, 64px);
  /* align hero text to the same optical column as .content / .stats-grid */
  padding-inline: max(28px, calc((100% - 884px) / 2));
  background:
    radial-gradient(760px 380px at 88% -20%, rgba(23,91,255,.10), transparent 62%),
    linear-gradient(180deg, #FBFCFF 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before, .case-hero::before, .service-hero::before, .page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 100%;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%);
  pointer-events: none;
}
.hero > *, .case-hero > *, .service-hero > *, .page-hero > * { position: relative; }
.hero-content, .hero-inner { max-width: 884px; }
.hero h1, .case-hero h1, .service-hero h1, .page-hero h1 {
  max-width: 20ch;
  margin-bottom: 16px;
}
.hero p, .case-hero p, .service-hero p, .page-hero p {
  font-size: 1.05rem; color: var(--text-2); max-width: 62ch;
}

/* Breadcrumbs */
.breadcrumb, .breadcrumb-inner {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--text-3);
  margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.breadcrumb-inner { max-width: 940px; margin: 0 auto; padding: 16px 28px; }
.breadcrumb a, .breadcrumb-inner a { color: var(--text-2); }
.breadcrumb a:hover, .breadcrumb-inner a:hover { color: var(--blue); }
.breadcrumb .current, .breadcrumb-inner .current { color: var(--ink); }

.case-badge, .hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--blue-soft); color: var(--blue-deep);
  border: 1px solid var(--blue-line);
  padding: 6px 13px; border-radius: 100px;
  margin-bottom: 18px;
}

.intro {
  font-size: 1.06rem;
  color: var(--text-2);
  line-height: 1.75;
  padding: 24px 26px;
  border-left: 3px solid var(--blue);
  background: var(--mist);
  border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: 44px;
}

/* ---------- Buttons used on inner pages ---------- */
.btn-cta, .cta-btn, .btn-outline, .submit-btn, .resource-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 10px;
  font-family: var(--sans); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-cta, .cta-btn, .submit-btn {
  background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-deep);
}
.btn-cta:hover, .cta-btn:hover, .submit-btn:hover {
  background: var(--blue-deep); color: #fff; transform: translateY(-1px);
}
.btn-outline {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.submit-btn { width: 100%; padding: 15px; }

/* On dark CTA blocks the primary button inverts */
.cta-section .btn-cta, .cta-banner .cta-btn, .cta-section .btn-primary {
  background: #fff; color: var(--ink); box-shadow: none;
}
.cta-section .btn-cta:hover, .cta-banner .cta-btn:hover, .cta-section .btn-primary:hover {
  background: var(--blue-soft); color: var(--ink);
}

/* ---------- Pricing cards (service + VPAT pages) ---------- */
.service-pricing-section, .pricing-section { margin: 56px 0; }
.pricing-header { text-align: center; margin-bottom: 36px; }
.section-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
  display: block; margin-bottom: 14px;
}
.section-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 12px; border: none !important; padding-top: 0 !important; }
.section-description { color: var(--text-2); max-width: 62ch; margin: 0 auto; }

.pricing-cards-container, .pricing-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
}
.pricing-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px 28px;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease;
}
.pricing-card:hover { box-shadow: var(--e2); }
.pricing-card.featured {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(23,91,255,.09), var(--e2);
}
.popular-badge, .pricing-badge, .option-badge, .coming-soon-badge {
  position: absolute; top: -12px; left: 26px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff; font-weight: 600;
  padding: 5px 12px; border-radius: 6px;
}
.card-header { margin-bottom: 16px; }
.plan-name, .pricing-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -.02em; }
.price-section { margin-bottom: 14px; }
.price, .pricing-amount {
  font-size: 2.2rem; font-weight: 700; letter-spacing: -.045em;
  color: var(--ink); line-height: 1; display: block;
}
.pricing-card .timeline, .pricing-turnaround {
  font-family: var(--mono); font-size: .72rem; color: var(--text-3);
  display: block; margin-top: 9px;
}
.plan-description { font-size: .88rem; color: var(--text-2); line-height: 1.6; margin-bottom: 18px; }
.features-divider { height: 1px; background: var(--line-soft); margin: 0 0 18px; }
.features-list, .pricing-features, .pricing-list {
  list-style: none; display: grid; gap: 10px; margin: 0 0 24px; padding: 0;
}
.features-list li, .pricing-features li, .pricing-list li {
  position: relative; padding-left: 24px;
  font-size: .86rem; color: var(--text-2); line-height: 1.55;
}
/* doubled class raises specificity above the generic .content li rule */
.features-list.features-list li::before,
.pricing-features.pricing-features li::before,
.pricing-list.pricing-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 4px; top: .1em;
  width: auto; height: auto; background: none; border-radius: 0;
  color: var(--pass); font-size: .74rem;
}
.pricing-card .btn-cta, .pricing-card .btn-outline, .pricing-card .btn-primary { margin-top: auto; width: 100%; }

@media (max-width: 900px) { .pricing-cards-container, .pricing-cards { grid-template-columns: 1fr; } }

/* ---------- Info / highlight blocks ---------- */
.highlight-box, .info-box, .control-box, .app-issue, .info-section, .free-audit-section {
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 24px 26px;
  margin: 24px 0;
}
.highlight-box h3, .info-box h3, .info-section h3, .free-audit-section h3,
.highlight-box h4, .info-title, .free-audit-title {
  margin-top: 0 !important;
  font-size: 1.05rem;
}
.highlight-box > *:last-child, .info-box > *:last-child { margin-bottom: 0; }
.app-issue { border-left-color: var(--warn); background: var(--warn-soft); border-color: #F0E2C4; }
.cons { border-left-color: var(--fail); background: var(--fail-soft); border-color: #F5D5D5; }
.info-list { list-style: none; }

.bullet { color: var(--blue); font-weight: 700; }

/* ---------- Numbered test steps ---------- */
.test-step {
  display: grid; grid-template-columns: 42px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.test-step:first-of-type { border-top: none; }
.step-number {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--blue);
}
.step-content h3, .step-content h4 { margin-top: 0 !important; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
  border-radius: var(--r);
}
.table-scroll table { margin-bottom: 0 !important; }

/* ---------- Comparison table ---------- */
.comparison-section { margin: 40px 0; }
.comparison-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  font-size: .9rem; margin-bottom: 28px;
}
.comparison-table thead th {
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; text-align: left; padding: 14px 18px;
}
.comparison-table td { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.comparison-table td:first-child { color: var(--ink); font-weight: 600; }
.comparison-table tbody tr:nth-child(even) { background: var(--mist); }

/* ---------- FAQ ---------- */
.faq-section, .faq-container { display: grid; gap: 12px; margin: 24px 0 40px; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  transition: border-color .18s ease;
}
.faq-item:hover { border-color: var(--blue-line); }
.faq-item.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,91,255,.07); }
.faq-item h3, .faq-item h4, .faq-question {
  margin: 0 0 8px !important;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  line-height: 1.45;
}
.faq-answer, .faq-item p { margin: 0; font-size: .92rem; color: var(--text-2); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Case studies ---------- */
.case-hero h1 { max-width: 22ch; }
.stats-grid {
  max-width: 940px; margin: -1px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-bottom: 1px solid var(--line);
}
.stat-card { padding: 30px 24px 30px 0; border-left: 1px solid var(--line); padding-left: 24px; }
.stat-card:first-child { border-left: none; padding-left: 0; }
.stat-num, .stat-number {
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700;
  letter-spacing: -.045em; color: var(--blue); line-height: 1; margin-bottom: 8px;
}
.stat-label { font-size: .84rem; color: var(--text-2); line-height: 1.55; }
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
  .stat-card:first-child { border-top: none; }
}

.case-section { margin-bottom: 12px; }
.client-info { margin: 20px 0 8px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.info-grid .info-item {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
}
.info-grid .info-item h4 {
  margin: 0 0 6px !important;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.info-grid .info-item p { margin: 0; color: var(--ink); font-weight: 500; font-size: .92rem; }
@media (max-width: 560px) { .info-grid { grid-template-columns: 1fr; } }

.code-block {
  background: var(--ink); color: #C9D6F0;
  font-family: var(--mono); font-size: .82rem; line-height: 1.75;
  padding: 22px 24px; border-radius: var(--r);
  overflow-x: auto; margin: 20px 0;
  white-space: pre-wrap;
}
.code-comment { color: #6E82AB; }

.case-section .timeline { display: grid; gap: 0; margin: 20px 0; }
.timeline-item {
  position: relative;
  padding: 20px 0 20px 32px;
  border-left: 2px solid var(--line);
}
.timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--blue);
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-date {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 6px;
}
.timeline-item h4 { margin: 0 0 6px !important; }

.testimonial {
  background: var(--ink); border-radius: var(--r-lg);
  padding: 34px 36px; margin: 36px 0;
  position: relative;
}
.testimonial-quote {
  font-size: 1.1rem; line-height: 1.7; color: #fff;
  font-weight: 500; margin-bottom: 20px;
}
.testimonial-author { color: #fff; font-weight: 600; font-size: .92rem; }
.testimonial-role { color: var(--on-dark-2); font-size: .84rem; }

/* ---------- Feature grids (VPAT, partner) ---------- */
.feature-grid, .grid-3, .grid-2 { display: grid; gap: 18px; margin: 22px 0; }
.feature-grid, .grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.feature-item, .card, .service-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 24px 26px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature-item:hover, .card:hover, .service-card:hover {
  border-color: var(--blue-line); transform: translateY(-2px); box-shadow: var(--e2);
}
.feature-item h4, .card h3, .service-card h4 { margin-top: 0 !important; margin-bottom: 8px !important; }
.feature-item p, .card p, .service-card p { font-size: .9rem; margin-bottom: 0; }
@media (max-width: 900px) { .feature-grid, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .feature-grid, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* Partner program option cards */
.partner-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin: 24px 0; }
.option-card {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px;
}
.option-card.featured { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23,91,255,.09); }
.option-card h4 { margin-top: 0 !important; font-size: 1.05rem; }
.option-card .price {
  font-size: 1.9rem; margin: 10px 0 16px;
}
.option-card .price small {
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  color: var(--text-3); letter-spacing: 0;
}
.option-card ul { list-style: none; display: grid; gap: 10px; padding: 0; }
.option-card li { position: relative; padding-left: 24px; font-size: .86rem; color: var(--text-2); }
.option-card .option-card li::before,
.option-card ul li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 4px; top: .1em;
  width: auto; height: auto; background: none; border-radius: 0;
  color: var(--pass); font-size: .74rem;
}
@media (max-width: 900px) { .partner-options { grid-template-columns: 1fr; } }

/* ---------- Resources ---------- */
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.resource-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.resource-card:hover { border-color: var(--blue-line); transform: translateY(-3px); box-shadow: var(--e2); }
.resource-card-top { padding: 26px 24px 22px; border-bottom: 1px solid var(--line-soft); }
.resource-card-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.resource-type, .resource-tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 12px; display: block;
}
.resource-card h2 { font-size: 1.1rem; margin: 0; border: none; padding: 0; }
.resource-meta { font-family: var(--mono); font-size: .72rem; color: var(--text-3); margin-bottom: 16px; }
.resource-link {
  margin-top: auto; align-self: flex-start;
  padding: 0; background: none; border: none;
  color: var(--blue); font-size: .88rem;
}
.resource-link:hover { gap: 12px; background: none; color: var(--blue-deep); transform: none; }
.resource-card.coming-soon { opacity: .72; }
.resource-card.coming-soon .coming-soon-badge {
  position: static; display: inline-block; margin-top: 12px;
  background: var(--mist); color: var(--text-3); border: 1px solid var(--line);
}
@media (max-width: 900px) { .resources-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .resources-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.contact-info h2, .contact-form h2 { font-size: 1.5rem; margin-bottom: 22px; }
.contact-info .info-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.contact-info .info-item:first-of-type { border-top: none; padding-top: 0; }
.info-icon {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-size: 1rem;
}
.info-content h3 { margin: 0 0 4px !important; font-size: .95rem; }
.info-content p, .info-content a { margin: 0; font-size: .9rem; }

.contact-info .social-links { display: flex; gap: 10px; margin-top: 12px; }
.contact-info .social-links a {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--text-2);
  transition: all .18s ease;
}
.contact-info .social-links a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

.contact-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  background: var(--paper);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft);
}
.success-message {
  display: none;
  background: var(--pass-soft); border: 1px solid #BFE9D8;
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 20px;
  color: #08694A;
}
.success-message.show, .success-message[style*="block"] { display: block; }
.success-message h3 { margin-top: 0 !important; color: #08694A; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Closing CTA blocks ---------- */
.cta-section, .cta-banner {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 60px) 32px;
  margin: 56px 0 0;
  text-align: center;
}
.cta-section::before, .cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 300px at 78% 6%, rgba(23,91,255,.34), transparent 66%);
}
.cta-section > *, .cta-banner > * { position: relative; }
.cta-section h2, .cta-banner h2 {
  color: #fff; border: none !important; padding-top: 0 !important; margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
}
.cta-section p, .cta-banner p {
  color: var(--on-dark-2); max-width: 58ch; margin: 0 auto 26px; font-size: 1rem;
}
.cta-section a, .cta-banner a { display: inline-flex; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* full-width CTA sections (partner program uses <section>) */
section.cta-section { border-radius: 0; margin: 56px 0 0; padding: clamp(56px, 7vw, 88px) 28px; }

/* ==========================================================================
   Free automated scan tool (free-audit.html) — standalone funnel page
   ========================================================================== */
body.scan-page { background: var(--mist); }
.scan-page .container {
  max-width: 840px; margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 28px clamp(56px, 6vw, 88px);
}
.scan-page > .container > .logo {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); display: inline-block; margin-bottom: 40px;
}
.scan-page .logo span { color: var(--blue); }
.scan-page .logo .logo { font-size: inherit; margin: 0; }

.scan-page .hero {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e2);
  padding: clamp(32px, 4vw, 48px);
  text-align: center;
}
.scan-page .hero::before { display: none; }
.scan-page .hero h1 { max-width: none; margin: 0 auto 14px; }
.scan-page .subtitle { color: var(--text-2); max-width: 56ch; margin: 0 auto 28px; font-size: 1.02rem; }

.scan-form { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
.scan-form input {
  width: 100%; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: 11px;
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.scan-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.scan-form button, .email-form button {
  padding: 15px 24px; border: none; border-radius: 11px;
  background: var(--blue); color: #fff; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  box-shadow: 0 2px 0 var(--blue-deep);
  transition: background .18s ease, transform .18s ease;
}
.scan-form button:hover, .email-form button:hover { background: var(--blue-deep); transform: translateY(-1px); }
.scan-form button:disabled { background: var(--text-3); box-shadow: none; cursor: not-allowed; transform: none; }
.error-message { display: none; color: var(--fail); font-size: .86rem; }
.error-message.active { display: block; }

.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 26px;
  font-size: .82rem; color: var(--text-3); font-weight: 500;
}

.scanning, .results-preview, .thankyou {
  display: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e2);
  padding: clamp(32px, 4vw, 48px); text-align: center;
}
/* The page's own script toggles .active on each step */
.scanning.active, .results-preview.active, .thankyou.active { display: block; }

.spinner {
  width: 44px; height: 44px; margin: 0 auto 22px;
  border: 3px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; animation: axSpin .8s linear infinite;
}
@keyframes axSpin { to { transform: rotate(360deg); } }
.scan-status { font-family: var(--mono); font-size: .82rem; color: var(--text-3); margin: 10px 0 20px; }
.progress-bar { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; max-width: 480px; margin: 0 auto; }
.progress-fill { height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .4s ease; }

.alert-danger {
  background: var(--fail-soft); border: 1px solid #F5D5D5;
  border-left: 3px solid var(--fail);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px 24px; margin-bottom: 28px; text-align: left;
}
.alert-danger h2 { font-size: 1.3rem; color: #A32A2E; margin-bottom: 8px; }
.alert-danger p { color: #A32A2E; margin: 0; font-size: .92rem; }

.violation-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; }
.violation-summary .stat {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 16px;
}
.violation-summary .stat h3 {
  font-size: 2rem; letter-spacing: -.04em; color: var(--ink); margin: 0 0 4px; line-height: 1;
}
.violation-summary .stat p { font-size: .82rem; color: var(--text-2); margin: 0 0 10px; }
.severity {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
}
.severity.critical { background: var(--fail-soft); color: var(--fail); }
.severity.serious  { background: var(--warn-soft); color: var(--warn); }
.severity.moderate { background: var(--blue-soft); color: var(--blue-deep); }
.severity.minor    { background: var(--pass-soft); color: var(--pass); }

.scan-page .cta-box {
  background: var(--ink); border-radius: var(--r-lg);
  padding: 32px; text-align: left; color: var(--on-dark);
}
.scan-page .cta-box h3 { color: #fff; margin: 0 0 14px !important; }
.scan-page .cta-box ul { list-style: none; padding: 0; display: grid; gap: 9px; margin-bottom: 22px; }
.scan-page .cta-box li { position: relative; padding-left: 24px; color: var(--on-dark-2); font-size: .9rem; }
.scan-page .cta-box li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; background: #3ED9A3; border-radius: 1px;
}
.email-form { display: grid; gap: 11px; }
.email-form input {
  padding: 14px 16px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff;
  font-family: var(--sans); font-size: .94rem;
}
.email-form input::placeholder { color: #6E82AB; }
.email-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23,91,255,.2); }

.thankyou .success-icon { font-size: 2.8rem; color: var(--pass); margin-bottom: 14px; }

@media (max-width: 640px) { .violation-summary { grid-template-columns: 1fr; } }

/* ==========================================================================
   Narrow-viewport safety net
   ========================================================================== */

/* Long URLs and unbroken strings must never widen the page */
p, li, td, th, dd, dt, h1, h2, h3, h4, figcaption, blockquote {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Grid and flex children default to min-width:auto, which lets max-content
   push past the viewport. Reset it. */
ul > li, ol > li { min-width: 0; }

/* Preformatted code from the original pages scrolls instead of overflowing */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: var(--ink);
  color: #C9D6F0;
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 22px 0;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
}
pre code { white-space: pre; font-family: var(--mono); background: none; color: inherit; padding: 0; }
code { overflow-wrap: break-word; }

@media (max-width: 700px) {
  /* Legacy pages carry hard-coded two- and three-column grids in inline
     style attributes, which class selectors cannot override. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap; }
  pre { font-size: .76rem; padding: 16px 18px; }
}


/* Checkbox targets: the wrapping label is the real target, but keep the
   control itself comfortable on touch screens too. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--blue);
  cursor: pointer;
  flex: none;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 32px; padding: 4px 0; cursor: pointer;
}

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum) — 24x24 CSS px */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }

.read-more, .case-link, .resource-link, .tool-link, .svc-link, .secondary-link {
  min-height: 24px;
  padding-block: 2px;
}


/* Long-form guide pages: section rhythm */
.guide-content > section,
.content-container > section { margin-bottom: 44px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.guide-content > section:last-child { margin-bottom: 0; }
.guide-content h3, .content-container h3 { margin-top: 34px; }
.guide-content h4, .content-container h4 { margin-top: 26px; color: var(--ink); }
.guide-content .case-study h4,
.guide-content .case-study h3 { margin-top: 0 !important; }