/* ============================================================
   Padeli /get-started/ Hub - Component CSS v1
   Date: 2026-05-12
   Scope: every /get-started/* page (rules, scoring, court, serve,
          glossary index, glossary term pages, levels, etc.)
   ============================================================ */

:root {
  --padeli-primary: #0d464d;
  --padeli-primary-light: rgba(13,70,77,0.10);
  --padeli-primary-tint: rgba(13,70,77,0.06);
  --padeli-accent: #FF6F60;
  --padeli-border: #e2e8f0;
  --padeli-text: #333333;
  --padeli-text-muted: #666666;
  --padeli-text-faint: #888888;
}

/* ---------- Eyebrow chip (above H1 on /get-started/ pillars) ---------- */
.eyebrow,
.term-eyebrow {
  display: inline-block;
  background: rgba(13,70,77,0.08);
  border: 1px solid rgba(13,70,77,0.18);
  color: var(--padeli-primary);
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: 'Raleway', system-ui, sans-serif;
}

/* ---------- E-E-A-T strip below the DA block ---------- */
.eeat-strip {
  border: 1px solid var(--padeli-border);
  background: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 18px 0 24px;
  font-size: 13px;
}
.eeat-strip p { margin: 0; line-height: 1.65; color: var(--padeli-text-muted); }
.eeat-strip strong { color: var(--padeli-primary); font-weight: 700; }
.eeat-strip a { color: var(--padeli-primary); }

/* ---------- Source citation callout ---------- */
.wp-block-group.callout-rule,
.callout-rule {
  background: var(--padeli-primary-tint);
  border-left: 4px solid var(--padeli-primary);
  padding: 14px 18px !important;
  margin: 20px 0 !important;
  border-radius: 0 4px 4px 0;
}
.callout-rule p { margin: 0; font-size: 14px; line-height: 1.65; }
.callout-rule strong { color: var(--padeli-primary); font-family: 'Raleway', system-ui, sans-serif; }

