/* ==========================================================================
   AccessoraX — Page components
   Styles the bespoke modules that individual pages use (guides, checklists,
   comparison blocks, callouts, blog widgets). Loaded after pages.css.
   ========================================================================== */

/* ==========================================================================
   1. Two-column layouts (guide pages, checklist)
   ========================================================================== */
.guide-container,
.page-layout,
.content-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 68px) 28px clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 52px;
  align-items: start;
}
/* Sidebar sits second in the source on guide pages, first on the checklist */
.page-layout { grid-template-columns: 272px minmax(0, 1fr); }
.guide-container > .guide-content,
.page-layout > .content,
.content-container > *:not(aside) { min-width: 0; }

/* No sidebar on the page → single centred reading column */
.guide-container:not(:has(.guide-sidebar)),
.content-container:not(:has(aside)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 940px;
}

.guide-sidebar, .sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sidebar-title, .toc-title {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  margin: 0 0 14px !important;
  padding: 0 !important; border: none !important;
}

.table-of-contents, .sidebar-nav {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 20px;
}
.toc-list, .sidebar-nav { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.sidebar-nav { background: none; border: none; padding: 0; }
.toc-list li, .sidebar-nav li { padding: 0 !important; margin: 0; }
.toc-list li::before, .sidebar-nav li::before { display: none !important; }
.toc-list a, .sidebar-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.45;
  min-height: 24px;
  transition: background .15s ease, color .15s ease;
}
.toc-list a:hover, .sidebar-nav a:hover { background: var(--blue-soft); color: var(--blue-deep); }
.toc-list ul, .sidebar-nav ul { list-style: none; margin: 2px 0 2px 12px; padding: 0; gap: 0; display: grid; }
.toc-list ul a, .sidebar-nav ul a { font-size: .8rem; color: var(--text-3); padding: 6px 10px; }

.sidebar-cta {
  background: var(--ink);
  border-radius: var(--r);
  padding: 22px 20px;
  color: var(--on-dark);
}
.sidebar-cta p, .sidebar-cta div { color: var(--on-dark-2); font-size: .85rem; margin-bottom: 14px; }
.sidebar-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 40px; padding: 10px 16px;
  background: #fff; color: var(--ink); border-radius: 9px;
  font-weight: 600; font-size: .85rem;
}
.sidebar-cta a:hover { background: var(--blue-soft); }

/* Progress tracker floats above the page as a persistent status bar */
.progress-wrap {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 900;
  width: min(440px, calc(100vw - 32px));
  display: grid; gap: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--e3);
  padding: 14px 18px;
}
.progress-label { display: flex; justify-content: space-between; gap: 16px; }
.progress-label span { color: var(--blue); font-weight: 600; }
.progress-label { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }
.progress-bar-bg { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .35s ease; }

@media (max-width: 1000px) {
  .guide-container, .page-layout, .content-container { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .guide-sidebar, .sidebar { position: static; order: -1; }
  .table-of-contents, .sidebar-nav { max-height: 320px; overflow-y: auto; }
}

/* ==========================================================================
   2. Guide hero + meta strip
   ========================================================================== */
.guide-hero {
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.guide-main-title { margin-bottom: 12px !important; padding-top: 0 !important; border-top: none !important; }
.guide-subtitle, .hero-subtitle, .guide-intro, .section-intro, .free-audit-description {
  font-size: 1.04rem; color: var(--text-2); line-height: 1.75; margin-bottom: 20px;
}
.guide-meta, .case-study-meta, .hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 16px;
}
.guide-meta .meta-item, .hero-meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .75rem; color: var(--text-3);
}
.guide-meta .meta-item i, .hero-meta-item i { color: var(--blue); }
.hero-meta-divider { color: var(--line); }
.last-updated { font-family: var(--mono); font-size: .76rem; color: var(--text-3); }

