/* ══════════════════════════════════════════════════════════════
   Magnalitic — WordPress Custom Styles
   Mirrors build/templates/base.html for visual parity
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────── */

:root {
  --color-primary: #553A8B;
  --color-primary-dark: #33215E;
  --color-primary-hover: #4C3480;
  --color-primary-light: #C4B3E0;
  --color-accent: #017FE4;
  --color-accent-dark: #0172CD;
  --color-dark: #1C1237;
  --color-dark-surface: #241845;
  --color-light: #FFFFFF;
  --color-light-surface: #FAFAF9;
  --color-text-primary: #030107;
  --color-text-secondary: #64626b;
  --color-text-on-dark: #f0f0f5;
  --color-text-muted: #99979e;
  --color-border: #e5e5e8;
  --color-success: #22c55e;
  --color-glow: rgba(85, 58, 139, 0.15);

  --size-hero-title: 56px;
  --size-h2: 36px;
  --size-h3: 22px;
  --size-h4: 18px;
  --size-body: 16px;
  --size-small: 13px;
  --size-subtitle: 18px;
  --size-eyebrow: 13px;

  --spacing-section-y: 96px;
  --spacing-section-y-large: 128px;
  --spacing-column-gap: 32px;
  --spacing-card-padding: 32px;
  --spacing-max-width: 1200px;

  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Override fse-agency outer spacing to allow full-width sections */
  --wp--custom--spacing--outer: 0px;
}

/* ── Base Typography ────────────────────────────────────────── */

.entry-content,
.wp-block-post-content {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: none !important; /* kill fse-agency zoomInUp 0.8s delay on page load */
}

.entry-content h1,
.wp-block-post-content h1 {
  font-family: var(--font-heading);
  font-size: var(--size-hero-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.entry-content h2,
.wp-block-post-content h2 {
  font-family: var(--font-heading);
  font-size: var(--size-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.entry-content h3,
.wp-block-post-content h3 {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
}

.entry-content h4,
.wp-block-post-content h4 {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: 600;
  margin: 0 0 8px;
}

.entry-content p,
.wp-block-post-content p {
  line-height: 1.7;
}

.entry-content a,
.wp-block-post-content a {
  color: var(--color-primary);
  text-decoration: none;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
  text-decoration: underline;
}

.entry-content img,
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Flat system (2026-09-06 redesign): no glow shadows, no hover lift.
   .mag-btn is the template-side class (wp:html sections); the
   .wp-block-button__link.btn-* selectors keep block-based pages in sync. */

.wp-block-button__link.btn-primary,
.wp-block-button__link.btn-cta,
.wp-block-button__link.btn-outline,
.mag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.mag-btn svg { width: 20px; height: 20px; flex: none; }

.wp-block-button__link.btn-primary,
.mag-btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-light) !important;
}
.wp-block-button__link.btn-primary:hover,
.mag-btn--primary:hover {
  background: var(--color-primary-hover) !important;
  color: var(--color-light) !important;
}

.wp-block-button__link.btn-outline {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
}
.wp-block-button__link.btn-outline:hover {
  background: var(--color-primary-light) !important;
}

.wp-block-button__link.btn-cta,
.mag-btn--accent {
  background: var(--color-accent) !important;
  color: var(--color-light) !important;
}
.wp-block-button__link.btn-cta:hover,
.mag-btn--accent:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-light) !important;
}

.mag-btn--outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.mag-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.mag-btn--lg { font-size: 18px; padding: 16px 40px !important; }

.wp-block-button__link:focus-visible,
.mag-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 58, 139, 0.15) !important;
}

/* ── Cards ──────────────────────────────────────────────────── */

.magnalitic-card {
  position: relative;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 300ms cubic-bezier(0.2, 0, 0, 1),
              background 300ms ease,
              border-color 300ms ease;
  box-shadow: 0 2px 6px rgba(3, 1, 7, 0.06), 0 12px 28px rgba(3, 1, 7, 0.05);
}
/* Card icon — 64px gradient-tinted square containing inline SVG */
.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(85, 58, 139, 0.16) 0%, rgba(0, 119, 200, 0.12) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(85, 58, 139, 0.12);
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),
              background 300ms ease,
              box-shadow 300ms ease;
}
.card-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-primary);
  color: var(--color-primary);
}
.magnalitic-card:hover .card-icon {
  transform: scale(1.08) rotate(-3deg);
  background: linear-gradient(135deg, rgba(85, 58, 139, 0.26) 0%, rgba(0, 119, 200, 0.20) 100%);
  box-shadow: 0 8px 22px rgba(85, 58, 139, 0.20);
}
/* Card hover lift — deeper shadow drop */
.magnalitic-card:hover,
.magnalitic-card.reveal.revealed:hover {
  box-shadow: 0 24px 56px rgba(85, 58, 139, 0.18), 0 8px 20px rgba(3, 1, 7, 0.08) !important;
}
/* Tag chips — concrete deliverables under card body, in 3-column grid (3x2 for 6 chips, 1x3 for 3) */
.card-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 6px;
}
.card-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(85, 58, 139, 0.08);
  color: var(--color-primary);
  letter-spacing: 0.01em;
  line-height: 1.3;
  transition: background 220ms ease;
}
@media (max-width: 600px) {
  .card-tags {
    grid-template-columns: repeat(2, 1fr);
  }
}
.magnalitic-card:hover .card-tag {
  background: rgba(85, 58, 139, 0.14);
}
.magnalitic-card:hover,
.magnalitic-card.reveal.revealed:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 48px rgba(85, 58, 139, 0.16), 0 4px 16px rgba(3, 1, 7, 0.06);
  background: linear-gradient(160deg, rgba(85, 58, 139, 0.07) 0%, rgba(85, 58, 139, 0.02) 100%) !important;
  border-color: rgba(85, 58, 139, 0.28) !important;
}
/* Flex column layout pins CTA button to bottom for consistent alignment across cards */
.magnalitic-card.wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch;
}
.magnalitic-card > p,
.magnalitic-card .wp-block-list {
  flex: 1 1 auto;
}
.magnalitic-card .wp-block-buttons {
  margin-top: auto;
}
/* ── Cross-sell cards (columns style=cross-sell) ───────── */
/* Horizontal icon row: 56px icon tile, heading, one-line body, arrow text link. */
.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.cross-sell-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: left;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cross-sell-card:hover {
  border-color: rgba(85, 58, 139, 0.4);
  box-shadow: 0 8px 24px rgba(85, 58, 139, 0.10);
}
.cross-sell-card .card-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0;
  box-shadow: none;
}
.cross-sell-card .card-icon svg { width: 24px; height: 24px; }
.cross-sell-body { flex: 1 1 auto; min-width: 0; }
.cross-sell-body h3 {
  font-size: 20px !important;
  line-height: 1.3;
  margin: 2px 0 8px !important;
}
.cross-sell-body p {
  margin: 0 0 16px !important;
  font-size: 16px;
  line-height: 1.6;
  color: #4A4A56;
}
.cross-sell-link {
  display: inline;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary) !important;
  text-decoration: none !important;
}
/* inline arrow hugs the last word when the label wraps on narrow screens */
.cross-sell-link svg { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; transition: transform 200ms ease; }
.cross-sell-link:hover svg { transform: translateX(3px); }
@media (max-width: 768px) {
  .cross-sell-grid { grid-template-columns: 1fr; }
  .cross-sell-card { gap: 16px; padding: 24px; }
  .cross-sell-card .card-icon { flex-basis: 48px; width: 48px; height: 48px; }
  .cross-sell-card .card-icon svg { width: 22px; height: 22px; }
}