/* ---------- YMYL safety callout (medically reviewed sections) ---------- */
.ymyl-callout,
.padeli-callout,
.padeli-callout-ymyl,
aside.padeli-callout {
  background: #fff7f5;
  border-left: 4px solid var(--padeli-accent);
  padding: 18px 22px !important;
  margin: 24px 0 !important;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.7;
}
.ymyl-callout strong:first-child,
.padeli-callout-ymyl strong:first-child {
  display: inline-block;
  color: var(--padeli-accent);
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.ymyl-callout p,
.padeli-callout-ymyl p { margin: 0; }

/* ---------- Padeli tables (max 2 per page rule, both styled the same) ---------- */
.wp-block-table.padeli-table table,
table.padeli-table,
.wp-block-table.serve-mini-table table,
.wp-block-table.changes-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--padeli-border);
  margin: 18px 0;
}
.wp-block-table.padeli-table th,
.wp-block-table.padeli-table td,
.wp-block-table.serve-mini-table th,
.wp-block-table.serve-mini-table td,
.wp-block-table.changes-table th,
.wp-block-table.changes-table td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--padeli-border);
  line-height: 1.55;
}
.wp-block-table.padeli-table th,
.wp-block-table.serve-mini-table th,
.wp-block-table.changes-table th {
  background: var(--padeli-primary-tint);
  color: var(--padeli-primary);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
}
.wp-block-table.padeli-table tr:nth-child(even) td,
.wp-block-table.serve-mini-table tr:nth-child(even) td,
.wp-block-table.changes-table tr:nth-child(even) td { background: #fafafa; }

/* ---------- Related Reading block ---------- */
.wp-block-group.related-reading,
.related-reading {
  background: var(--padeli-primary-tint);
  border-radius: 10px;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
}
.related-reading h3,
.related-reading > h2,
.related-reading > h3 {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 18px;
  color: var(--padeli-primary) !important;
  margin: 0 0 14px !important;
  font-weight: 700;
}
.related-reading ul { margin: 0; padding: 0; list-style: none; }
.related-reading li {
  padding: 8px 0;
  border-top: 1px solid rgba(13,70,77,0.15);
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.related-reading li:first-child { border-top: 0; }
.related-reading li::before {
  content: "→";
  color: var(--padeli-primary);
  font-weight: 700;
}
.related-reading a { color: var(--padeli-primary); text-decoration: none; }
.related-reading a:hover { text-decoration: underline; }

/* ---------- Listing CTA block (market-aware close) ---------- */
.wp-block-group.listing-cta,
.wp-block-group.listing-cta-block,
.listing-cta,
.listing-cta-block {
  background: var(--padeli-primary);
  color: #fff;
  padding: 36px 32px !important;
  border-radius: 12px;
  text-align: center;
  margin: 40px 0 !important;
}
.listing-cta h3,
.listing-cta-block h3 {
  font-family: 'Raleway', system-ui, sans-serif;
  color: #fff !important;
  font-size: 24px !important;
  margin: 0 0 8px !important;
}
.listing-cta p,
.listing-cta-block p {
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 20px !important;
}
/* Inline links inside the dark teal listing-cta banner - orange/coral so they stand out */
.listing-cta p a,
.listing-cta-block p a,
.listing-cta a,
.listing-cta-block a {
  color: #FF6F60 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.15s ease;
}
.listing-cta p a:hover,
.listing-cta-block p a:hover,
.listing-cta a:hover,
.listing-cta-block a:hover {
  color: #fff !important;
}
.listing-cta .wp-block-buttons,
.listing-cta-block .wp-block-buttons {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.listing-cta .wp-block-button__link,
.listing-cta-block .wp-block-button__link {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600;
  font-family: 'Raleway', system-ui, sans-serif;
}
.listing-cta .wp-block-button__link:hover,
.listing-cta-block .wp-block-button__link:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* ---------- Hide planned-links visual hint (under construction) ---------- */
a[data-planned="true"] {
  border-bottom: 1px dotted rgba(13,70,77,0.4);
}

/* ---------- Pillar hero (when wrapped via shortcode/elementor) ---------- */
.padeli-pillar-hero {
  background: linear-gradient(135deg, var(--padeli-primary) 0%, #0a3a40 100%);
  color: #fff;
  padding: 48px 0 40px;
  margin-bottom: 24px;
}
.padeli-pillar-hero .breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}
.padeli-pillar-hero h1 {
  color: #fff !important;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  margin: 0 0 14px;
}

/* ---------- Glossary term page components ---------- */
.term-pronunciation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  background: var(--padeli-primary-tint);
  border: 1px solid var(--padeli-primary-light);
  padding: 6px 14px;
  border-radius: 22px;
  font-size: 13px;
  color: var(--padeli-primary);
}
.term-pronunciation .ipa { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.term-pronunciation .play-btn {
  width: 24px; height: 24px;
  background: var(--padeli-accent);
  border: 0; color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
}

.term-quick-facts {
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 8px;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.term-quick-facts .fact .lbl {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--padeli-text-faint);
  font-weight: 700;
  display: block;
}
.term-quick-facts .fact .val {
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--padeli-primary);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

.see-also {
  background: var(--padeli-primary-tint);
  border-radius: 10px;
  padding: 22px 26px !important;
  margin: 32px 0 !important;
}
.see-also h3 {
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--padeli-primary) !important;
  font-size: 17px !important;
  margin: 0 0 12px !important;
  font-weight: 700;
}
.see-also .term-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.term-chip {
  background: #fff;
  border: 1px solid rgba(13,70,77,0.18);
  color: var(--padeli-primary) !important;
  padding: 6px 12px;
  border-radius: 16px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
}
.term-chip:hover {
  background: var(--padeli-primary);
  color: #fff !important;
}

/* ---------- Direct-answer reinforcement (already styled on site - light touch) ---------- */
p.direct-answer {
  background-color: #e9e9e9;
  padding: 20px !important;
  color: var(--padeli-primary);
  font-weight: 500;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.65;
}
p.direct-answer::before {
  content: "Quick answer";
  display: block;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--padeli-primary);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ---------- Mobile breakpoints ---------- */
@media (max-width: 768px) {
  .term-quick-facts { grid-template-columns: repeat(2, 1fr) !important; }
  .listing-cta,
  .listing-cta-block { padding: 28px 20px !important; }
}

/* ============================================================
   /get-started/ branded pillar hero
   Targets the Elementor page-title widget + breadcrumb widget
   and the section that wraps them. Only fires on /get-started/*
   pages because the entire snippet is scope-gated in PHP.
   ============================================================ */

/* Style the section that contains the page title - turn it into a gradient hero */
.elementor-element.e-con:has(> .e-con-inner > .elementor-widget-theme-page-title),
.elementor-section:has(.elementor-widget-theme-page-title) {
  background: linear-gradient(135deg, #0d464d 0%, #0a3a40 100%) !important;
  padding: 48px 0 40px !important;
  margin-bottom: 32px !important;
}

/* Page title widget - make H1 white + Raleway + larger */
.elementor-widget-theme-page-title .elementor-heading-title {
  color: #fff !important;
  font-family: 'Raleway', 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 8px !important;
}

/* (We can target specific page IDs later for /glossary/, /levels/ etc.) */

/* Breadcrumb widget - white text on the gradient */
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb,
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
}
.elementor-widget-woocommerce-breadcrumb {
  margin-top: 10px;
}

/* Hide the duplicate body-level H1 if any pillar still has one */
.entry-content > h1:first-child,
.post-content > h1:first-child {
  display: none !important;
}

/* ============================================================
   /get-started/ Branded Pillar Hero - in-body block
   Rendered as a wp:html block at the top of each pillar's body.
   Override-strength selectors to win against theme styles.
   ============================================================ */

/* Hide the Listeo/WP theme's plain page title - we render our own hero */
body.padeli-getstarted-page .single-post-content > h1:first-of-type,
body.padeli-getstarted-page .single-post-content > h1:first-of-type,
body.padeli-getstarted-page .entry-content > h1:first-of-type,
body.padeli-getstarted-page .entry-content > h1:first-of-type,
body.padeli-getstarted-page .post-content > h1:first-of-type,
body.padeli-getstarted-page .post-content > h1:first-of-type,
body.padeli-getstarted-page h1.entry-title,
body.padeli-getstarted-page h1.entry-title,
body.padeli-getstarted-page .page-title,
body.padeli-getstarted-page .page-title,
body.padeli-getstarted-page .titlebar-title,
body.padeli-getstarted-page .titlebar-title,
body.padeli-getstarted-page .listeo-page-title,
body.padeli-getstarted-page .listeo-page-title {
  display: none !important;
}

/* The hero block itself - branded gradient */
.padeli-pillar-hero-block {
  background: linear-gradient(135deg, #0d464d 0%, #0a3a40 100%);
  color: #fff;
  padding: 56px 0 48px;
  margin: 0 0 32px;
  /* Stretch edge to edge by negating the content container's padding */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  position: relative;
}

.padeli-pillar-hero-block .padeli-pillar-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumb */
.padeli-pillar-breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.padeli-pillar-breadcrumb a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}
.padeli-pillar-breadcrumb a:hover { color: #fff !important; text-decoration: underline; }
.padeli-pillar-breadcrumb .sep { margin: 0 6px; color: rgba(255,255,255,0.4); }

/* Eyebrow chip */
.padeli-pillar-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.95);
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  margin-bottom: 14px;
  font-family: 'Raleway', system-ui, sans-serif;
}

/* The big white H1 */
.padeli-pillar-h1 {
  color: #fff !important;
  font-family: 'Raleway', 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

/* Post-meta row */
.padeli-pillar-meta {
  display: flex;
  gap: 22px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  flex-wrap: wrap;
  align-items: center;
}
.padeli-pillar-meta strong { color: rgba(255,255,255,0.95); font-weight: 700; }
.padeli-pillar-meta span { display: inline-flex; align-items: center; gap: 6px; }
.padeli-pillar-meta span + span::before {
  content: "•";
  color: rgba(255,255,255,0.4);
  margin-right: 14px;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .padeli-pillar-hero-block { padding: 36px 0 32px; }
  .padeli-pillar-h1 { font-size: 30px !important; }
  .padeli-pillar-meta { gap: 12px; font-size: 11px; }
  .padeli-pillar-meta span + span::before { margin-right: 8px; }
}

/* ============================================================
   Listeo theme overrides for /get-started/ pages
   - Hide the Listeo #titlebar (renders a duplicate page title)
   - The hero block we inject in body replaces it
   ============================================================ */

body.padeli-getstarted-page #titlebar,
body.padeli-getstarted-page #titlebar,
body.padeli-getstarted-page .titlebar,
body.padeli-getstarted-page .titlebar {
  display: none !important;
}

/* Also hide any duplicate title rendered above #content for these pages */
body.padeli-getstarted-page .page-header,
body.padeli-getstarted-page .page-header {
  display: none !important;
}

/* Hero meta separator fix - drop the · entity-driven approach and use a CSS-generated dot */
/* Reset any leftover ::before that produced mojibake */
.padeli-pillar-meta span + span::before {
  content: "•" !important;
  color: rgba(255,255,255,0.4) !important;
  margin-right: 14px;
  display: inline-block;
}

/* Ensure the hero block stretches edge to edge inside Listeo's content wrapper */
.single-post-content .padeli-pillar-hero-block,
.entry-content .padeli-pillar-hero-block,
.post-content .padeli-pillar-hero-block,
article .padeli-pillar-hero-block {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ============================================================
   /get-started/glossary/ index page components
   ============================================================ */

.glossary-stats-strip {
  display: flex;
  gap: 32px;
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 8px;
  padding: 18px 24px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.glossary-stats-strip .stat {
  text-align: center;
  font-family: 'Raleway', system-ui, sans-serif;
}
.glossary-stats-strip .stat .num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--padeli-accent);
  line-height: 1;
}
.glossary-stats-strip .stat .lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--padeli-text-muted);
  margin-top: 4px;
}