/* Key/value pairs used in case studies and violation cards */
.case-study-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.case-study-meta > div {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.meta-label, .detail-label, .price-label, .score-label, .code-label, .shopify-box-label, .tool-type, .criteria-code, .resource-type {
  display: block;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
  margin-bottom: 6px;
}
.meta-value, .detail-value { color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.45; }

/* ==========================================================================
   3. Cards
   ========================================================================== */
.case-study, .violation-card, .criteria-card, .tool-card, .cost-card,
.maintenance-item, .price-card, .platform-card, .score-card, .pour-card,
.app-category, .criterion-card, .checklist-box, .problem-section,
.reason-box, .scenario-card, .item-section, .level-item, .pricing-option {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 26px;
  margin: 18px 0;
}
.case-study { background: var(--mist); }

/* Grids that hold them */
.criteria-grid, .tools-grid, .shopify-grid, .maintenance-grid, .timeline-grid,
.pricing-grid, .price-options, .pour-grid, .cost-comparison, .control-grid,
.app-issues-grid, .level-comparison, .pricing-comparison, .vs-comparison,
.scenario-compare, .checklist-items, .violation-details, .cost-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.violation-details, .cost-breakdown { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.violation-details { margin: 0 0 18px; }
.violation-detail {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px;
}
.scenario-compare, .vs-comparison { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }

/* Cards that carry a verdict colour */
.scenario-card.danger, .cannot-control, .demo-fail {
  border-left: 3px solid var(--fail); background: var(--fail-soft); border-color: #F5D5D5;
}
.scenario-card.warning { border-left: 3px solid var(--warn); background: var(--warn-soft); border-color: #F0E2C4; }
.scenario-card.success, .can-control, .demo-pass, .recommended {
  border-left: 3px solid var(--pass); background: var(--pass-soft); border-color: #BFE9D8;
}
.scenario-title, .platform-name, .category-title, .criteria-title, .price-header, .verdict-box strong {
  font-weight: 700; color: var(--ink); font-size: 1.02rem;
  margin: 0 0 10px !important; padding: 0 !important; border: none !important;
}
.scenario-items { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.scenario-item { font-size: .9rem; color: var(--text-2); padding: 0 !important; }
.scenario-item::before { display: none !important; }
.scenario-total {
  border-top: 1px solid rgba(8,27,58,.12);
  padding-top: 12px; margin-top: 4px;
  font-weight: 700; color: var(--ink); font-size: 1.05rem;
}
.criteria-desc, .service-desc, .principle-desc, .pricing-subtitle { font-size: .9rem; color: var(--text-2); margin: 0; }

/* Price display */
.price-amount, .amount, .score-number {
  font-size: 2rem; font-weight: 700; letter-spacing: -.045em;
  color: var(--ink); line-height: 1;
}
.price-period, .pricing-note, .plus-note, .timeline-duration, .maintenance-note, .timeline-note, .service-note, .field-hint {
  font-family: var(--mono); font-size: .74rem; color: var(--text-3); margin-top: 6px;
}
.pricing-cta { margin-top: 16px; }

/* Platform comparison (Shopify vs WordPress post) */
.platform-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.platform-logo, .shopify-logo, .wordpress-logo {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; flex: none;
}
.shopify-logo { background: var(--pass-soft); color: var(--pass); }
.wordpress-logo { background: var(--blue-soft); color: var(--blue); }
.vs-divider {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .14em;
}
.verdict-box {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-lg); padding: 26px 28px; margin: 24px 0;
}
.verdict-box strong, .verdict-box h3, .verdict-box h4 { color: #fff !important; }
.verdict-box p { color: var(--on-dark-2); }

/* ==========================================================================
   4. Callouts
   ========================================================================== */
.warning-box, .danger-box, .error-box, .alert, .focus-box, .revenue-box,
.note-section, .legal-note, .quote-box, .intro-box, .accessibility-statement,
.guide-cta, .mid-blog-cta, .priority-summary {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: var(--mist);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 22px 24px;
  margin: 24px 0;
}
.warning-box, .alert-warning { border-left-color: var(--warn); background: var(--warn-soft); border-color: #F0E2C4; }
.danger-box, .error-box, .alert-danger { border-left-color: var(--fail); background: var(--fail-soft); border-color: #F5D5D5; }
.alert-success, .accessibility-statement { border-left-color: var(--pass); background: var(--pass-soft); border-color: #BFE9D8; }
.warning-box > *:last-child, .danger-box > *:last-child, .alert > *:last-child,
.focus-box > *:last-child, .intro-box > *:last-child, .quote-box > *:last-child { margin-bottom: 0; }
.warning-box h3, .warning-box h4, .danger-box h3, .danger-box h4,
.alert h3, .alert h4, .focus-box h3, .focus-box h4, .intro-box h3 {
  margin-top: 0 !important; padding-top: 0 !important; border-top: none !important;
}
.quote-box { font-size: 1.02rem; color: var(--ink); font-style: italic; }
.intro-box { display: flex; gap: 16px; align-items: flex-start; }
.intro-box-icon { font-size: 1.3rem; flex: none; line-height: 1.3; }
.note-title { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.note-text, .note-content, .info-text, .comparison-text { font-size: .92rem; color: var(--text-2); }
.white-text { color: var(--ink); }
.cta-section .white-text, .cta-banner .white-text, .verdict-box .white-text { color: #fff; }

.guide-cta, .mid-blog-cta {
  background: var(--ink); border: none; border-radius: var(--r-lg);
  padding: 30px 32px; text-align: center; color: var(--on-dark);
}
.guide-cta h3, .guide-cta h4, .mid-blog-cta h3, .mid-blog-cta h4 { color: #fff !important; margin-top: 0 !important; }
.guide-cta p, .mid-blog-cta p { color: var(--on-dark-2); margin-bottom: 20px; }
.btn-guide-cta, .btn-faq-cta, .cta-button, .btn-download, .cta-btn-primary, .cta-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 13px 24px; border-radius: 10px;
  font-weight: 600; font-size: .92rem;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.btn-guide-cta, .mid-blog-cta .btn-guide-cta, .cta-btn-primary {
  background: #fff; color: var(--ink);
}
.btn-guide-cta:hover, .cta-btn-primary:hover { background: var(--blue-soft); transform: translateY(-1px); }
.btn-faq-cta, .cta-button, .btn-download {
  background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-deep);
}
.btn-faq-cta:hover, .cta-button:hover, .btn-download:hover { background: var(--blue-deep); color: #fff; }
.cta-btn-secondary { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.cta-btn-secondary:hover { background: rgba(255,255,255,.2); }
.cta-banner-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   5. Badges and counters
   ========================================================================== */
.level-badge, .priority-badge, .popular-tag, .required-tag, .recommended-badge,
.savings-badge, .criteria-code, .criterion-id, .resource-tag, .faq-icon {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px; border-radius: 6px;
  background: var(--blue-soft); color: var(--blue-deep);
  border: 1px solid var(--blue-line);
}
.level-badge { margin: 26px 0 14px; }
.level-badge.level-a { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue-line); }
.level-badge.level-aa { background: var(--ink); color: #fff; border-color: var(--ink); }
.priority-critical { background: var(--fail-soft); color: var(--fail); border-color: #F5D5D5; }
.priority-high { background: var(--warn-soft); color: var(--warn); border-color: #F0E2C4; }
.priority-medium { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue-line); }
.savings-badge, .recommended-badge { background: var(--pass-soft); color: var(--pass); border-color: #BFE9D8; }
.criteria-code, .criterion-id { letter-spacing: .04em; }

.principle-number, .category-number, .checklist-number, .problem-number {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--blue); color: #fff;
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  flex: none;
}
.checklist-number { width: 30px; height: 30px; font-size: .78rem; border-radius: 8px; }

.check-icon { color: var(--pass); font-weight: 700; }
.x-icon { color: var(--fail); font-weight: 700; }

/* ==========================================================================
   6. Checklist page — principles and criteria
   ========================================================================== */
.principle-section { margin: 52px 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.principle-section:first-of-type { margin-top: 0; }
.principle-header {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.principle-header-text { min-width: 0; }
.principle-label {
  font-size: 1.3rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.025em; line-height: 1.25;
}

.criterion-card { padding: 0; margin: 10px 0; overflow: hidden; }
.criterion-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
}
.criterion-header:hover { background: var(--mist); }
.criterion-title-wrap { flex: 1; min-width: 0; display: grid; gap: 5px; }
.criterion-title { font-weight: 600; color: var(--ink); font-size: .96rem; line-height: 1.45; }
.criterion-toggle {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--mist); color: var(--text-3);
  font-size: .7rem;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.criterion-card.active .criterion-toggle,
.criterion-card.open .criterion-toggle { transform: rotate(180deg); background: var(--blue); color: #fff; }
.criterion-body {
  padding: 0 20px 20px 62px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
/* Collapsed by default; the page's own JS adds .open */
.criterion-body { display: none; }
.criterion-body.open { display: block; }
.criterion-toggle.open { transform: rotate(180deg); background: var(--blue); color: #fff; }
.criterion-id { justify-self: start; align-self: start; }
.criterion-checkbox { margin-top: 2px; }

.check-list { list-style: none; display: grid; gap: 4px; margin: 0 0 16px; padding: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 6px 0 !important;
  font-size: .89rem; color: var(--text-2); line-height: 1.55;
  min-height: 32px;
}
.check-list li::before { display: none !important; }
.check-list li input { margin-top: 1px; }
.check-list li.item-checked span { color: var(--text-3); text-decoration: line-through; }

/* .sub-item appears in the sidebar nav as a plain link row */
.sidebar-nav .sub-item { padding: 0 !important; }
.sidebar-nav .sub-item::before { display: none !important; }
.sidebar-nav .sub-item a { padding-left: 22px; font-size: .8rem; color: var(--text-3); }

.shopify-box, .shopify-specific {
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-top: 14px;
}
.shopify-box p, .shopify-specific p { margin: 0; font-size: .89rem; color: var(--ink); }
.shopify-check-group { margin: 24px 0; }

.tools-section { margin: 52px 0 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.tool-card { display: grid; gap: 8px; margin: 0; }
.tool-card h3, .tool-card h4 { margin: 0 !important; font-size: 1rem; padding: 0 !important; border: none !important; }
.tool-link { align-self: start; font-size: .86rem; font-weight: 600; color: var(--blue); min-height: 24px; }

/* Code samples with a caption row */
.code-label {
  background: var(--ink); color: #8FB2FF;
  padding: 10px 22px 0; margin: 22px 0 0;
  border-radius: var(--r) var(--r) 0 0;
}
.code-label + .code-block, .code-label + pre { margin-top: 0; border-radius: 0 0 var(--r) var(--r); }

/* ==========================================================================
   7. Checklists, steps and test lists
   ========================================================================== */
.checklist, .checklist-items, .test-checklist, .testing-checklist,
.test-steps, .step-list, .our-pricing-list, .pricing-list {
  list-style: none; padding: 0; margin: 18px 0;
  display: grid; gap: 10px;
}
.checklist-item, .test-item, .step-item {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .92rem; color: var(--text-2);
  margin: 0;
}
.checklist-item::before, .test-item::before, .step-item::before { display: none !important; }
.step-title { font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }
.item-section { padding: 18px 20px; margin: 12px 0; }
.item-section ul { margin-bottom: 0; }

.pros, .required { color: var(--pass); font-weight: 600; }
.cons, .no-answer { color: var(--fail); font-weight: 600; }
.self-test-title, .faq-main-title, .professional-testing {
  font-weight: 700; color: var(--ink);
  margin: 26px 0 10px !important; padding-top: 0 !important; border-top: none !important;
}
.our-pricing-box {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-lg); padding: 28px 30px; margin: 24px 0;
}
.our-pricing-box h3, .our-pricing-box h4 { color: #fff !important; margin-top: 0 !important; }
.our-pricing-box li { color: var(--on-dark-2); }
.wcag-faq-section { margin: 48px 0; }

/* Contrast demo blocks on the case study page */
.demo-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.demo-box { border-radius: var(--r); padding: 22px; text-align: center; }
.demo-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; display: block; }

/* Pricing card colour variants used on service pages */
.pricing-card.starter, .pricing-card.core, .pricing-card.full { }

/* Email confirmation page */
.subheading { color: var(--text-2); font-size: 1.02rem; margin-bottom: 26px; }
.steps { display: grid; gap: 14px; margin: 26px 0; }
.steps .step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
}
.step-icon { font-size: 1.3rem; flex: none; }
.step-text { font-size: .92rem; color: var(--text-2); }
.secondary-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.secondary-links a { font-size: .88rem; min-height: 24px; display: inline-flex; align-items: center; }
.footer-text { font-size: .82rem; color: var(--text-3); margin-top: 26px; }

/* Comparison table variant used inside blog posts */
.pricing-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 22px 0; }
.pricing-table th {
  background: var(--ink); color: #fff; text-align: left; padding: 13px 16px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.pricing-table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text-2); }
.pricing-table tbody tr:nth-child(even) { background: var(--mist); }

/* A .checklist-item that carries its own heading is a full card, not a row */
.checklist-item:has(h3) {
  display: block;
  padding: 26px 28px;
  margin: 22px 0;
  border-radius: var(--r);
}
.checklist-item > h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 20px !important;
  padding: 0 0 16px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.1rem;
}
.checklist-item > h3 .priority-badge { margin-left: auto; }
.checklist-item .item-section {
  background: none; border: none; padding: 0;
  margin: 0 0 20px;
}
.checklist-item .item-section:last-child { margin-bottom: 0; }
.checklist-item .item-section h4 {
  margin: 0 0 8px !important;
  font-size: .88rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.checklist-item .item-section p,
.checklist-item .item-section li { font-size: .92rem; }
.checklist-item .item-section ul { margin-bottom: 0; }

/* Two columns for the wider sub-sections on desktop */
@media (min-width: 860px) {
  .checklist-item:has(h3) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .checklist-item > h3 { grid-column: 1 / -1; }
}

/* Remaining wrappers */
.ultimate-guide-section { grid-column: 1 / -1; min-width: 0; }
.guide-subsection { margin: 34px 0; }
.timeline-plan {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 24px;
}
.timeline-plan strong, .timeline-plan h4 { color: var(--ink); }
.cost-item, .category-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.cost-item:first-child, .category-header { border-top: none; }
.cost-item strong, .cost-item span:last-child { margin-left: auto; color: var(--ink); font-weight: 600; }
.category-header { padding-top: 0; margin-bottom: 14px; }
.level-group { margin-bottom: 30px; }
.platform-card.shopify { border-top: 3px solid var(--pass); }
.platform-card.wordpress { border-top: 3px solid var(--blue); }

/* Inside a two-column layout the content column must not add its own gutter */
.page-layout > .content,
.guide-container > .guide-content,
.content-container > .content {
  max-width: none;
  padding: 0;
  margin: 0;
}


/* Quick Navigation boxes on legal pages use a plain <ul> */
.table-of-contents ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.table-of-contents li { padding: 0 !important; margin: 0; }
.table-of-contents li::before { display: none !important; }
.table-of-contents li a {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: .9rem; color: var(--text-2); min-height: 24px;
  transition: background .15s ease, color .15s ease;
}
.table-of-contents li a:hover { background: var(--blue-soft); color: var(--blue-deep); }
.table-of-contents h3 { margin: 0 0 12px !important; padding: 0 !important; border: none !important; font-size: 1rem; }
.content-container > .last-updated { margin-bottom: 26px; }