/* Solution-card per-product color identity — full ownership of color across bg, icon, heading, accent bar, chips */
.magnalitic-card > h3 {
  font-size: 26px !important;
  line-height: 1.25;
  margin-bottom: 6px;
}

/* ── Section: Dark Gradient ─────────────────────────────────── */

.section-dark-gradient {
  position: relative;
  overflow: hidden;
}
.section-dark-gradient > * {
  position: relative;
  z-index: 1;
}

/* ── Hero Background Image ─────────────────────────────── */

.hero-bg-image {
  position: absolute !important;
  top: 0;
  left: 50% !important;
  transform: translateX(-50%);
  width: 100vw;
  max-width: none !important;
  height: 100%;
  background: url('https://test.magnalitic.com/wp-content/uploads/2026/04/hero-pattern.png') center center / cover no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ── Hero: home layout (style=home) ─────────────────────────── */

.mag-hero-home {
  position: relative;
  overflow: hidden;
  padding: 112px 0 96px;
}
.mag-hero-home__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* Two classes so the hero title outranks the generic `.entry-content h1`
   (0,1,1), which otherwise wins and forces 56px/800 on desktop and 30px on
   phones — the sizes below never applied on WordPress before 2026-09-21.
   Fluid ramp: 36px at 375px, 46px at 768px, 64px at 1440px and above. */
.mag-hero-home .mag-hero-home__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 2.63vw + 26.1px, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
  max-width: 760px;
  margin: 0 0 24px;
  text-wrap: balance;
}
.mag-hero-home__lede {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 0 40px;
}
.mag-hero-home__audience {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(240, 240, 245, 0.72);
  max-width: 560px;
  margin: -24px 0 40px;
}
.mag-hero-home__ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* Variant B — centered. Switched by design/tokens.yaml layout.hero_align: center. */
.mag-hero-home--center .mag-hero-home__inner { text-align: center; }
.mag-hero-home--center .mag-hero-home__title,
.mag-hero-home--center .mag-hero-home__lede,
.mag-hero-home--center .mag-hero-home__audience { margin-left: auto; margin-right: auto; }
.mag-hero-home--center .mag-hero-home__ctas { justify-content: center; }

@media (max-width: 768px) {
  .mag-hero-home { padding: 80px 0 64px; }
  .mag-hero-home__inner { padding: 0 24px; }
  .mag-hero-home__lede { font-size: 18px; margin-bottom: 32px; }
}

/* The first band's image is a grid cell that WordPress centres against the text
   column. The text is taller and varies per page, so the image started anywhere
   from 96px to 150px below the hero while every heading sat at exactly 96px.
   Aligning the media to the start lines the image up with the heading. */
.section-after-hero figure.wp-block-media-text__media,
.section-after-hero .wp-block-media-text__content { align-self: start; }

/* ── Closing CTA card ───────────────────────────────────────── */


/* `section.mag-cta` rather than `.mag-cta`: the stale stylesheet still uploaded
   on the server defines `.mag-cta` at one-class specificity and loads later, so
   a bare class selector loses to it. Padding is split evenly so the card sits
   centred in its band instead of flush against the section above; the total
   stays the same, so the page does not get taller. */
section.mag-cta { padding: 48px 0; }
/* Wider than the 1200px the solution cards sit in, so the closing card reads
   as the page's own block rather than one more card in the stack. */
.mag-cta__inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.mag-cta__card {
  background: var(--color-dark);
  border-radius: 16px;
  padding: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
/* The card is a two-part flex row: text left, buttons right. With one button the
   text could size itself to max-content and still leave room; a second button
   pushed the pair onto its own line. Letting the text shrink keeps the original
   side-by-side shape, and the buttons never shrink. */
.mag-cta__text { flex: 1 1 340px; min-width: 0; }
.mag-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; flex: 0 0 auto; }
.mag-cta__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}
.mag-cta__body {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  margin: 0;
}
.mag-cta__body + .mag-cta__body { margin-top: 8px; }

@media (max-width: 768px) {
  section.mag-cta { padding: 32px 0; }
  .mag-cta__inner { padding: 0 24px; }
  .mag-cta__card { padding: 40px 24px; }
  /* Stacked on phones: both parts take the full width so a second button
     wraps instead of forcing the row wider than the screen. */
  .mag-cta__text,
  .mag-cta__actions { flex: 1 1 100%; }
  .mag-cta__actions .mag-btn { flex: 1 1 auto; justify-content: center; }
  .mag-cta__title { font-size: 28px; }
}

/* ── Section: Dot Texture ───────────────────────────────────── */