/* Theme jump nav (sticky top under header) */
.glossary-theme-jumps {
  background: var(--padeli-primary-tint);
  padding: 14px 18px;
  border-radius: 8px;
  margin: 20px 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.glossary-theme-jumps .theme-jump {
  background: #fff;
  border: 1px solid var(--padeli-primary-light);
  color: var(--padeli-primary) !important;
  padding: 6px 14px;
  border-radius: 16px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.glossary-theme-jumps .theme-jump:hover {
  background: var(--padeli-primary) !important;
  color: #fff !important;
}
.glossary-theme-jumps .theme-jump .count {
  background: rgba(13,70,77,0.15);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}
.glossary-theme-jumps .theme-jump:hover .count {
  background: rgba(255,255,255,0.25);
}

/* Themed sections */
.glossary-theme-section {
  margin-bottom: 48px;
  scroll-margin-top: 90px; /* offset for sticky header */
}
.glossary-theme-section .theme-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--padeli-primary);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.glossary-theme-section .theme-header h2 {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: var(--padeli-primary) !important;
  margin: 0 !important;
}
.glossary-theme-section .theme-count {
  color: var(--padeli-text-faint);
  font-size: 13px;
  font-family: 'Raleway', system-ui, sans-serif;
}

/* Alpha jump nav per theme */
.glossary-theme-section .alpha-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.glossary-theme-section .alpha-nav a {
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--padeli-border);
  color: var(--padeli-primary) !important;
  text-decoration: none !important;
}
.glossary-theme-section .alpha-nav a:hover {
  background: var(--padeli-primary) !important;
  color: #fff !important;
}

/* Term grid - 2 columns desktop, 1 mobile */
.term-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .term-grid { grid-template-columns: 1fr; }
}

/* Term card */
.term-card {
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.15s;
  scroll-margin-top: 90px;
}
.term-card.has-page {
  text-decoration: none !important;
  color: var(--padeli-text) !important;
  cursor: pointer;
}
.term-card.has-page:hover {
  border-color: var(--padeli-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,70,77,0.08);
  text-decoration: none !important;
}

.term-letter {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--padeli-primary-tint);
  color: var(--padeli-primary);
  border-radius: 4px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.term-card .term-body {
  flex: 1;
  min-width: 0;
}
.term-card .term-name {
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  color: var(--padeli-primary);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.term-card .term-meta {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.term-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Raleway', system-ui, sans-serif;
}
.term-tag.spanish { background: #fef3c7; color: #92400e; }
.term-tag.audio { background: #fff3e0; color: #d97706; }
.term-tag.video { background: #e3f2fd; color: #1565c0; }
.term-tag.page { background: var(--padeli-primary); color: #fff; }

.term-card .term-def {
  font-size: 12px;
  color: var(--padeli-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================================
   /get-started/ HERO - mockup-fidelity design
   Single centred column, dark teal gradient, edge-to-edge.
   No featured image (was over-engineered).
   ============================================================ */

.padeli-pillar-hero-block.hero-centred {
  background: linear-gradient(135deg, #0d464d 0%, #0a3a40 100%) !important;
  color: #fff !important;
  /* Full-bleed: extend to viewport edges, then pad back so content aligns with body */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  padding-top: 56px !important;
  padding-bottom: 48px !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  width: auto;
  position: relative;
}

.padeli-pillar-hero-block.hero-centred::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: linear-gradient(135deg, #0d464d 0%, #0a3a40 100%);
  z-index: -1;
  pointer-events: none;
}
.padeli-pillar-hero-block.hero-centred .padeli-pillar-hero-inner {
  text-align: left;
  max-width: 100%;
}
.hero-centred .hero-breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
}
.hero-centred .hero-breadcrumb a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}
.hero-centred .hero-breadcrumb a:hover { color: #fff !important; text-decoration: underline; }
.hero-centred .hero-breadcrumb .sep { margin: 0 8px; color: rgba(255,255,255,0.4); }

.hero-centred .padeli-pillar-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.95) !important;
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  margin-bottom: 18px;
  font-family: 'Raleway', system-ui, sans-serif;
}

.hero-centred .padeli-pillar-h1 {
  color: #fff !important;
  font-family: 'Raleway', 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 46px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 18px !important;
  max-width: 22ch;
}

.hero-centred .hero-description {
  color: rgba(255,255,255,0.88) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0 0 28px !important;
  font-weight: 400 !important;
  max-width: 62ch;
}
.hero-centred .hero-description a {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.45);
}
.hero-centred .hero-description a:hover { text-decoration-color: #fff; }

/* Meta strip below the description (for pillars) */
.hero-centred .hero-meta-strip {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: 62ch;
  align-items: center;
}
.hero-centred .hero-meta-strip strong {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
.hero-centred .hero-meta-strip span + span::before {
  /* Bullet handled via gap + responsive layout - keeps wrap clean */
  display: none;
}

/* Glossary index hero stats - 4 columns of big coral numbers */
.hero-centred .glossary-hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hero-centred .glossary-hero-stats .stat {
  text-align: left;
  font-family: 'Raleway', system-ui, sans-serif;
}
.hero-centred .glossary-hero-stats .stat .num {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--padeli-accent);
  line-height: 1;
}
.hero-centred .glossary-hero-stats .stat .lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .padeli-pillar-hero-block.hero-centred { padding: 36px 0 28px !important; }
  .padeli-pillar-hero-block.hero-centred .padeli-pillar-hero-inner {
  /* .container class (Listeo Bootstrap) handles the max-width + horizontal padding
     so the hero content aligns with the body content's left edge */
}
  .hero-centred .padeli-pillar-h1 { font-size: 30px !important; }
  .hero-centred .hero-description { font-size: 15px !important; }
  .hero-centred .glossary-hero-stats { gap: 20px; }
  .hero-centred .glossary-hero-stats .stat .num { font-size: 28px; }
  .hero-centred .hero-meta-strip { gap: 10px; font-size: 12px; }
  .hero-centred .hero-meta-strip span + span::before { margin-right: 8px; }
}

/* ============================================================
   Hero inner uses Listeo's .container.content-container.full-width
   to inherit the same left-edge alignment as body content.
   Override any vertical padding / background that .content-container
   normally adds (it's intended for white-card body wrappers).
   ============================================================ */
.padeli-pillar-hero-block.hero-centred .padeli-pillar-hero-inner.content-container,
.padeli-pillar-hero-block.hero-centred .container.content-container.full-width.padeli-pillar-hero-inner {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ============================================================
   /get-started/glossary/{slug}/ term page components
   ============================================================ */

/* Pronunciation strip in the hero (for Spanish-origin terms) */
.term-pronunciation-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 8px 16px;
  border-radius: 22px;
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  font-family: 'Raleway', system-ui, sans-serif;
}
.term-pronunciation-strip .pron-label {
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.term-pronunciation-strip .pron-phonetic {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.term-pronunciation-strip .pron-ipa {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}

/* Related pillar CTA paragraph at the end of term pages */
.related-pillar-cta {
  background: var(--padeli-primary-tint);
  border-left: 4px solid var(--padeli-primary);
  padding: 18px 22px !important;
  margin: 32px 0 !important;
  font-size: 15px;
  border-radius: 0 6px 6px 0;
}
.related-pillar-cta a {
  color: var(--padeli-primary) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(13,70,77,0.4);
}
.related-pillar-cta a:hover { text-decoration-color: var(--padeli-primary); }

/* ============================================================
   Term card link affordance - replace PAGE chip with right arrow
   ============================================================ */

/* Hide the old PAGE text chip */
.term-tag.page { display: none !important; }

/* Add a subtle right-arrow indicator on cards that link to a page */
.term-card.has-page {
  position: relative;
  padding-right: 40px !important;
}
.term-card.has-page::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--padeli-primary);
  font-size: 18px;
  font-weight: 700;
  font-family: 'Raleway', system-ui, sans-serif;
  opacity: 0.35;
  transition: all 0.18s ease;
  pointer-events: none;
}
.term-card.has-page:hover::after {
  opacity: 1;
  color: var(--padeli-accent);
  transform: translateY(-50%) translateX(4px);
}

/* ============================================================
   Planned-but-not-yet-live link discipline
   Targets:  a[data-planned="true"]
   Behaviour: visually muted, not clickable (no 404 trap)
   ============================================================ */

/* See-also term chips that don't have pages yet */
.term-chip[data-planned="true"] {
  background: #f5f5f5 !important;
  color: var(--padeli-text-muted) !important;
  border-color: var(--padeli-border) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.7;
}
.term-chip[data-planned="true"]::after {
  content: " (soon)";
  font-size: 10px;
  font-weight: 400;
  color: var(--padeli-text-faint);
  margin-left: 4px;
}
.term-chip[data-planned="true"]:hover {
  background: #f5f5f5 !important;
  color: var(--padeli-text-muted) !important;
}

/* In-body links to glossary terms that don't have pages yet */
a[data-planned="true"]:not(.term-chip):not(.term-card):not(.hub-city-pill):not(.hub-pill):not(.padeli-market-button) {
  color: var(--padeli-text-muted) !important;
  text-decoration-style: dotted !important;
  text-decoration-color: var(--padeli-text-faint) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* For term-card.has-page that links to planned URL (shouldn't happen but defensive) */
.term-card.has-page[data-planned="true"] {
  /* Keep clickable - these ARE expected to be planned for index display */
}

/* ============================================================
   Hub root - /get-started/ page-specific components
   ============================================================ */

/* Hub hero CTA button (large coral CTA below description) */


.hero-cta-row { margin: 0 0 24px; }

/* 2026 Update freshness strip (between hero and intent router) */
.hub-update-strip {
  background: var(--padeli-primary-tint);
  border-top: 3px solid var(--padeli-primary);
  border-bottom: 1px solid rgba(13,70,77,0.18);
  padding: 18px 0;
  margin: 0 0 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}
.hub-update-strip .container {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hub-update-pill {
  background: var(--padeli-accent);
  color: #fff;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 11px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hub-update-strip p {
  margin: 0 !important;
  color: var(--padeli-text);
  font-size: 14px;
  flex: 1;
  min-width: 240px;
}
.hub-update-strip p strong { color: var(--padeli-primary); }
.hub-update-read {
  color: var(--padeli-primary) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  white-space: nowrap;
}
.hub-update-read:hover { text-decoration: underline !important; }

/* Intent router (5 cards) */
.hub-intent-router {
  padding: 56px 0 !important;
  background: #fff;
}
.hub-intent-router h2,
.hub-pillar-grid-section h2 {
  text-align: center;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: var(--padeli-primary) !important;
  margin: 0 0 8px !important;
}
.hub-section-sub {
  text-align: center;
  color: var(--padeli-text-muted);
  margin: 0 0 36px !important;
  font-size: 15px;
}
.hub-intent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.hub-intent-card {
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 10px;
  padding: 24px 18px;
  text-align: center;
  text-decoration: none !important;
  color: var(--padeli-text) !important;
  transition: all 0.15s ease;
  display: block;
}
.hub-intent-card:hover {
  border-color: var(--padeli-primary);
  background: var(--padeli-primary-tint);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13,70,77,0.08);
  text-decoration: none !important;
}
.hub-intent-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  background: var(--padeli-primary-light);
  color: var(--padeli-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}
.hub-intent-card h3 {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: 15px !important;
  margin: 0 0 4px !important;
  color: var(--padeli-primary) !important;
  font-weight: 700;
}
.hub-intent-card p {
  margin: 0 !important;
  font-size: 12px;
  color: var(--padeli-text-muted);
}

/* Pillar grid (9 cards) */
.hub-pillar-grid-section {
  padding: 56px 0 !important;
  background: #fafafa;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}
.hub-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hub-pillar-card {
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--padeli-text) !important;
  transition: all 0.18s ease;
}
.hub-pillar-card:not(.hub-pillar-soon):hover {
  border-color: var(--padeli-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,70,77,0.1);
  text-decoration: none !important;
}
.hub-pillar-card.hub-pillar-soon {
  opacity: 0.7;
  cursor: not-allowed;
}
.hub-pillar-thumb {
  height: 140px;
  background: linear-gradient(135deg, #14606a, #0d464d);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-family: 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
}
.hub-pillar-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hub-pillar-tag {
  font-size: 10px;
  color: var(--padeli-accent);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: 'Raleway', system-ui, sans-serif;
}
.hub-pillar-card h3 {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: 17px !important;
  margin: 0 0 8px !important;
  color: var(--padeli-primary) !important;
  font-weight: 700;
  line-height: 1.3;
}
.hub-pillar-card p {
  font-size: 13px !important;
  color: var(--padeli-text-muted);
  margin: 0 0 14px !important;
  flex: 1;
  line-height: 1.55;
}
.hub-pillar-meta {
  font-size: 11px;
  color: var(--padeli-text-faint);
  font-family: 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.3px;
}

/* Listing CTA close */
.hub-listing-cta {
  background: var(--padeli-primary);
  color: #fff;
  padding: 48px 0 !important;
  text-align: center;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  margin-bottom: 0 !important;
}
.hub-listing-cta h2 {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: 28px !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}
.hub-listing-cta p {
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 22px !important;
}
.hub-city-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}





@media (max-width: 900px) {
  .hub-intent-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-pillar-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Variant markup the drafting-agents used (not the standard pattern)
   - .related-reading-grid + .related-reading-card + .rr-eyebrow + .rr-title
   - .hub-listing-cta-pills + .hub-pill + .hub-listing-cta-button-wrap + .hub-listing-cta-button
   - .padeli-market-buttons + .padeli-market-button
   ============================================================ */

/* Related reading - cards grid variant */
.related-reading-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.related-reading-card {
  background: #fff;
  border: 1px solid var(--padeli-primary-light);
  border-radius: 8px;
  padding: 14px 18px;
  text-decoration: none !important;
  color: var(--padeli-primary) !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}
.related-reading-card:hover {
  background: var(--padeli-primary-tint);
  border-color: var(--padeli-primary);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.related-reading-card .rr-eyebrow {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--padeli-accent);
}
.related-reading-card .rr-title {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--padeli-primary);
  line-height: 1.35;
}

/* Ensure links inside .related-reading lists are visibly styled */
.related-reading ul li a,
.related-reading ol li a {
  color: var(--padeli-primary) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(13,70,77,0.4);
}
.related-reading ul li a:hover,
.related-reading ol li a:hover {
  text-decoration-color: var(--padeli-primary);
}

/* Hub listing CTA variant markup the agents produced */
.hub-listing-cta-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 22px;
}


.hub-listing-cta-button-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}



/* Padeli market buttons (rules page used this for its CTA) */
.padeli-market-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0;
}
.padeli-market-button {
  background: var(--padeli-primary-tint);
  border: 1px solid var(--padeli-primary-light);
  color: var(--padeli-primary) !important;
  padding: 8px 18px;
  border-radius: 24px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
}
.padeli-market-button:hover {
  background: var(--padeli-primary);
  color: #fff !important;
  text-decoration: none !important;
}

/* Mobile: stack the grid */
@media (max-width: 768px) {
  .related-reading-grid { grid-template-columns: 1fr; }
}

/* Updated button + pill styles to match padeli.com homepage */
.hub-listing-cta-button,
.hub-listing-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--padeli-primary) !important;
  color: #fff !important;
  padding: 18px 36px !important;
  border-radius: 999px !important;
  font-family: 'Raleway', 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  border: 0;
  transition: all 0.18s ease;
  box-shadow: 0 4px 16px rgba(13,70,77,0.25);
  line-height: 1;
}
.hub-listing-cta-button:hover,
.hub-listing-cta-btn:hover {
  background: #0a3a40 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(13,70,77,0.35);
  color: #fff !important;
  text-decoration: none !important;
}

.hub-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--padeli-accent) !important;
  color: #fff !important;
  padding: 18px 36px !important;
  border-radius: 999px !important;
  font-family: 'Raleway', 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  margin: 0 0 28px;
  transition: all 0.18s ease;
  box-shadow: 0 4px 16px rgba(255,111,96,0.3);
  line-height: 1;
}
.hub-hero-cta:hover {
  background: #ef5d50 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,111,96,0.4);
  color: #fff !important;
  text-decoration: none !important;
}