.section-textured {
  position: relative;
}
.section-textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(85, 58, 139, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.section-textured > * {
  position: relative;
  z-index: 1;
}

/* ── Utility: Eyebrow ───────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 12px;
}

/* ── Animations ─────────────────────────────────────────────── */
/* Prefixed with "mag" to avoid collision with fse-agency animate.css */

@keyframes magFadeUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes magFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes magScale {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes magSlideLeft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes magSlideRight {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
}
/* fade-up: translate via CSS rule (not animation fill-mode) so hover can override */
.reveal.fade-up { transform: translateY(24px); }
.reveal.fade-up.revealed { transform: translateY(0); }
.reveal.scale-in { transform: scale(0.92); }
.reveal.scale-in.revealed { transform: scale(1); }
.reveal.slide-left { transform: translateX(-32px); }
.reveal.slide-left.revealed { transform: translateX(0); }
.reveal.slide-right { transform: translateX(32px); }
.reveal.slide-right.revealed { transform: translateX(0); }
.reveal.revealed {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
.reveal.revealed.fade-up     { animation-name: magFadeUp !important; }
.reveal.revealed.fade-in     { animation-name: magFade !important; }
.reveal.revealed.scale-in    { animation-name: magScale !important; }
.reveal.revealed.slide-left  { animation-name: magSlideLeft !important; }
.reveal.revealed.slide-right { animation-name: magSlideRight !important; }

.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 200ms; }
.stagger-4 { animation-delay: 300ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.revealed { animation: none; opacity: 1; }
}

/* ── Full-width layout reset ───────────────────────────────── */

/* fse-agency adds margin-bottom to main — replace with 10px gap before footer */
.page-template-default .wp-site-blocks main {
  margin-bottom: 10px !important;
}

/* Kill fse-agency root outer padding — affects header, content, and footer */
.wp-site-blocks {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html {
  overflow-x: hidden;
}

/* Kill the 24px flow-layout block gap between top-level sections — it showed
   the white page background as a seam between every band. Sections carry their
   own vertical rhythm through padding, and paired sections rely on touching. */
.entry-content > .alignfull,
.wp-block-post-content > .alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override inline 32px padding on header/footer template containers */
header .is-layout-constrained,
footer .is-layout-constrained {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Horizontal padding — mid-size screens (below content width) */
@media (max-width: 1240px) {
  .entry-content > .alignfull,
  .wp-block-post-content > .alignfull {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* The redesign's sections carry their own inner gutters (.mag-hero-home__inner,
   .sb-inner, .mag-cta__inner), so the outer padding above double-pads them and,
   worse, insets a full-bleed background from the screen edge — the hero gradient
   stopped short of the edge on phones (user, 2026-09-07). render_blocks.py marks
   those three wrappers `mag-bleed`. Three classes beat the two above, so this
   holds inside the media queries without !important. */
.entry-content > .alignfull.mag-bleed,
.wp-block-post-content > .alignfull.mag-bleed {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 768px) {
  /* Spacing variable overrides */
  :root {
    --spacing-section-y: 56px;
    --spacing-section-y-large: 72px;
    --spacing-column-gap: 16px;
    --spacing-card-padding: 20px;
  }

  .entry-content > .alignfull,
  .wp-block-post-content > .alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  header .is-layout-constrained,
  footer .is-layout-constrained {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Typography */
  .entry-content h1,
  .wp-block-post-content h1 {
    font-size: 36px;
    letter-spacing: -0.01em;
  }
  .entry-content h2,
  .wp-block-post-content h2 {
    font-size: 28px;
  }
  .entry-content h3,
  .wp-block-post-content h3 {
    font-size: 19px;
  }
  .entry-content h4,
  .wp-block-post-content h4 {
    font-size: 16px;
  }

  /* Columns — stack vertically (content only, not header) */
  .entry-content .wp-block-columns,
  .wp-block-post-content .wp-block-columns {
    flex-direction: column !important;
  }
  .entry-content .wp-block-columns > .wp-block-column,
  .wp-block-post-content .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Media-text — stack vertically. Must also override grid-area on children:
     WP core sets grid-area:1/2 on children which forces an implicit 2nd column
     even when grid-template-columns is overridden to 1fr. */
  .wp-block-media-text,
  .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr !important;
  }
  .wp-block-media-text > .wp-block-media-text__media,
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
    grid-area: 1 / 1 !important;
  }
  .wp-block-media-text > .wp-block-media-text__content,
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
    grid-area: 2 / 1 !important;
  }

  /* Buttons — full-width, reduced padding */
  .wp-block-button__link.btn-primary,
  .wp-block-button__link.btn-cta,
  .wp-block-button__link.btn-outline {
    display: block;
    text-align: center;
    padding: 12px 24px !important;
  }

  /* Card padding override (inline styles use resolved 32px) */
  .magnalitic-card {
    padding: 20px !important;
  }
  .magnalitic-card:hover,
  .magnalitic-card.reveal.revealed:hover {
    transform: translateY(-3px) scale(1.01);
  }

  /* Steps — reduce gap */
  .wp-block-group[style*="display:flex"][style*="gap:24px"] {
    gap: 16px !important;
  }

  /* Reduced animation travel — translate still handled by CSS transition */
  .reveal.fade-up { transform: translateY(16px); }
}

@media (max-width: 480px) {
  :root {
    --spacing-section-y: 40px;
    --spacing-section-y-large: 56px;
    --spacing-card-padding: 16px;
  }

  .entry-content > .alignfull,
  .wp-block-post-content > .alignfull {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  header .is-layout-constrained,
  footer .is-layout-constrained {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .entry-content h1,
  .wp-block-post-content h1 {
    font-size: 30px;
  }
  .entry-content h2,
  .wp-block-post-content h2 {
    font-size: 24px;
  }
  .entry-content h3,
  .wp-block-post-content h3 {
    font-size: 17px;
  }

  .magnalitic-card {
    padding: 16px !important;
  }
}

/* ── Grid Layout (columns with wrapping) ───────────────────── */

.mag-grid.wp-block-columns {
  display: grid !important;
  gap: var(--spacing-column-gap);
}
.mag-grid.wp-block-columns > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
}
.mag-grid-2.wp-block-columns {
  grid-template-columns: repeat(2, 1fr) !important;
}
.mag-grid-3.wp-block-columns {
  grid-template-columns: repeat(3, 1fr) !important;
}
.mag-grid-4.wp-block-columns {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 768px) {
  .mag-grid-3.wp-block-columns,
  .mag-grid-4.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 2-col grids carry sentence-length list items — two columns below 768px is unreadable */
  .mag-grid-2.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .mag-grid-2.wp-block-columns,
  .mag-grid-3.wp-block-columns,
  .mag-grid-4.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ── WP Block Overrides ─────────────────────────────────────── */

.wp-block-columns {
  gap: var(--spacing-column-gap);
}

.wp-block-media-text {
  gap: var(--spacing-column-gap);
}

.wp-block-media-text__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(3, 1, 7, 0.08);
}

/* ── WP Global Styles Overrides ──────────────────────────────── */
/* WordPress strips custom inline styles from block markup;      */
/* use !important here to override what WP Global Styles injects */

.section-dark-gradient h2,
.section-dark-gradient .wp-block-heading {
  color: var(--color-text-on-dark) !important;
}

.section-dark-gradient > .wp-block-group > p,
.section-dark-gradient .wp-block-paragraph {
  color: var(--color-primary-light);
}

.section-dark-gradient h2 {
  font-size: var(--size-h2) !important;
  font-weight: 700 !important;
}



/* ══════════════════════════════════════════════════════════════
   Navigation — Minimalistic Overrides
   ══════════════════════════════════════════════════════════════ */

/* ── Header Layout — logo + nav always side-by-side ────────── */
/* Must beat WP core .wp-block-columns:not(.is-not-stacked-on-mobile) specificity (0,3,0) */

header .wp-block-columns,
header .wp-block-columns.are-vertically-aligned-center {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
header .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
header .wp-block-columns > .wp-block-column.wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0 !important;
}
header .wp-block-columns > .wp-block-column:first-child {
  flex-shrink: 0 !important;
}
header .wp-block-columns > .wp-block-column:last-child {
  flex-grow: 1 !important;
}

/* ── Desktop Nav ───────────────────────────────────────────── */

.wp-block-navigation a {
  transition: opacity 200ms ease, color 200ms ease !important;
}

/* Override theme's saturated purple hover — use subtle opacity instead */
/* Mobile menu rules override this with opacity: 1 !important */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
  color: inherit !important;
  opacity: 0.55;
  text-decoration: none !important;
}

/* Submenu dropdown — clean, minimal, spacious */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  padding: 8px !important;
  min-width: 220px !important;
}

/* Override fse-agency open-on-hover-click theme defaults */
.wp-block-navigation ul li.open-on-hover-click ul li a,
.wp-block-navigation ul li.open-on-hover-click ul li a:hover,
.wp-block-navigation ul li.open-on-hover-click ul li a:focus {
  border-left: none !important;
}
.wp-block-navigation ul li.open-on-hover-click ul li {
  border-bottom: none !important;
}
.wp-block-navigation ul li.open-on-hover-click ul li:hover,
.wp-block-navigation ul li.open-on-hover-click ul li:last-child {
  background-color: transparent !important;
}
/* Kill fse-agency ::before purple underline on submenu links */
.wp-block-navigation__submenu-container a::before,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  display: none !important;
}

/* Submenu items — spacious, readable, subtle hover */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #030107 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, opacity 150ms ease !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:focus,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a.wp-block-navigation-item__content:focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: #030107 !important;
}