.hub-city-pill,
.hub-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 28px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1;
  transition: all 0.15s ease;
}
.hub-city-pill:hover,
.hub-pill:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.5);
  text-decoration: none !important;
}

/* ============================================================
   Pillar page 2-column layout with sticky TOC sidebar
   - Hero stays full-width above
   - Related-Reading + Listing-CTA stay full-width below
   - Only the body H2 content sits in this 2-column grid
   ============================================================ */

.padeli-pillar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
  align-items: flex-start;
}

.padeli-pillar-toc {
  position: sticky;
  top: 100px;
}

.toc-card {
  background: #fff;
  border: 1px solid var(--padeli-border);
  border-radius: 10px;
  padding: 24px 22px;
  box-shadow: 0 2px 8px rgba(13,70,77,0.04);
}

.toc-card h3 {
  font-family: 'Raleway', system-ui, sans-serif !important;
  color: var(--padeli-accent) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--padeli-border);
}

.toc-list {
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 24px;
  counter-reset: toc-counter;
}
.toc-list li {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  padding-left: 4px;
}
.toc-list li a {
  color: var(--padeli-text) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.toc-list li a:hover {
  color: var(--padeli-primary) !important;
  text-decoration: none;
}
.toc-list li::marker {
  color: var(--padeli-primary);
  font-weight: 700;
}

.padeli-pillar-body {
  min-width: 0;
}

/* H2 scroll-margin so anchor jumps don't collide with sticky header */
.padeli-pillar-body h2 {
  scroll-margin-top: 90px;
}

/* ============================================================
   Lead-magnet / CTA card block - used for "Take the quiz" cards,
   downloadable PDFs and similar lead-capture moments
   ============================================================ */
.padeli-leadmagnet-block {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #f4f6f6 0%, #e8f0f1 100%);
  border: 1px solid #d6dee0;
  border-left: 4px solid var(--padeli-accent);
  border-radius: 12px;
  padding: 28px 28px;
  margin: 32px 0;
}
.padeli-leadmagnet-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--padeli-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.padeli-leadmagnet-emoji {
  color: #fff;
  font-size: 32px;
  line-height: 1;
}
.padeli-leadmagnet-body {
  flex: 1;
}
.padeli-leadmagnet-body h3 {
  margin: 0 0 10px !important;
  font-size: 1.45rem !important;
  color: var(--padeli-primary) !important;
  font-weight: 700;
  padding-top: 0 !important;
  line-height: 1.3 !important;
}
.padeli-leadmagnet-body h3::before {
  display: none !important;
}
.padeli-leadmagnet-body p {
  margin: 0 0 18px !important;
  font-size: 1.1rem !important;
  color: #3a4548 !important;
  line-height: 1.55 !important;
}
.padeli-leadmagnet-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: var(--padeli-primary) !important;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background 0.15s ease;
}
.padeli-leadmagnet-cta:hover {
  background: var(--padeli-accent) !important;
  color: #fff !important;
}
@media (max-width: 600px) {
  .padeli-leadmagnet-block {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px;
  }
}

/* ============================================================
   Platforms grid - "where to sign up" cards on the quiz page
   ============================================================ */
.padeli-platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 48px 0 64px;
}
.padeli-platform-card {
  background: #fff;
  border: 1px solid #e6e8e8;
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.padeli-platform-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,70,77,0.08);
}
.padeli-platform-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 10px;
  padding: 0 16px;
}
.padeli-platform-mark-img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  display: block;
}
/* Per-platform brand backgrounds and logo sizing tweaks */
.padeli-platform-playtomic .padeli-platform-logo {
  background: #ffffff;
  border: 1px solid #e6e8e8;
}
.padeli-platform-playtomic .padeli-platform-mark-img {
  filter: brightness(0.35);
  max-height: 30px;
}
.padeli-platform-matchi .padeli-platform-logo {
  background: #ffffff;
  border: 1px solid #e6e8e8;
}
.padeli-platform-matchi .padeli-platform-mark-img {
  max-height: 42px;
}
.padeli-platform-lta .padeli-platform-logo {
  background: #ffffff;
  border: 1px solid #e6e8e8;
}
.padeli-platform-lta .padeli-platform-mark-img {
  max-height: 48px;
}
.padeli-platform-fip .padeli-platform-logo {
  background: #ffffff;
  border: 1px solid #e6e8e8;
}
.padeli-platform-fip .padeli-platform-mark-img {
  max-height: 48px;
}
.padeli-platform-blurb {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: #3a4548 !important;
  margin: 0 0 16px !important;
  flex: 1;
}
.padeli-platform-scale {
  font-size: 1rem !important;
  color: #4a5658 !important;
  margin: 0 0 20px !important;
  letter-spacing: 0.01em;
  line-height: 1.55 !important;
}
.padeli-platform-scale strong {
  color: #0d464d;
  font-weight: 700;
}
.padeli-platform-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: #0d464d !important;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background 0.15s ease;
  margin-top: auto;
}
.padeli-platform-cta:hover {
  background: #ec605a !important;
  color: #fff !important;
}