/* Prevent LI hover highlight on submenu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
  background-color: transparent !important;
}

/* Submenu separator. `nav-menu-separator-before` marks where a different kind of
   destination begins inside the Solutions submenu. No item carries it since the
   licence pricelist moved to a top-level slot (2026-09-07); kept because the class
   is set per menu item in the nav block editor, so it can return without a deploy.
   !important because the theme styles submenu li borders. */
.wp-block-navigation__submenu-container .wp-block-navigation-item.nav-menu-separator-before {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(3, 1, 7, 0.1) !important;
}

/* ── Override fse-agency 1200px nav breakpoint — show desktop nav at 768px+ ── */

@media (min-width: 768px) {
  /* Hide hamburger */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  /* Show nav container */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    z-index: auto !important;
  }
  /* Nav items layout */
  .wp-block-navigation__container,
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
    .wp-block-navigation__container {
    gap: inherit !important;
  }
  /* Desktop link padding */
  .wp-block-navigation__container > .wp-block-navigation-item a,
  .wp-block-page-list > .wp-block-navigation-item a {
    padding: 3px 0 !important;
    margin: 0 5px !important;
  }
  /* Submenu hover-to-open (from theme's open-on-hover-click) */
  .wp-block-navigation ul li.open-on-hover-click ul {
    position: absolute !important;
    width: 0rem;
    display: inline;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s linear;
    transform: translateX(-20px);
    top: 3.3rem;
  }
  .wp-block-navigation ul li.open-on-hover-click:hover > ul,
  .wp-block-navigation ul li.open-on-hover-click:focus > ul {
    opacity: 1 !important;
    display: block !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    width: 20rem !important;
  }
}

/* ── Mobile Hamburger Menu ─────────────────────────────────── */

/* Overlay — gradient dark for depth */
.wp-block-navigation__responsive-container.is-menu-open {
  background: linear-gradient(170deg, #1C1237 0%, #241845 100%) !important;
}

/* Close button — 44px touch target */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(240, 240, 245, 0.5) !important;
  transition: color 150ms ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close:focus {
  color: #f0f0f5 !important;
}

/* Remove bordered container around menu items */
.wp-block-navigation.is-responsive .is-menu-open.has-modal-open
  .wp-block-navigation__responsive-container-content
  ul.wp-block-navigation__container {
  border: none !important;
  background: transparent !important;
}

/* ── Top-level items — bold, full contrast, generous touch ── */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > a {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #f0f0f5 !important;
  opacity: 1 !important;
  padding: 15px 20px !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  transition: background-color 150ms ease !important;
}

/* Top-level hover/focus — highlight, never dim */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container > .wp-block-navigation-item > a:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  opacity: 1 !important;
  color: #f0f0f5 !important;
}

/* Remove dashicon bullets from mobile submenu */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container a::before,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container ul li a::before {
  content: none !important;
  display: none !important;
}

/* ── Submenu container — clean spacing, no chrome ─────────── */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container {
  border: none !important;
  padding: 2px 0 8px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Submenu items — secondary text, readable, indented ───── */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(240, 240, 245, 0.65) !important;
  opacity: 1 !important;
  padding: 11px 20px 11px 36px !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

/* Submenu hover/focus — brighten + subtle bg tint */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a:focus,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #f0f0f5 !important;
  opacity: 1 !important;
}

/* Prevent LI-level hover highlights inside mobile menu */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
  background-color: transparent !important;
}