/* H2 / H3 base colour on /get-started/ pages - no coral underline bars.
   Brand pop comes from the hero, the FAQ accordion arrows, and the listing CTA. */
body.padeli-getstarted-page .padeli-pillar-body h2,
body.padeli-getstarted-page .entry-content > h2,
body.padeli-getstarted-page .single-post-content > h2,
body.padeli-getstarted-page .post-content > h2,
body.padeli-getstarted-page .wp-block-heading {
  color: var(--padeli-primary) !important;
}
body.padeli-getstarted-page .related-reading > h3,
body.padeli-getstarted-page .see-also > h3 {
  color: var(--padeli-primary) !important;
}

/* ============================================================
   Body typography rhythm - more breathing room between paragraphs
   and sections on every /get-started/ page.
   ============================================================ */
body.padeli-getstarted-page .padeli-pillar-body p,
body.padeli-getstarted-page .entry-content p,
body.padeli-getstarted-page .post-content p {
  line-height: 1.8 !important;
  margin-bottom: 1.6em !important;
  font-size: 17px;
}
body.padeli-getstarted-page .padeli-pillar-body li,
body.padeli-getstarted-page .entry-content li,
body.padeli-getstarted-page .post-content li {
  line-height: 1.8 !important;
  margin-bottom: 0.6em !important;
  font-size: 17px;
}
body.padeli-getstarted-page .padeli-pillar-body h2,
body.padeli-getstarted-page .entry-content > h2,
body.padeli-getstarted-page .single-post-content > h2,
body.padeli-getstarted-page .post-content > h2 {
  margin-top: 4.5em !important;
  margin-bottom: 1.3em !important;
  line-height: 1.3;
  font-size: 1.7rem !important;
}

/* FAQ accordion - more vertical space between items */
body.padeli-getstarted-page .padeli-faq-accordion details,
body.padeli-getstarted-page .padeli-faq-accordion .padeli-faq-item {
  margin-bottom: 14px !important;
}
body.padeli-getstarted-page .padeli-faq-accordion {
  margin-top: 8px !important;
}
body.padeli-getstarted-page .padeli-pillar-body h3,
body.padeli-getstarted-page .entry-content h3,
body.padeli-getstarted-page .post-content h3 {
  margin-top: 1.9em !important;
  margin-bottom: 0.7em !important;
  line-height: 1.35;
}
body.padeli-getstarted-page .padeli-pillar-body ul,
body.padeli-getstarted-page .padeli-pillar-body ol,
body.padeli-getstarted-page .entry-content > ul,
body.padeli-getstarted-page .entry-content > ol {
  margin: 1.4em 0 1.6em 1.2em !important;
}
/* First H2 inside the layout shouldn't have a huge top margin (it's right after DA block) */
body.padeli-getstarted-page .padeli-pillar-body > .wp-block-heading:first-of-type {
  margin-top: 1.6em !important;
}

/* Eyebrow chip in the hero - subtle coral-tinted label (not a button).
   Coral text + soft coral background, no padding bulk. Visually distinct
   from primary CTA buttons that share the coral colour. */
.padeli-pillar-hero-block .padeli-pillar-eyebrow {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: var(--padeli-accent) !important;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-size: 11px !important;
  padding: 5px 12px !important;
  text-transform: uppercase;
  border-radius: 4px !important;
}

/* H1 in the hero - no underline bar (coral pops elsewhere in the hero) */

/* Hero breadcrumb separators - coral instead of grey */
.padeli-pillar-hero-block .hero-breadcrumb .sep {
  color: var(--padeli-accent) !important;
  font-weight: 700;
}

/* Hero meta strip - <strong> labels in coral */
.padeli-pillar-hero-block .hero-meta-strip strong {
  color: var(--padeli-accent) !important;
}

/* Mobile: stack the columns, hide sticky behavior */
@media (max-width: 900px) {
  .padeli-pillar-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 24px auto;
  }
  .padeli-pillar-toc {
    position: static;
  }
  .toc-card {
    padding: 18px 20px;
  }
}