/* Override open-on-hover-click borders inside mobile menu */
.wp-block-navigation__responsive-container.is-menu-open
  ul li.open-on-hover-click ul li {
  border-bottom: none !important;
  background-color: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  ul li.open-on-hover-click ul li a,
.wp-block-navigation__responsive-container.is-menu-open
  ul li.open-on-hover-click ul li a:hover,
.wp-block-navigation__responsive-container.is-menu-open
  ul li.open-on-hover-click ul li a:focus {
  border-left: none !important;
}

/* Submenu separator, mobile. The drawer is dark, so the light-panel hairline above
   would be invisible here. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container
  .wp-block-navigation-item.nav-menu-separator-before {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(240, 240, 245, 0.16) !important;
}

/* ── Footer (light, 2026-09-06 redesign) ────────────────────── */

.mag-footer {
  background: var(--color-light-surface) !important;
  border-top: 1px solid #E4E4EA;
  color: #4A4A56;
}
.mag-footer .wp-block-site-logo img { height: 52px; width: auto; }
.mag-footer .wp-block-site-logo { margin: 0 0 16px; }
.mag-footer__blurb { font-size: 15px !important; line-height: 1.6; color: #4A4A56 !important; max-width: 320px; margin: 0 0 20px !important; }
/* The two brand marks — site logo and partner badge — follow the footer's own
   text-align, so they align with the Solutions and Contact columns at every
   width. The theme centers the whole footer at <=599px; an alignment of our
   own here would disagree with the rest of the footer between 600 and 768px.
   inline-block is what makes the badge obey that inherited text-align. */
.mag-footer__badge {
  display: inline-block;
  width: 200px;
  height: auto;
}
.mag-footer .mag-footer__h { font-size: 14px !important; font-weight: 700 !important; color: var(--color-text-primary) !important; margin: 0 0 16px !important; }
/* Every footer rule below is scoped with the parent `.mag-footer` class on
   purpose. A stale copy of this stylesheet is still uploaded on the server and
   is enqueued after the pushed Global Styles, so a bare `.mag-footer__*`
   selector (same one-class specificity, later in the cascade) loses to the old
   file and the change silently does nothing. Two classes win. Remove this
   scoping only once that server file is gone. */
.mag-footer .mag-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mag-footer .mag-footer__list a { font-size: 15px; color: #4A4A56 !important; text-decoration: none !important; transition: all 0.2s ease; }
.mag-footer .mag-footer__list a:hover { color: var(--color-primary) !important; }
.mag-footer .mag-footer__grid { gap: 48px !important; padding-bottom: 32px; }
.mag-footer .mag-footer__bottom {
  border-top: 1px solid #E4E4EA;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #4A4A56;
}
.mag-footer__bottom a { color: #4A4A56 !important; text-decoration: none !important; }
.mag-footer__bottom a:hover { color: var(--color-primary) !important; }

/* The 599px here mirrors fse-agency's own `footer { text-align: center }`
   breakpoint. The blurb's 320px measure is a block box, so centering its text
   is not enough — the box has to center too, or the copy lands left of the
   logo and badge. If the theme's breakpoint ever moves, this one follows. */
@media (max-width: 599px) {
  .mag-footer__blurb { margin-left: auto !important; margin-right: auto !important; }
}

@media (max-width: 768px) {
  .mag-footer { padding-left: 24px !important; padding-right: 24px !important; }
  .mag-footer .mag-footer__grid { gap: 32px !important; }
  /* Stacked columns read as one run-on list without a rule between them.
     WordPress emits the auto-generated layout classes on every column, so the
     selector has to carry them to win. */
  .mag-footer .mag-footer__grid > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow + .wp-block-column {
    border-top: 1px solid #E4E4EA;
    padding-top: 24px;
  }
}

/* ── Header: language switcher (replaces the Book a call button) ─ */

header .wp-block-columns > .wp-block-column.mag-nav-col { flex-grow: 1 !important; }
header .wp-block-columns > .wp-block-column.mag-nav-btn-col { flex: 0 0 auto !important; }

/* Polylang renders the switcher as a list; strip the list chrome so only the
   flag shows, right-aligned in the slot the CTA button used to occupy.
   Never write angle brackets in this file — the Global Styles REST endpoint
   rejects the whole stylesheet with rest_custom_css_illegal_markup. */
.mag-nav-btn-col .wp-block-polylang-language-switcher {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.mag-nav-btn-col .wp-block-polylang-language-switcher li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.mag-nav-btn-col .wp-block-polylang-language-switcher a {
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.mag-nav-btn-col .wp-block-polylang-language-switcher a:hover { opacity: 1; }
/* Polylang ships 16x11 flag PNGs; scale up slightly and round the corners. */
.mag-nav-btn-col .wp-block-polylang-language-switcher img {
  width: 24px !important;
  height: auto !important;
  display: block !important;
  border-radius: 2px;
}
/* Theme's open-on-hover-click underline (quirk #8) must not attach here. */
.mag-nav-btn-col .wp-block-polylang-language-switcher a::before { display: none !important; }

/* ── Pricing toggle ───────────────────────────────── */
.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.toggle-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #553A8B;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.4;
}
.toggle-btn:first-child {
  border-radius: 24px 0 0 24px;
}
.toggle-btn:last-child {
  border-radius: 0 24px 24px 0;
  border-left: none;
}
.toggle-btn.active {
  background: #553A8B;
  color: #ffffff;
}
.toggle-btn:not(.active) {
  background: transparent;
  color: #553A8B;
}
.price-compare s {
  color: #99979e;
  font-size: 13px;
}

/* ── Contact page ───────────────────────────────────────────── */

/* Doubled class: WP emits .wp-container-* > :where(...) { max-width: 1200px }
   in core-block-supports-inline-css AFTER this file — same (0,1,0) specificity,
   so a single class loses on source order and the cap never applies. */
.mag-contact-section.mag-contact-section {
  max-width: 640px;
  margin: 0 auto;
}

/* Gutenberg renders layout in the inner container, not the group div itself.
   Override with flex column so form block and html block share the same width. */
.mag-contact-section > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 0 !important;
}

.mag-contact-section > .wp-block-group__inner-container > * {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mag-contact-form {
  background: var(--color-light, #fff);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid var(--color-border, #e5e5e8);
  box-shadow: 0 4px 12px rgba(3,1,7,0.1);
}

.mag-contact-form h2 {
  color: var(--color-primary, #553A8B);
  margin-top: 0;
}

/* CF7 inputs */
.mag-contact-form input.wpcf7-form-control:not([type=submit]):not([type=checkbox]),
.mag-contact-form textarea.wpcf7-form-control {
  border: 1px solid #cccbd0;
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  color: var(--color-text-primary, #030107);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mag-contact-form input.wpcf7-form-control:not([type=submit]):not([type=checkbox]):focus,
.mag-contact-form textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-primary, #553A8B);
  box-shadow: 0 0 0 3px rgba(85,58,139,0.15);
}

/* CF7 submit button */
.mag-contact-form .wpcf7-submit {
  background: var(--color-primary, #553A8B);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: background 0.15s;
}

/* The theme styles input[type="submit"] on :hover AND :focus (background →
   near-black --wp--preset--color--foreground). Ours covered only :hover, so a
   submit still holding focus after a click turned near-black once the cursor
   left it. Both states are claimed here, at (0,4,1) to clear the theme.
   Order matters: a clicked button is focused AND hovered, and these two tie on
   specificity — :hover must come last so hover still darkens a focused button. */
.mag-contact-form .wpcf7-form input.wpcf7-submit:focus {
  background: var(--color-primary, #553A8B);
}

.mag-contact-form .wpcf7-form input.wpcf7-submit:hover {
  background: #4D347D;
}

/* Consent row — full width bordered row matching input style */
/* Radio groups use fieldset/legend (a label may wrap only one control) */
.mag-contact-form fieldset { border: 0; padding: 0; margin: 0; }
.mag-contact-form fieldset legend { padding: 0; margin: 0; }

.mag-contact-form .wpcf7-acceptance {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.mag-contact-form .wpcf7-list-item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.mag-contact-form .wpcf7-acceptance label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-secondary, #64626b);
  margin: 0;
  padding: 4px 0;
}

/* Failed validation — mark the control itself, not just the tip below it.
   Scoped to form.invalid (set by CF7 only after a failed submit): a `change` on any
   control makes CF7 re-validate every preceding field, so unscoped rules would paint
   untouched fields red the moment the consent box is ticked.
   The type selectors are load-bearing: the base input rule above is (0,4,1), so an
   unqualified .wpcf7-not-valid rule loses to it and only the textarea turns red. */
.mag-contact-form .wpcf7-form.invalid input.wpcf7-not-valid,
.mag-contact-form .wpcf7-form.invalid textarea.wpcf7-not-valid,
.mag-contact-form .wpcf7-form.invalid select.wpcf7-not-valid {
  border-color: #dc3232;
  background: #fdf5f5;
}

.mag-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #dc3232;
}

/* The submit button used to grey itself while the consent box was unchecked. The form
   now runs with `acceptance_as_validation: on`, so consent is an ordinary validated
   field and the button is always live — a grey-but-clickable button read as broken.
   The two [required]:placeholder-shown branches that sat here were dead in any case:
   CF7 marks required fields with .wpcf7-validates-as-required, not [required]. */

/* Company details card */
.mag-company-details {
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e5e8);
  overflow: hidden;
  background: var(--color-light-surface, #FAFAF9);
  width: 100%;
}

.mag-company-details__header {
  background: #EEEAF3;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #553A8B);
  letter-spacing: 0.02em;
}

.mag-company-details__body {
  padding: 24px 32px;
  font-size: 13px;
  color: var(--color-text-secondary, #64626b);
  line-height: 1.8;
}

.mag-company-details__body a {
  color: var(--color-accent, #017FE4);
  text-decoration: none;
}

.mag-company-details__body a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   Solution tabs (V4) — home solutions section
   Stacked vertical tablist + active panel, mobile row list < 720px
   ══════════════════════════════════════════════════════════════ */

.solution-tabs {
  /* V4-local tokens — kept scoped to avoid bleeding into the rest of the site */
  --st-primary: var(--color-primary, #553A8B);
  --st-deep: var(--color-primary-dark, #33215E);
  --st-tint-70: #CCC3DC;
  --st-tint-90: #EEEAF3;
  --st-wash: #F3EFF9;
  --st-shade-10: #4D347D;
  --st-light-bg: var(--color-light-surface, #FAFAF9);
  --st-border: var(--color-border, #e5e5e8);
  --st-fg-1: var(--color-text-primary, #030107);
  --st-fg-2: var(--color-text-secondary, #64626b);
  --st-fg-3: #807e85;
  --st-neutral-95: #f2f2f4;
  --st-focus: 0 0 0 3px rgba(85, 58, 139, 0.15);
}

.solution-tabs .section-inner {
  max-width: var(--spacing-max-width, 1200px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Mobile list (default state — switched off > 720px) ─────── */

.solution-tabs .st-mobile {
  display: flex;
  flex-direction: column;
}

.solution-tabs .st-m-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--st-border);
  text-align: left;
  text-decoration: none;
  color: var(--st-fg-1);
  transition: background 200ms ease;
}
.solution-tabs .st-m-row:last-of-type { border-bottom: none; }
.solution-tabs .st-m-row:hover { background: transparent; text-decoration: none; }
.solution-tabs .st-m-row:active { background: var(--st-wash); }

.solution-tabs .st-m-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--st-tint-90);
  color: var(--st-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.solution-tabs .st-m-icon svg { width: 22px; height: 22px; }

.solution-tabs .st-m-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.solution-tabs .st-m-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--st-fg-1); }
.solution-tabs .st-m-sub   { font-size: 13px; color: var(--st-fg-2); line-height: 1.4; margin-top: 2px; }

.solution-tabs .st-m-arrow {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--st-neutral-95);
  color: var(--st-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Hide desktop tabs+panel by default; show > 720px */
.solution-tabs .st-wrap { display: none; }

@media (min-width: 720px) {
  .solution-tabs .st-mobile { display: none; }
  .solution-tabs .st-wrap {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: stretch;
  }
}

/* ── Tab list (left column, desktop) ───────────────────────── */

.solution-tabs .st-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.solution-tabs .st-tab {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--st-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.solution-tabs .st-tab:hover { border-color: var(--st-tint-70); }
.solution-tabs .st-tab:focus-visible { outline: none; box-shadow: var(--st-focus); }

.solution-tabs .st-tab.active {
  background: var(--st-deep);
  color: #fff;
  border-color: var(--st-deep);
}

.solution-tabs .st-tab-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--st-tint-90);
  color: var(--st-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, color 200ms ease;
}
.solution-tabs .st-tab-icon svg { width: 20px; height: 20px; }

.solution-tabs .st-tab.active .st-tab-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.solution-tabs .st-tab-text { display: flex; flex-direction: column; min-width: 0; }
.solution-tabs .st-tab-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.solution-tabs .st-tab-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--st-fg-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solution-tabs .st-tab.active .st-tab-sub { color: rgba(255, 255, 255, 0.6); }

.solution-tabs .st-tab-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--st-fg-3);
  letter-spacing: 0.1em;
}
.solution-tabs .st-tab.active .st-tab-num { color: rgba(255, 255, 255, 0.5); }

/* ── Detail panel (right column, desktop) ──────────────────── */

.solution-tabs .st-panels { position: relative; }

.solution-tabs .st-panel {
  background: var(--st-light-bg);
  border-radius: 16px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.solution-tabs .st-panel[hidden] { display: none; }

.solution-tabs .st-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  right: 48px;
  height: 4px;
  background: var(--st-primary);
  border-radius: 0 0 4px 4px;
}

.solution-tabs .st-panel-l {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.solution-tabs .st-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--st-primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.solution-tabs .st-panel-headline {
  font-family: var(--font-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--st-fg-1);
  margin: 0;
}

.solution-tabs .st-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--st-fg-2);
  margin: 0;
}

.solution-tabs .st-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

.solution-tabs .st-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
  line-height: 1;
}
.solution-tabs .st-btn:focus-visible { outline: none; box-shadow: var(--st-focus); }

.solution-tabs .st-btn-primary {
  background: var(--st-primary);
  color: #fff;
  border: 2px solid var(--st-primary);
}
.solution-tabs .st-btn-primary:hover {
  background: var(--st-shade-10);
  border-color: var(--st-shade-10);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(3, 1, 7, 0.10);
}

.solution-tabs .st-btn-ghost {
  background: transparent;
  color: var(--st-primary);
  border: 2px solid var(--st-primary);
  padding: 10px 20px;
}
.solution-tabs .st-btn-ghost:hover {
  background: var(--st-tint-90);
  text-decoration: none;
}

/* ── Right column: stat (optional) + product chips ─────────── */

.solution-tabs .st-panel-r {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--st-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.solution-tabs .st-stat-cell {
  background: var(--st-wash);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.solution-tabs .st-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--st-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.solution-tabs .st-stat-lbl {
  font-size: 11px;
  color: var(--st-fg-2);
  line-height: 1.3;
}
.solution-tabs .st-stat-source {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--st-fg-3);
  margin-top: 2px;
}

.solution-tabs .st-products-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--st-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 8px 0 0;
}

.solution-tabs .st-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.solution-tabs .st-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--st-fg-1);
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--st-neutral-95);
}

.solution-tabs .st-product-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--st-primary);
  flex-shrink: 0;
  display: inline-block;
}

/* ── Below 960px (still desktop tabs but tighter) ──────────── */

@media (min-width: 720px) and (max-width: 960px) {
  .solution-tabs .st-wrap { grid-template-columns: 280px 1fr; gap: 16px; }
  .solution-tabs .st-panel { padding: 32px; grid-template-columns: 1fr; }
  .solution-tabs .st-panel::before { left: 32px; right: 32px; }
  .solution-tabs .st-panel-headline { font-size: 28px; }
}

@media (max-width: 720px) {
  .solution-tabs .st-panel-headline { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════
   Solution rows (2026-09-06 redesign) — section header,
   50/50 rows with text left and checklist card right.
   ══════════════════════════════════════════════════════════════ */

/* First band under a hero — matches the home page's band: white, and the same
   64px top padding on phones. The inline style carries 96px for desktop, which
   already matches, so only the phone step needs overriding. */
@media (max-width: 768px) {
  .mag-hero-home + section,
  .section-after-hero { padding-top: 64px !important; }
}

.solution-bands {
  --sb-primary: var(--color-primary, #553A8B);
  --sb-border: #E4E4EA;
  --sb-fg-1: var(--color-text-primary, #030107);
  --sb-fg-2: #4A4A56;
  --sb-surface: var(--color-light-surface, #FAFAF9);
  --sb-shadow-md: 0 8px 24px rgba(3, 1, 7, 0.08);
  background: #fff;
  padding: 96px 0;
}
.solution-bands .sb-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.solution-bands .sb-head { max-width: 720px; margin: 0 0 24px; }
.solution-bands .sb-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-primary);
  margin: 0 0 12px;
}
.solution-bands .sb-h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--sb-fg-1);
  margin: 0 0 16px;
}
.solution-bands .sb-lede { font-size: 18px; line-height: 1.5; color: var(--sb-fg-2); margin: 0; }

.solution-bands .sb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--sb-border);
}
.solution-bands .sb-headline {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--sb-fg-1);
  margin: 0 0 16px;
}
.solution-bands .sb-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--sb-fg-2);
  max-width: 520px;
  margin: 0 0 20px;
}
.solution-bands .sb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-primary) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.solution-bands .sb-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.solution-bands .sb-link:hover svg { transform: translateX(3px); }

.solution-bands .sb-slab {
  background: var(--sb-surface);
  border-radius: 12px;
  border-top: 4px solid var(--sb-primary);
  box-shadow: var(--sb-shadow-md);
  padding: 32px;
}
.solution-bands .sb-sum {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sb-fg-1);
  margin: 0 0 20px;
}
.solution-bands .sb-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.solution-bands .sb-caps--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.solution-bands .sb-caps li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--sb-fg-1); }
.solution-bands .sb-caps li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sb-primary); }

@media (max-width: 1024px) {
  .solution-bands .sb-row { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .solution-bands { padding: 64px 0; }
  .solution-bands .sb-inner { padding: 0 24px; }
  .solution-bands .sb-row { padding: 40px 0; }
  .solution-bands .sb-headline { font-size: 28px; }
  .solution-bands .sb-caps--two-col { grid-template-columns: 1fr; }
}

/* ============================================================
   Pricelist section (.mag-pricelist) — SKU-driven grouped price
   tables with category tabs. Markup: build/pricelist_html.py
   ============================================================ */
.mag-pricelist { --pl-primary: #553A8B; --pl-text: #030107; --pl-sec: #64626b; --pl-muted: #99979e; --pl-border: #e5e5e8; }
.mag-pricelist-band { background: #FAFAF9; border-top: 1px solid #e5e5e8; border-bottom: 1px solid #e5e5e8; padding: 40px 0 32px; }
.mag-pricelist-band .pl-h1 { font-family: var(--font-heading); font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #030107; margin: 0 0 12px; }
.mag-pricelist-band .pl-spec { font-size: 15px; color: #64626b; margin: 0; }
.mag-hero-band { background: linear-gradient(135deg, #1C1237 0%, #33215E 55%, #553A8B 100%); padding: 40px 0 32px; }
.mag-hero-band .band-h1 { font-family: var(--font-heading); font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #f0f0f5; margin: 0 0 12px; }
.mag-hero-band .band-spec { font-size: 15px; color: #C4B3E0; margin: 0; }
.mag-pricelist .pl-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--pl-border); position: sticky; top: 0; background: #fff; z-index: 5; }
.mag-pricelist .pl-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 14px 20px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--pl-sec); cursor: pointer; white-space: nowrap; }
.mag-pricelist .pl-tabs button[aria-selected="true"] { color: var(--pl-primary); border-bottom-color: var(--pl-primary); }
.mag-pricelist .pl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 0; }
.mag-pricelist .pl-chips a { border: 1px solid var(--pl-border); border-radius: 99px; padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--pl-sec); text-decoration: none; }
.mag-pricelist .pl-chips a:hover { border-color: var(--pl-primary); color: var(--pl-primary); }
.mag-pricelist .pl-panel[hidden] { display: none; }
.mag-pricelist .pl-ghead { font-size: 20px; font-weight: 700; margin: 40px 0 0; scroll-margin-top: 72px; color: var(--pl-text); }
.mag-pricelist .pl-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 12px 0 0; }
.mag-pricelist .pl-c-name { width: 24%; }
.mag-pricelist .pl-c-desc { width: 36%; }
.mag-pricelist .pl-c-annual { width: 20%; }
.mag-pricelist .pl-c-monthly { width: 20%; }
.mag-pricelist th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pl-muted); border-bottom: 2px solid var(--pl-border); padding: 10px 12px; font-weight: 600; vertical-align: bottom; }
.mag-pricelist th.pl-pr, .mag-pricelist td.pl-pr { text-align: right; white-space: nowrap; }
.mag-pricelist td { border-bottom: 1px solid #f0eff3; padding: 12px; vertical-align: top; }
.mag-pricelist td.pl-nm { font-weight: 600; color: var(--pl-text); }
.mag-pricelist td.pl-desc { color: var(--pl-sec); font-size: 14px; }
.mag-pricelist td.pl-pr { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pl-text); }
.mag-pricelist td.pl-pr .pl-was { display: block; font-weight: 400; font-size: 12px; color: var(--pl-muted); text-decoration: line-through; }
.mag-pricelist td.pl-pr .pl-permo { display: block; font-weight: 400; font-size: 12px; color: var(--pl-sec); margin-top: 2px; }
.mag-pricelist td.pl-pr .pl-na { font-weight: 400; color: var(--pl-muted); font-size: 13px; }
@media (max-width: 820px) {
  .mag-pricelist-band .pl-h1 { font-size: 34px; }
  .mag-pricelist-band { padding: 28px 0 24px; }
  .mag-hero-band { padding: 28px 0 24px; }
  .mag-hero-band .band-h1 { font-size: 34px; }
  .mag-pricelist .pl-table { table-layout: auto; }
  .mag-pricelist .pl-c-name, .mag-pricelist .pl-c-desc, .mag-pricelist .pl-c-annual, .mag-pricelist .pl-c-monthly { width: auto; }
  .mag-pricelist td.pl-desc, .mag-pricelist th:nth-child(2) { display: none; }
  .mag-pricelist th { font-size: 10px; padding: 10px 6px; }
  .mag-pricelist td { padding: 12px 6px; }
  .mag-pricelist td.pl-pr { font-size: 15px; }
  .mag-pricelist td.pl-pr .pl-was, .mag-pricelist td.pl-pr .pl-permo { font-size: 11px; }
}

/* Licence picker — stacks selections into the CF7 `licences` textarea
   (markup: build/pricelist_html.py build_licence_picker) */
.mag-licence-picker { display: flex; gap: 8px; margin: 20px 0 4px; }
.mag-licence-picker select { flex: 1 1 auto; min-width: 0; border: 1px solid #cccbd0; border-radius: 8px; padding: 10px 14px; font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 14px; line-height: 1.4; color: #030107; background: #fff; }
/* [type="number"]: theme styles input[type="number"] at 18px/heading line-height with
   the same (0,1,1) specificity and wins on source order — the attribute breaks the tie */
.mag-licence-picker input[type="number"] { width: 84px; border: 1px solid #cccbd0; border-radius: 8px; padding: 10px 12px; font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 14px; line-height: 1.4; color: #030107; background: #fff; box-sizing: border-box; }
.mag-licence-picker button { border: 0; border-radius: 8px; background: #553A8B; color: #fff; font-family: var(--font-heading, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 14px; font-weight: 600; padding: 10px 22px; cursor: pointer; }
.mag-licence-picker button:hover { background: #33215E; }
.mag-licence-picker select:focus, .mag-licence-picker input:focus { outline: none; border-color: #553A8B; box-shadow: 0 0 0 3px rgba(85,58,139,0.15); }
@media (max-width: 600px) {
  .mag-licence-picker { flex-wrap: wrap; }
  .mag-licence-picker select { flex-basis: 100%; }
}

/* Start-date calendar (build/date_picker.py). The field stays a typable YYYY-MM-DD text
   input; this is the optional calendar on top of it. */
.mag-datefield { position: relative; display: block; }
.mag-datefield input { padding-right: 42px !important; }

.mag-dp-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #64626b);
  cursor: pointer;
}

.mag-dp-toggle:hover { background: #f2f0f7; color: var(--color-primary, #553A8B); }

/* Panel sits above the form card; the card sets no overflow, so absolute is safe */
.mag-dp {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border, #e5e5e8);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(3,1,7,0.16);
}

.mag-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mag-dp-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #030107);
}

.mag-dp-nav {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--color-primary, #553A8B);
  cursor: pointer;
}

.mag-dp-nav:hover:not(:disabled) { background: #f2f0f7; }
.mag-dp-nav:disabled { color: #a5a3ac; cursor: default; }

/* role="grid" needs real rows, so each week is its own 7-column track */
.mag-dp-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mag-dp-grid { display: flex; flex-direction: column; gap: 2px; }

.mag-dp-dow span {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #64626b);
}

.mag-dp-day {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  color: var(--color-text-primary, #030107);
  cursor: pointer;
}

.mag-dp-day:hover:not(:disabled) { background: #f2f0f7; }
.mag-dp-day[aria-current="date"] {
  background: #f2f0f7;
  box-shadow: inset 0 0 0 1px var(--color-primary, #553A8B);
}

.mag-dp-day.is-selected { background: var(--color-primary, #553A8B); color: #fff; }

/* Past dates cannot be a start date. #cccbd0 measured 1.6:1 — too faint to read even
   for a disabled control, so this sits a step darker. */
.mag-dp-day.is-past { color: #a5a3ac; cursor: default; }

.mag-dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border, #e5e5e8);
}

.mag-dp-link {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #553A8B);
  cursor: pointer;
}

.mag-dp-link:hover { background: #f2f0f7; }

/* Keyboard focus — visible outline on every form control (WCAG 2.4.7).
   Mouse focus keeps the soft box-shadow ring from the :focus rules above;
   selectors mirror those rules' specificity so outline wins on source order. */
.mag-contact-form input.wpcf7-form-control:not([type=submit]):not([type=checkbox]):focus-visible,
.mag-contact-form textarea.wpcf7-form-control:focus-visible,
.mag-contact-form select:focus-visible,
.mag-contact-form input[type="checkbox"]:focus-visible,
.mag-contact-form .wpcf7-submit:focus-visible,
.mag-licence-picker select:focus-visible,
.mag-licence-picker button:focus-visible,
.mag-dp-toggle:focus-visible,
.mag-dp-nav:focus-visible,
.mag-dp-day:focus-visible,
.mag-dp-link:focus-visible {
  outline: 2px solid var(--color-primary, #553A8B);
  outline-offset: 2px;
}

/* The fse-agency theme blanket-resets outline at (0,4,1) —
   .wpcf7 input:not([type="submit"]):not([type="checkbox"]):focus-visible { outline: none }
   — and its stylesheet loads after this block, so it reaches exactly these two
   controls (number input, radios). !important is the only stable override. */
.mag-licence-picker input[type="number"]:focus-visible,
.mag-contact-form input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary, #553A8B) !important;
  outline-offset: 2px !important;
}

/* Radios and checkboxes render browser-default blue without this */
.mag-contact-form input[type="radio"],
.mag-contact-form input[type="checkbox"] {
  accent-color: var(--color-primary, #553A8B);
  width: 18px;
  height: 18px;
}

/* Touch targets — radio/checkbox rows reach 44px (native glyphs alone are 13px) */
.mag-contact-form .wpcf7-radio .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

.mag-contact-form .wpcf7-acceptance label {
  min-height: 44px;
}

/* iOS Safari zooms the page on focus when the control font is under 16px */
@media (max-width: 600px) {
  .mag-contact-form input.wpcf7-form-control:not([type=submit]):not([type=checkbox]),
  .mag-contact-form textarea.wpcf7-form-control,
  .mag-licence-picker select,
  .mag-licence-picker input[type="number"] {
    font-size: 16px;
  }
}