/* ==========================================================================
   Etaprise design system
   Built on the real brand kit in assets/images/brand/ — blue #074BE6,
   red-orange #FD2E15, orange #FE600B, ink #151515 — and Manrope, which
   already ships locally in assets/fonts/.

   This file replaces the purchased Elementor theme's ~392KB of inlined
   vendor CSS. Nothing here uses !important; if a rule needs one, the
   system is wrong.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — local, no network dependency
   -------------------------------------------------------------------------- */
@font-face { font-family: Manrope; src: url("../fonts/Manrope-Regular.woff2") format("woff2"), url("../fonts/Manrope-Regular.ttf") format("truetype");  font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/Manrope-Medium.woff2") format("woff2"), url("../fonts/Manrope-Medium.ttf") format("truetype");   font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"), url("../fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/Manrope-Bold.woff2") format("woff2"), url("../fonts/Manrope-Bold.ttf") format("truetype");     font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/Manrope-ExtraBold.woff2") format("woff2"), url("../fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --blue:        #074BE6;
  --blue-deep:   #0538AE;
  --blue-light:  #7FA6FF;
  --blue-tint:   #E8EEFF;
  --blue-edge:   #C2D2FF;
  --red:         #FD2E15;
  --red-tint:    #FFECE9;
  --red-edge:    #FFC4BB;
  --red-deep:    #A81A08;
  --red-text:    #C41E06;
  --orange:      #FE600B;
  --orange-tint: #FFF3E4;
  --orange-edge: #FFD5A6;
  --orange-deep: #8A4403;

  /* ink surfaces */
  --ink-900: #050505;
  --ink-800: #0B0B0B;
  --ink-700: #131313;
  --ink-600: #161616;
  --ink-500: #1B1B1A;
  --ink-line:#232322;
  --ink-edge:#2A2A28;

  /* paper surfaces */
  --paper:      #FAFAF9;
  --paper-card: #FFFFFF;
  --paper-sunk: #F4F4F0;
  --paper-line: #E2E2DC;
  --paper-hair: #EFEFEA;
  --paper-ghost:#E0E0D8;

  /* text */
  --on-ink:       #FFFFFF;
  --on-ink-2:     #B4B4AE;
  --on-ink-3:     #9A9A92;
  --on-paper:     #151515;
  --on-paper-2:   #4A4A48;
  --on-paper-3:   #66665F;

  /* spacing — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* radius */
  --r-control: 8px;
  --r-card:    12px;
  --r-panel:   14px;
  --r-pill:    999px;

  /* layout */
  --gutter: 56px;
  --maxw:   1280px;

  /* motion */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   150ms;
  --t-mid:    420ms;
  --t-slow:   720ms;
  --header-bg: rgba(11, 11, 11, 0.92);
  --logo-on-dark: block;
  --logo-on-light: none;

  --header-h: 72px;

  /* Brand theme accents: orange in dark theme as it is */
  --accent-headline: #FE600B;
  --accent-rule:     #FE600B;
  --accent-band:     #FE600B;
  --on-accent-band:  #100201;
  --how-rule-color:  rgba(21, 4, 3, 0.32);

  /* Brand-red feature band. #FD2E15 sits at luminance 0.23 - the awkward
     middle, where the best any text can reach is 5.6:1 (black) or 3.8:1
     (white). Small type on it reads badly whichever way you go, so the band
     itself goes deeper and carries light text at 7.5:1. Remapped to brand
     blue under [data-theme="light"] for visual consistency. */
  --band-red-bg:    #A81A08;
  --band-red-text:  #FFFFFF;
  --band-red-quiet: #FFE9E4;
  --band-red-line:  rgba(255, 255, 255, 0.30);

  --pricing-highlight-bg: linear-gradient(90deg, rgba(254, 96, 11, 0.12), transparent 60%);
  --table-highlight-bg: rgba(254, 96, 11, 0.10);
  --accent-blue-text: var(--blue-light);
  --accent-text:     #FE600B;
  --accent-blue:        var(--blue);
  --badge-green-bg:     rgba(34, 197, 94, 0.14);
  --badge-green-text:   #4ade80;
  --badge-green-border: rgba(74, 222, 128, 0.28);
  --blog-card-bg:       var(--ink-700);
  --blog-card-line:     var(--ink-line);


  --text-bright:   var(--on-ink);
  --text-faint:    #9A9A92;
  --text-muted-lg: #B4B4AE;
  --text-quiet:    var(--on-ink-3);
  --ghost:         var(--ink-edge);

  --rule-strong:    #3A3A38;
  --rule-glow:      var(--red);
  --rule-glow-halo: rgba(253, 46, 21, 0.20);
  --rule-glow-blur: 8px;

  --btn-ghost-line:       #2A2A28;
  --btn-ghost-line-hover: var(--on-ink);
  --btn-ghost-bg-hover:   var(--ink-700);

  --chip-bg:   var(--ink-700);
  --chip-line: var(--ink-edge);
  --chip-text: #C4C4BC;

  --menu-hover-bg: var(--ink-600);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* the ink scale becomes the paper scale */
  --ink-900:  var(--paper-sunk);
  --ink-800:  var(--paper);
  --ink-700:  var(--paper-card);
  --ink-600:  var(--paper-card);
  --ink-500:  var(--paper-sunk);
  --ink-line: var(--paper-line);
  --ink-edge: var(--paper-ghost);

  --on-ink:   var(--on-paper);
  --on-ink-2: var(--on-paper-2);
  --on-ink-3: var(--on-paper-3);

  --header-bg: rgba(250, 250, 249, 0.92);
  --bar-bg:    rgba(250, 250, 249, 0.96);
  --grid-line-ground: rgba(0, 0, 0, 0.05);

  /* Brand theme accents: Tech Blue from brand identity in white theme */
  --accent-headline: #074CE7;
  --accent-rule:     #074CE7;
  --accent-band:     #074CE7;
  --on-accent-band:  #FFFFFF;
  --how-rule-color:  rgba(255, 255, 255, 0.28);
  --pricing-highlight-bg: linear-gradient(90deg, rgba(7, 76, 231, 0.08), transparent 60%);
  --table-highlight-bg: rgba(7, 76, 231, 0.06);
  --accent-blue-text: #074CE7;
  --accent-text:     #074CE7;
  --accent-warm:     #074CE7;

  --text-quiet: var(--on-paper-3);
  --ghost:      var(--paper-ghost);

  --rule-strong: #B9B9B2;
  --rule-glow:      var(--blue);
  --rule-glow-halo: rgba(7, 75, 230, 0.20);
  --rule-glow-blur: 8px;

  --btn-ghost-line:       #C9C9C4;
  --btn-ghost-line-hover: var(--on-paper);
  --btn-ghost-bg-hover:   var(--paper-card);

  --link-hover:      var(--blue-deep);
  --card-line-hover: var(--blue-edge);
  --card-shadow:     rgba(0, 0, 0, 0.14);

  --menu-hover-bg: var(--paper-hair);

  --chip-bg:   var(--paper-sunk);
  --chip-line: var(--paper-line);
  --chip-text: var(--on-paper-2);
  --chip-blue-bg:   var(--blue-tint);   --chip-blue-line:   var(--blue-edge);   --chip-blue-text:   var(--blue-deep);
  --chip-orange-bg: var(--blue-tint);   --chip-orange-line: var(--blue-edge);   --chip-orange-text: var(--blue-deep);
  --chip-red-bg:    var(--red-tint);    --chip-red-line:    var(--red-edge);    --chip-red-text:    var(--red-deep);

  --field-bg:      var(--paper-card);
  --field-line:    #C9C9C4;
  --field-text:    var(--on-paper);
  --field-invalid: var(--red-text);
  --notice-bg:     var(--paper-card);
  --notice-line:   var(--paper-line);
  --notice-text:   var(--on-paper);

  --text-bright: var(--on-paper);
  --text-faint:  #6E6E67;
  --text-muted-lg: #6E6E67;
  --accent-blue-text: var(--blue-deep);
  --accent-blue:        var(--blue);
  --badge-green-bg:     rgba(22, 163, 74, 0.12);
  --badge-green-text:   #15803d;
  --badge-green-border: rgba(22, 163, 74, 0.28);
  --blog-card-bg:       var(--paper-card);
  --blog-card-line:     var(--paper-line);


  --focus-ring: var(--blue);

  /* Feature-band surfaces: remap brand-red → brand-blue in light mode */
  --band-red-bg:    #0538AE;
  --band-red-text:  #FFFFFF;
  --band-red-quiet: #C2D2FF;
  --band-red-line:  rgba(255, 255, 255, 0.30);

  --logo-on-dark: none;
  --logo-on-light: block;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   4. Focus — visible on both grounds, never removed
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-ink :focus-visible { outline-color: var(--blue-light); }

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 999;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: var(--r-control);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-headline, #FE600B);
}
.on-ink .eyebrow { color: var(--accent-headline, #FE600B); }

.eyebrow-rule { display: flex; align-items: center; gap: var(--s3); }
.eyebrow-rule::before {
  content: ""; width: 26px; height: 1px; background: currentColor;
  flex-shrink: 0; opacity: 0.9;
}

.display {
  font-size: clamp(40px, 6vw, 78px);
  line-height: 0.99;
  font-weight: 800;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.012em; }
.h4 { font-size: 17px; line-height: 1.3;  font-weight: 700; }

.lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--on-paper-2); text-wrap: pretty; }
.on-ink .lede { color: var(--on-ink-2); }

.body  { font-size: 15px; line-height: 1.65; color: var(--on-paper-2); text-wrap: pretty; }
.on-ink .body { color: var(--on-ink-2); }
.small { font-size: 13.5px; line-height: 1.55; color: var(--on-paper-3); }
.on-ink .small { color: var(--on-ink-2); }

.ghost-num {
  font-size: clamp(56px, 7vw, 92px);
  font-weight: 800; line-height: 0.8; letter-spacing: -0.04em;
  color: var(--paper-ghost);
}
.on-ink .ghost-num { color: #1E1E1D; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s9); }
.section-tight { padding-block: var(--s8); }

.on-ink { background: var(--ink-800); color: var(--on-ink); }
.on-blue { background: var(--blue); color: #fff; }
.on-blue .lede, .on-blue .body { color: #D3E0FF; }
.on-blue .eyebrow { color: #D8E4FF; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grid    { display: grid; }
.g2 { gap: var(--s2); } .g3 { gap: var(--s3); } .g4 { gap: var(--s4); }
.g5 { gap: var(--s5); } .g6 { gap: var(--s6); } .g7 { gap: var(--s7); } .g8 { gap: var(--s8); }

.rule { height: 1px; background: var(--paper-line); border: 0; }
.on-ink .rule { background: var(--ink-line); }

/* --------------------------------------------------------------------------
   6b. Section backgrounds

   Drawn from the product's own geometry — a dispatch board is columns of time
   crossed by rows of technicians — rather than stock gradient blobs. Pure CSS,
   so it costs no requests and scales to any viewport. Every layer sits on a
   pseudo-element behind the content, is pointer-transparent, and is invisible
   to assistive tech.
   -------------------------------------------------------------------------- */
.bg-grid, .bg-rule, .bg-glow { position: relative; isolation: isolate; }

.bg-grid::before,
.bg-rule::before,
.bg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* the full board: time columns crossed by technician rows */
.bg-grid::before {
  background-image:
    repeating-linear-gradient(to right,  var(--grid-line, rgba(21,21,21,0.05)) 0 1px, transparent 1px var(--grid-col, 132px)),
    repeating-linear-gradient(to bottom, var(--grid-line, rgba(21,21,21,0.05)) 0 1px, transparent 1px var(--grid-row, 58px));
  -webkit-mask-image: var(--grid-mask, radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%));
          mask-image: var(--grid-mask, radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%));
}

/* the day ruler: horizontal rows only, for the timeline sections */
.bg-rule::before {
  background-image:
    repeating-linear-gradient(to bottom, var(--grid-line, rgba(255,255,255,0.05)) 0 1px, transparent 1px var(--grid-row, 72px));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}

/* a single soft field of brand colour, seating whatever sits on top of it */
.bg-glow::after {
  background: var(--glow, radial-gradient(58% 52% at 78% 12%, rgba(7,75,230,0.20) 0%, transparent 70%));
}

/* per-ground line weights */
.on-ink.bg-grid,  .on-ink.bg-rule  { --grid-line: rgba(255,255,255,0.045); }
.on-blue.bg-grid, .on-blue.bg-rule { --grid-line: rgba(255,255,255,0.10); }

@media (max-width: 900px) {
  .bg-grid { --grid-col: 84px; --grid-row: 48px; }
  .bg-rule { --grid-row: 56px; }
}

/* --------------------------------------------------------------------------
   7. Buttons — one primary per decision point
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 15px 28px;
  font-size: 15px; font-weight: 700; line-height: 1;
  border-radius: var(--r-control); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 26px rgba(7, 75, 230, 0.34); }
.btn-primary:hover { background: var(--blue-deep); box-shadow: 0 10px 32px rgba(7, 75, 230, 0.44); }

.btn-secondary { background: transparent; color: var(--on-paper); border-color: #C9C9C4; }
.btn-secondary:hover { border-color: var(--on-paper); background: var(--paper-card); }
.on-ink .btn-secondary { color: #fff; border-color: #3A3A38; }
.on-ink .btn-secondary:hover { border-color: #6A6A66; background: var(--ink-500); }

.btn-invert { background: #fff; color: var(--blue); }
.btn-invert:hover { background: var(--blue-tint); color: var(--blue-deep); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-lg { min-height: 56px; padding: 19px 36px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; align-items: center; gap: var(--s3); }

/* tertiary: an in-flow text link with a nudging arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--blue);
  text-decoration: none; min-height: 44px;
  transition: color var(--t-fast) var(--ease);
}
.on-ink .link-arrow { color: var(--blue-light); }
.link-arrow svg { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--blue-deep); }
.on-ink .link-arrow:hover { color: #A8C2FF; }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. Cards — only where they carry grouping, comparison or a link target
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s5) var(--s6);
}
.on-ink .card { background: var(--ink-600); border-color: var(--ink-edge); }

/* a card that is itself a link target gets 3D lift */
.card-link {
  display: block; text-decoration: none; color: inherit;
  transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-fast) var(--ease);
}
.card-link:hover {
  transform: translate3d(0, -6px, 24px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.14);
  border-color: var(--blue-edge);
}
.on-ink .card-link:hover { box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5); border-color: #3A5AA8; }

.icon-chip {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: var(--blue-tint); border: 1px solid var(--blue-edge);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  transition: transform var(--t-mid) var(--ease-out);
}
.card-link:hover .icon-chip { transform: translateZ(20px) scale(1.06); }

.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--paper-line);
  background: var(--paper-sunk); color: var(--on-paper-2);
}
.tag-blue   { background: var(--blue-tint);   border-color: var(--blue-edge);   color: var(--blue-deep); }
.tag-orange { background: var(--orange-tint); border-color: var(--orange-edge); color: var(--orange-deep); }
.tag-red    { background: var(--red-tint);    border-color: var(--red-edge);    color: var(--red-deep); }

/* dark-ground counterparts — the tints above are unreadable on ink */
.on-ink .tag        { background: var(--ink-500); border-color: var(--ink-edge); color: #C4C4BC; }
.on-ink .tag-blue   { background: #101E3C; border-color: #2B4A94; color: #A9C4FF; }
.on-ink .tag-orange { background: #2E1B06; border-color: #7A4A12; color: #FFC98A; }
.on-ink .tag-red    { background: #2E0F0A; border-color: #8A2417; color: #FFB3A6; }

.on-ink .icon-chip  { background: #101E3C; border-color: #2B4A94; color: #A9C4FF; }

/* Light mode overrides: ensure pills/tags/chips never carry dark-theme colors,
   and orange tags/chips adapt to blue as specified */
:root[data-theme="light"] .tag,
:root[data-theme="light"] .on-ink .tag {
  background: var(--paper-sunk);
  border-color: var(--paper-line);
  color: var(--on-paper-2);
}

:root[data-theme="light"] .tag-blue,
:root[data-theme="light"] .on-ink .tag-blue {
  background: var(--blue-tint);
  border-color: var(--blue-edge);
  color: var(--blue-deep);
}

/* User requirement: orange shades in light mode change to blue */
:root[data-theme="light"] .tag-orange,
:root[data-theme="light"] .on-ink .tag-orange {
  background: var(--blue-tint);
  border-color: var(--blue-edge);
  color: var(--blue-deep);
}

:root[data-theme="light"] .tag-red,
:root[data-theme="light"] .on-ink .tag-red {
  background: var(--red-tint);
  border-color: var(--red-edge);
  color: var(--red-deep);
}

:root[data-theme="light"] .icon-chip,
:root[data-theme="light"] .on-ink .icon-chip {
  background: var(--blue-tint);
  border-color: var(--blue-edge);
  color: var(--blue);
}

:root[data-theme="light"] .link-arrow,
:root[data-theme="light"] .on-ink .link-arrow {
  color: var(--blue);
}
:root[data-theme="light"] .link-arrow:hover,
:root[data-theme="light"] .on-ink .link-arrow:hover {
  color: var(--blue-deep);
}

/* a stage band: a dark panel one step lighter than the page, used to group
   a set of peer capabilities without turning every section into a card */
.band {
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.band-head {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-500);
}

/* capability row inside a band — a full-width link target, not a card */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 20px;
  gap: var(--s5);
  align-items: center;
  padding: var(--s5) var(--s6);
  border-top: 1px solid var(--ink-line);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease), padding-left var(--t-mid) var(--ease-out);
}
.cap:first-of-type { border-top: 0; }
.cap:hover { background: var(--ink-600); padding-left: calc(var(--s6) + 6px); }
.cap:hover .cap-go { transform: translateX(4px); color: var(--blue-light); }
.cap-go { color: var(--on-ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }

@media (max-width: 900px) {
  .cap { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5) var(--s5); }
  .cap:hover { padding-left: var(--s5); }
  .cap .cap-meta, .cap .cap-go { display: none; }
  .band-head { padding: var(--s5); }
}

/* --------------------------------------------------------------------------
   7. Buttons — one primary per decision point
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 14px 28px;
  font-size: 15px; font-weight: 700; line-height: 1;
  border-radius: var(--r-control); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  box-sizing: border-box;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--blue);
  color: #FFFFFF !important;
  box-shadow: 0 8px 26px rgba(7, 76, 231, 0.34);
}
.btn-primary:hover {
  background: var(--blue-deep);
  color: #FFFFFF !important;
  box-shadow: 0 10px 32px rgba(7, 76, 231, 0.44);
}

.btn-secondary {
  background: transparent;
  color: var(--on-ink) !important;
  border: 1px solid var(--btn-ghost-line, var(--ink-edge));
}
.btn-secondary:hover {
  border-color: var(--btn-ghost-line-hover, var(--on-ink));
  background: var(--btn-ghost-bg-hover, var(--ink-600));
  color: var(--on-ink) !important;
}

.on-ink .btn-secondary {
  color: var(--on-ink) !important;
  border-color: var(--btn-ghost-line, var(--ink-edge));
}
.on-ink .btn-secondary:hover {
  border-color: var(--btn-ghost-line-hover, var(--on-ink));
  background: var(--btn-ghost-bg-hover, var(--ink-600));
  color: var(--on-ink) !important;
}

.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 14px; }
.btn-lg { min-height: 56px; padding: 19px 36px; font-size: 16px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   9. Forms — every control has a real label
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; }
.field > label,
legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--on-ink) !important;
  padding-bottom: 7px;
}
.req { color: var(--accent-headline); }

.input, .select, .textarea {
  width: 100%; min-height: 48px;
  background: var(--ink-700) !important;
  border: 1px solid var(--ink-line) !important;
  border-radius: var(--r-control);
  padding: 13px 15px; font-size: 15px;
  color: var(--on-ink) !important;
  box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--on-ink-3) !important; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(7, 76, 231, 0.25) !important;
  outline: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--accent-headline) !important;
}
.field-hint  { font-size: 12px; line-height: 1.45; color: var(--on-ink-3); padding-top: 6px; }
.field-error { font-size: 12px; line-height: 1.45; color: var(--accent-headline); font-weight: 600; padding-top: 6px; }
.field-error:empty { display: none; }

.form-notice {
  margin-top: var(--s3); padding: 14px 16px;
  border-radius: var(--r-control);
  border: 1px solid var(--accent-rule);
  background: var(--pricing-highlight-bg);
  color: var(--on-ink);
  font-size: 14px; line-height: 1.55;
}
.form-notice a { color: var(--accent-blue-text); }

/* checkbox chips sitting on ink */
/* the label is the 44px hit area; size the box so it is legible inside it */
.tag input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.on-ink .tag input[type="checkbox"] { accent-color: var(--blue); }

/* --------------------------------------------------------------------------
   10. Header / nav
   -------------------------------------------------------------------------- */
.site-header.is-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9999 !important;
}
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  color: var(--on-ink);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: 128px; }

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--on-ink-2);
  text-decoration: none; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--on-ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--on-ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--s4); }
.nav-actions .signin {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--on-ink); text-decoration: none;
}
.nav-toggle { display: none; }

/* theme toggle & logo switching */
.logo-dark  { display: var(--logo-on-dark, block) !important; }
.logo-light { display: var(--logo-on-light, none) !important; }

:root[data-theme="light"] img.footer-logo {
  content: url("../images/brand/etaprise-logo-light-bg.webp");
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  /* flex: none, or the header row shrinks this below its declared width —
     it measured 26px wide at tablet, under the 44px minimum touch target. */
  flex: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid var(--btn-ghost-line, rgba(255, 255, 255, 0.15));
  border-radius: var(--r-control, 8px);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.theme-toggle:hover {
  border-color: var(--btn-ghost-line-hover, rgba(255, 255, 255, 0.35));
  background: var(--btn-ghost-bg-hover, rgba(255, 255, 255, 0.08));
}
.theme-toggle svg { width: 18px; height: 18px; }
/* show the icon for the theme the button will switch TO */
.theme-toggle .icon-sun  { display: var(--logo-on-dark, block); }
.theme-toggle .icon-moon { display: var(--logo-on-light, none); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--on-ink); padding-block: var(--s8) var(--s6); }
.site-footer a {
  display: inline-flex; align-items: center; min-height: 36px;
  color: var(--on-ink-2); text-decoration: none; font-size: 13.5px; line-height: 1.4;
  transition: color var(--t-fast) var(--ease);
}
.site-footer a:hover { color: var(--on-ink); }
.site-footer .small, .site-footer p { color: var(--on-ink-2); }
.site-footer h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink); }

/* --------------------------------------------------------------------------
   12. MOTION
   Reveals are two-way: the observer never disconnects, so an element
   animates back out when it leaves the viewport and replays on return.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="blur"]  { filter: blur(10px); transform: translate3d(0, 18px, 0); }
.js [data-reveal="blur"].is-in { filter: none; }

/* 3D: a plane that lies back until it enters view, then stands up */
.js [data-reveal="tilt"] {
  opacity: 0;
  transform: perspective(1600px) rotateX(14deg) translate3d(0, 48px, -90px);
  transform-origin: 50% 0%;
}
.js [data-reveal="tilt"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateX(0deg) translate3d(0, 0, 0);
}

/* children stagger — index set inline as --i */
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* a rule that draws itself */
.js [data-draw] { transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
.js [data-draw].is-in { transform: scaleX(1); }

/* scroll-linked: JS writes --p (0→1 across the element's pass through view) */
.parallax { transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * var(--parallax, 60px)), 0); }
.spin3d {
  transform: perspective(1200px)
             rotateY(calc((var(--p, 0.5) - 0.5) * 46deg))
             rotateX(calc((var(--p, 0.5) - 0.5) * -18deg))
             translate3d(0, calc((var(--p, 0.5) - 0.5) * -70px), 0);
  transform-style: preserve-3d;
}

/* pointer-driven 3D on the product panel — JS writes --mx / --my in -1..1 */
.tilt3d {
  transform: perspective(1400px)
             rotateY(calc(var(--mx, 0) * 5deg))
             rotateX(calc(var(--my, 0) * -4deg));
  transform-style: preserve-3d;
  transition: transform 240ms var(--ease-out);
}
.tilt3d .lift { transform: translateZ(34px); }

/* --------------------------------------------------------------------------
   13. Reduced motion — everything above collapses to a plain page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal="tilt"], [data-stagger] > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  [data-draw] { transform: none !important; }
  .parallax, .spin3d, .tilt3d { transform: none !important; }
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --s9: 64px; --s10: 80px; }

  /* decoration scales with the viewport instead of dominating it */
  .spin3d { width: 62vw !important; height: 62vw !important; right: -22vw !important; }
  .spin3d svg { width: 100%; height: 100%; }

  /* touch targets take priority over footer density on phones */
  .site-footer a { min-height: 44px; }
  .site-footer .grid { gap: var(--s5); }

  .nav, .nav-actions .signin { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; background: transparent;
    border: 1px solid var(--ink-edge); border-radius: var(--r-control);
    color: #fff; cursor: pointer;
  }

  .nav[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 62px 0 0; z-index: 60;
    background: var(--ink-800); padding: var(--s5) var(--gutter) var(--s8);
    overflow-y: auto;
  }
  .nav[data-open="true"] a {
    min-height: 56px; font-size: 18px; color: #fff;
    border-bottom: 1px solid var(--ink-line);
  }
  .nav[data-open="true"] a::after { display: none; }

  /* every multi-column grid collapses */
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .between { flex-wrap: wrap; gap: var(--s4); }

  .display { letter-spacing: -0.03em; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; width: 100%; }

  /* mobile keeps the conversion path pinned */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; gap: var(--s3); align-items: center;
    padding: 12px var(--s4) calc(12px + env(safe-area-inset-bottom));
    background: var(--bar-bg);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ink-line);
    transform: translateY(110%);
    transition: transform var(--t-mid) var(--ease-out);
  }
  .sticky-cta.is-in { transform: none; }
  .sticky-cta .btn { flex: 1; }
  body { padding-bottom: 76px; }
}

@media (min-width: 901px) {
  .sticky-cta { display: none; }
}

@media print {
  .site-header, .sticky-cta, .btn { display: none; }
  body { background: #fff; color: #000; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   15. Editorial layer

   The uppercase-tracked-sans eyebrow, the icon chip on every card and the
   repeating "heading + lede + grid of three" are the three things that make a
   page read as generated. What follows replaces them: a monospace console
   voice for labels, hanging marginal numerals, index rows instead of card
   grids, and section shapes that differ from one another on purpose.
   ========================================================================== */

/* console label — replaces the uppercase tracked eyebrow */
.label {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-ink-3);
  text-transform: none;
}
.label::before { content: "/ "; color: var(--accent-headline, #FE600B); }
.label-plain::before { content: none; }
.label-red { color: var(--accent-headline, #FE600B); }

/* hanging marginal numeral — sits in the gutter, not in the flow */
.marginal {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--accent-headline, #FE600B);
  letter-spacing: 0.04em;
}

/* Accent feature band — theme adaptive: orange in the dark theme, Tech Blue in
   the light one. This is the band to reach for when a section should follow the
   theme. It is deliberately distinct from the brand-red band above, which stays
   identical in both themes because it is brand furniture rather than a surface. */
.band-accent {
  background: var(--accent-band, #FE600B);
  color: var(--on-accent-band, #100201);
}
.band-accent h1,
.band-accent h2,
.band-accent h3,
.band-accent p,
.band-accent li,
.band-accent .label {
  color: inherit;
}
.band-accent .label::before { color: inherit; opacity: 0.55; }
/* secondary copy on the band: one ink, stepped back, so it stays legible on
   both the orange and the blue without a second colour token per theme */
.band-accent .band-quiet { color: inherit; opacity: 0.78; }
.band-accent .band-rule { border-color: var(--how-rule-color, rgba(21, 4, 3, 0.32)); }

/* How it works section — theme adaptive (orange in dark theme, Tech Blue in white theme) */
#how {
  background: var(--accent-band, #FE600B) !important;
  color: var(--on-accent-band, #100201) !important;
}
#how h2, #how h3, #how p, #how li {
  color: inherit !important;
}
#how li {
  border-top-color: var(--how-rule-color, rgba(21, 4, 3, 0.32)) !important;
}

/* display type pushed harder than a template would */
.display-xl {
  font-size: clamp(44px, 8.4vw, 116px);
  line-height: 0.88;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.display-xl em,
.display em,
.h1 em,
.h2 em,
.h3 em,
h1 em,
h2 em,
h3 em,
em {
  font-style: normal;
  color: var(--accent-headline, #FE600B);
}

/* a full-bleed rule in brand accent — structural, not decorative */
.bleed-rule { height: 3px; background: var(--accent-rule, #FE600B); border: 0; margin: 0; }

/* index row: a table of contents, not a card grid */
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 22px;
  gap: var(--s5);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--ink-line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
.index-row:hover { border-top-color: var(--accent-rule, #FE600B); }
.index-row:hover .index-name { color: var(--on-ink); }
.index-row:hover .index-go { opacity: 1; transform: translateX(3px); }
.index-num {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--on-ink-3);
}
.index-name {
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--on-ink);
  transition: color var(--t-fast) var(--ease);
}
.index-note { font-size: 14px; line-height: 1.5; color: var(--on-ink-3); }
.index-go { opacity: 0; color: var(--accent-headline, #FE600B); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }

/* oversized editorial link, for a strip of destinations */
.big-link {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--ink-line);
  font-size: clamp(24px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.05;
  color: var(--on-ink-3);
  text-decoration: none;
  transition: color var(--t-mid) var(--ease-out), padding-left var(--t-mid) var(--ease-out);
}
.big-link:hover { color: var(--on-ink); padding-left: 18px; }
.big-link .big-link-meta {
  display: block;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  color: var(--on-ink-3); padding-top: 6px;
}
.big-link:hover .big-link-meta { color: var(--accent-headline, #FE600B); }

/* ---- nav dropdown -------------------------------------------------------- */
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--on-ink-2);
  transition: color var(--t-fast) var(--ease);
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: #fff; }
.nav-trigger svg { transition: transform var(--t-fast) var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: -20px;
  min-width: 300px; padding: 10px;
  background: var(--ink-700);
  border: 1px solid var(--ink-edge);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 60;
}
.nav-menu[data-open="true"] { display: block; }
.nav-menu a {
  display: flex; flex-direction: column; gap: 2px;
  /* .nav a sets align-items:center for the horizontal bar. Once the direction
     flips to column that centre lands on the cross (horizontal) axis and
     centres the label text, so it has to be reset here. */
  align-items: stretch; text-align: left;
  min-height: 44px; justify-content: center;
  padding: 9px 12px; border-radius: var(--r-control);
  font-size: 14px; font-weight: 600; color: #DCDCD4; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-menu a::after { display: none; }
.nav-menu a:hover { background: var(--ink-600); color: #fff; }
.nav-menu a span {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 400; color: var(--on-ink-3);
}

@media (max-width: 900px) {
  .index-row { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .index-row .index-note, .index-row .index-go { display: none; }
  .big-link:hover { padding-left: 0; }

  /* in the drawer the menu is always open and flows inline */
  .nav-item { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; min-height: 56px; font-size: 18px; color: #fff; border-bottom: 1px solid var(--ink-line); }
  .nav-menu {
    position: static; display: block; min-width: 0; padding: 0 0 var(--s4);
    background: none; border: 0; box-shadow: none;
  }
  .nav-menu a { padding-left: var(--s4); font-size: 16px; }
}

/* wide nav menu — fifteen capabilities need columns, not a scrolling list */
.nav-menu-wide {
  min-width: 760px;
  left: -180px;
  padding: var(--s5);
  display: none;
}
.nav-menu-wide[data-open="true"] { display: block; }
.nav-menu-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* the 24px gutter is split either side of the divider so the rule sits
     centred between the columns rather than hard against one of them */
  column-gap: calc(var(--s5) / 2);
  row-gap: var(--s5);
}
.nav-menu-cols > div + div {
  border-left: 1px solid var(--ink-line);
  padding-left: calc(var(--s5) / 2);
}
.nav-menu-cols .nav-col-label {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 500; color: var(--on-ink-3);
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--ink-line);
}
.nav-menu-cols a { padding: 7px 10px; font-size: 13.5px; }
.nav-menu-foot {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--ink-line);
}
.nav-menu-foot a { font-weight: 700; color: var(--blue-light); }

@media (max-width: 900px) {
  .nav-menu-wide { min-width: 0; left: auto; padding: 0 0 var(--s4); }
  .nav-menu-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .nav-menu-cols > div + div { border-left: 0; padding-left: 0; }
  .nav-menu-cols a { padding-left: var(--s4); font-size: 16px; }
  .nav-menu-foot { margin-top: var(--s3); }
}

/* ==========================================================================
   18. Phone layout corrections

   Three things pinned themselves wider than the column they sat in and either
   pushed the page sideways or were silently cut off. Measured at 320/360/375/
   390/414px; tablet widths were already clean.
   ========================================================================== */

@media (max-width: 900px) {

  /* The closing CTA block carries an inline flex-shrink:0 with a 300px
     max-width paragraph inside. In a 272px column (320px screen less the
     24px gutters) that overhangs by 28px and drags the whole page 4px
     sideways. Scoped to .stack so the 26px step badges and 19px icons in
     contact.html keep their own flex-shrink:0. */
  .between > .stack { flex-shrink: 1 !important; min-width: 0; max-width: 100%; }
  .between > .stack > p { max-width: 100% !important; }

  /* The homepage dispatch-board illustration sets a 200px technician column
     plus five time columns, giving it a ~398px min-content width inside an
     inline overflow:hidden. The right edge — the 16:00 column — was being cut
     off: 103px lost at 320px, 48px at 375px, 9px at 414px. Drop the decorative
     time scale, tighten the cells, and let the board scroll rather than clip
     if it still cannot fit. */
  figure.tilt3d {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* The board only starts clipping below ~430px, so tablets keep the time scale;
   phones drop it and tighten the cells. */
@media (max-width: 600px) {
  figure.tilt3d thead { display: none; }
  figure.tilt3d th[scope="row"] { padding: 12px 14px !important; }
  figure.tilt3d td { padding: 10px 14px !important; }
  figure.tilt3d .row { flex-wrap: wrap; }
  figure.tilt3d .tag { font-size: 11px; padding: 5px 9px; }
}

/* On a 320px screen the sticky bar's two buttons wrap to 87px tall, but the
   body only reserved 76px, so the bar covered the last line of the page. */
@media (max-width: 360px) {
  .sticky-cta { padding-inline: 12px; gap: 8px; }
  body { padding-bottom: 100px; }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
:root {
  --header-h: 77px;
  --t-menu: 180ms;
  --text-bright: #FFFFFF;
  --menu-hover-bg: rgba(255, 255, 255, 0.06);
  --accent-blue-text: #38BDF8;
}

@media (max-width: 560px) {
  :root { --header-h: 75px; }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-edge);
  z-index: 100;
}

body {
  padding-top: var(--header-h);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  max-width: none;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.nav > a {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.nav > a:hover {
  color: var(--on-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.nav-actions .signin {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.nav-actions .signin:hover {
  color: var(--on-ink);
}

.nav-item {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-ink-2);
  transition: color var(--t-fast) var(--ease);
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  color: var(--on-ink);
}

.nav-trigger svg {
  transition: transform var(--t-fast) var(--ease-out);
}

.nav-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Nav Dropdown */
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -20px;
  min-width: 320px;
  padding: 12px;
  background: var(--ink-700);
  border: 1px solid var(--ink-edge);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--t-menu) var(--ease-out),
              transform var(--t-menu) var(--ease-out),
              visibility 0s linear var(--t-menu);
}

.nav-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--t-menu) var(--ease-out),
              transform var(--t-menu) var(--ease-out),
              visibility 0s;
}

.nav-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  text-align: left;
  min-height: 44px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--r-control);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              padding-left var(--t-fast) var(--ease);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--menu-hover-bg);
  color: var(--on-ink);
  padding-left: 16px;
}

.nav-menu a span {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--on-ink-3);
}

/* Wide nav menu (Platform) */
.nav-menu-wide {
  min-width: 780px;
  left: -180px;
  padding: var(--s5);
}

.nav-menu-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--s5) / 2);
  row-gap: var(--s5);
}

.nav-menu-cols > div + div {
  border-left: 1px solid var(--ink-line);
  padding-left: calc(var(--s5) / 2);
}

.nav-menu-cols .nav-col-label {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent-blue-text);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--ink-line);
}

.nav-menu-cols a {
  padding: 7px 10px;
  font-size: 13.5px;
}

.nav-menu-foot {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-line);
}

.nav-menu-foot a {
  font-weight: 700;
  color: var(--accent-blue-text);
}

/* Nav toggle (Mobile) */
.nav-toggle {
  display: none;
}

@media (max-width: 1120px) {
  .nav, .nav-actions .signin {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--ink-edge);
    border-radius: var(--r-control);
    color: var(--on-ink);
    cursor: pointer;
  }
  .nav[data-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--header-h, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 110;
    background: var(--ink-800);
    padding: var(--s5) var(--gutter) var(--s8);
    overflow-y: auto;
  }
  .nav[data-open="true"] a {
    min-height: 52px;
    font-size: 16px;
    color: var(--on-ink);
    border-bottom: 1px solid var(--ink-line);
    display: flex;
    align-items: center;
  }
  .nav-item {
    width: 100%;
  }
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 52px;
    font-size: 16px;
    color: var(--on-ink);
    border-bottom: 1px solid var(--ink-line);
  }
  .nav-menu {
    display: none;
    position: static;
    min-width: 0;
    padding: 0 0 var(--s4);
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .nav-menu[data-open="true"] {
    display: block;
  }
  .nav-menu a {
    padding-left: var(--s4);
    font-size: 15px;
  }
  .nav-menu-wide {
    min-width: 0;
    left: auto;
    padding: 0 0 var(--s4);
  }
  .nav-menu-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
  .nav-menu-cols > div + div {
    border-left: 0;
    padding-left: 0;
  }
  .nav-menu-cols a {
    padding-left: var(--s4);
    font-size: 15px;
  }
  .nav-menu-foot {
    margin-top: var(--s3);
  }
}

/* Tablet & Mobile Layout Polish */
@media (max-width: 1120px) {
  .site-header.is-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 9999 !important;
  }
  .nav[data-open="true"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    top: var(--header-h, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-h, 72px)) !important;
    max-height: calc(100vh - var(--header-h, 72px)) !important;
    z-index: 9999 !important;
    background: var(--ink-800) !important;
    padding: var(--s5) var(--gutter) var(--s8) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav[data-open="true"] a {
    min-height: 48px !important;
    font-size: 16px !important;
    color: var(--on-ink) !important;
    border-bottom: 1px solid var(--ink-line) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .nav[data-open="true"] a:hover {
    color: var(--accent-headline, #074CE7) !important;
  }
  .nav[data-open="true"] .nav-trigger {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    font-size: 16px !important;
    color: var(--on-ink) !important;
    border-bottom: 1px solid var(--ink-line) !important;
  }
  .nav[data-open="true"] .nav-trigger:hover,
  .nav[data-open="true"] .nav-trigger[aria-expanded="true"] {
    color: var(--accent-headline, #074CE7) !important;
  }
  .nav[data-open="true"] .nav-menu {
    display: none;
    position: static !important;
    min-width: 0 !important;
    padding: var(--s3) var(--s3) var(--s4) !important;
    background: var(--ink-700) !important;
    border-radius: var(--r-control) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    margin-block: var(--s2) !important;
  }
  .nav[data-open="true"] .nav-menu[data-open="true"] {
    display: block !important;
  }
  .nav[data-open="true"] .nav-menu-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s4) !important;
  }
  .nav[data-open="true"] .nav-menu a {
    min-height: 40px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--ink-edge) !important;
    padding-left: var(--s2) !important;
  }
}

@media (max-width: 900px) {
  /* Disable sticky positioning on tablet and mobile to prevent overlapping */
  [style*="position: sticky"],
  [style*="position:sticky"],
  .industries-header,
  section[aria-labelledby="ind-title"] [data-reveal="left"] {
    position: static !important;
    top: auto !important;
    margin-bottom: var(--s4) !important;
  }

  /* Industries / Six sectors grid collapses cleanly */
  .industries-grid,
  section[aria-labelledby="ind-title"] .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s5) !important;
  }

  #how ol.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-grid,
  .hero .grid,
  .wrap > .grid,
  section .grid,
  main .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s5) !important;
  }

  .big-link {
    font-size: clamp(20px, 4.5vw, 30px) !important;
    line-height: 1.15 !important;
    padding: 16px 0 !important;
    word-break: break-word !important;
  }
  .big-link .big-link-meta {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding-top: 4px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 18px;
  }
  .wrap {
    padding-inline: 18px !important;
  }
  .brand img {
    width: 110px !important;
    height: auto !important;
  }
  .site-header .wrap {
    padding-inline: 18px !important;
    gap: 8px !important;
  }
  html, body {
    overflow-x: hidden;
  }
  .site-header .nav-actions .btn {
    display: none !important;
  }
  .nav-actions {
    gap: var(--s2) !important;
  }
  .display-xl {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.05 !important;
    word-break: break-word;
    letter-spacing: -0.03em !important;
  }
  .tilt3d {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-panel) !important;
    border-right: 1px solid var(--ink-edge) !important;
  }
  #how ol.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .btn-row .btn {
    width: 100% !important;
  }

  /* Pricing table adapts into native responsive SaaS cards on mobile */
  .pricing-table,
  section[aria-labelledby="pricing-title"] table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .pricing-table thead,
  section[aria-labelledby="pricing-title"] thead {
    display: none !important;
  }
  .pricing-table tbody,
  section[aria-labelledby="pricing-title"] tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s4) !important;
    width: 100% !important;
  }
  .pricing-table tr,
  section[aria-labelledby="pricing-title"] tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    gap: var(--s2) !important;
    padding: var(--s4) !important;
    border: 1px solid var(--ink-line) !important;
    border-radius: var(--r-card) !important;
    background: var(--ink-700) !important;
  }
  .pricing-table tr[style*="background"],
  section[aria-labelledby="pricing-title"] tr[style*="background"] {
    background: var(--table-highlight-bg) !important;
    border-color: var(--accent-rule, #074CE7) !important;
  }
  .pricing-table th[scope="row"],
  section[aria-labelledby="pricing-title"] th[scope="row"] {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    border-bottom: 0 !important;
  }
  .pricing-table td:last-child,
  section[aria-labelledby="pricing-title"] td:last-child {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    text-align: right !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--accent-headline, #074CE7) !important;
    border-bottom: 0 !important;
    white-space: nowrap !important;
  }
  .pricing-table td:nth-child(2),
  section[aria-labelledby="pricing-title"] td:nth-child(2) {
    grid-column: 1 / 3 !important;
    grid-row: 2 / 3 !important;
    padding: 6px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-bottom: 0 !important;
  }
  .pricing-table td:nth-child(3),
  section[aria-labelledby="pricing-title"] td:nth-child(3) {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
    padding: 2px 0 0 !important;
    font-size: 13px !important;
    color: var(--on-ink-3) !important;
    border-bottom: 0 !important;
  }
}

/* Tablet footer (601px to 1024px): 2 balanced columns */
@media (min-width: 601px) and (max-width: 1024px) {
  .site-footer .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s7) var(--s6) !important;
  }
}

/* Mobile footer (<= 600px): 1 single column */
@media (max-width: 600px) {
  .site-footer .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s6) !important;
  }
}

/* ==========================================================================
   Editorial, Blog & Extended Components
   ========================================================================== */

/* ---- post meta bar (byline left, share cluster right) --------------------- */
.post-meta-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4) var(--s5);
  padding-top: var(--s3);
}
.post-meta-bar > .label { margin: 0; min-width: 0; }
.post-meta-bar .share-row { padding-top: 0; margin-left: auto; }
@media (max-width: 620px) {
  .post-meta-bar .share-row { margin-left: 0; width: 100%; }
}

/* ---- share row & buttons -------------------------------------------------- */
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-top: var(--s4);
}
.share-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.share-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-ink-3);
  margin-right: var(--s2);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--on-ink);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--btn-ghost-line);
  border-radius: var(--r-control);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.share-btn:hover {
  border-color: var(--btn-ghost-line-hover);
  background: var(--btn-ghost-bg-hover);
  color: var(--on-ink);
}
.share-btn svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.share-btn[data-copied="true"] {
  border-color: var(--accent-blue-text);
  color: var(--accent-blue-text);
}
@media (max-width: 480px) {
  .share-btn { flex: 1 1 auto; }
  .share-label { flex: 1 0 100%; margin-right: 0; }
}

/* ---- prose tables (tables inside blog articles) --------------------------- */
.prose-table-wrap {
  overflow-x: auto;
  margin-block: var(--s5);
  -webkit-overflow-scrolling: touch;
}
.prose-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prose-table caption {
  text-align: left;
  padding-bottom: var(--s3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: var(--on-ink-3);
}
.prose-table th, .prose-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  vertical-align: top;
  line-height: 1.45;
}
.prose-table thead th {
  border-bottom: 2px solid var(--rule-strong);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-ink-2);
}
.prose-table tbody tr {
  border-bottom: 1px solid var(--ink-line);
}
.prose-table tbody th {
  font-weight: 700;
  color: var(--on-ink);
}
.prose-table td {
  color: var(--on-ink-2);
}

/* ---- disclosures (FAQ accordions) ----------------------------------------- */
.faq-panel > .faq-panel-inner { overflow: hidden; }
.js .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-out);
}
.js .faq-panel[data-open="true"] { grid-template-rows: 1fr; }
.disclosure-icon {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--accent-text);
}
.disclosure-icon::before,
.disclosure-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.disclosure-icon::after { transform: rotate(90deg); }
[data-disclosure][aria-expanded="true"] .disclosure-icon::after {
  transform: rotate(0deg);
  opacity: 0;
}

/* ---- editorial furniture (pull-quote, author card, sticky-aside) ----------- */
.pull-quote {
  margin-block: var(--s5);
  padding-left: var(--s5);
  border-left: 2px solid var(--accent-rule);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-bright);
  text-wrap: balance;
}
.author-card {
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
}
.sticky-aside {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.sticky-aside a {
  color: var(--on-ink-2) !important;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.sticky-aside a:hover,
.sticky-aside a.active {
  color: var(--blue) !important;
}
.sticky-aside a.active {
  font-weight: 700;
}

.guide-heading,
.entry-content h2,
.entry-content h3,
article h2[id],
article h3[id] {
  scroll-margin-top: 110px;
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s8);
  align-items: start;
}
@media (max-width: 960px) {
  .legal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .legal-grid .sticky-aside {
    order: -1;
    border-left: none !important;
    border-bottom: 1px solid var(--ink-line);
    padding-left: 0 !important;
    padding-bottom: var(--s5);
    margin-bottom: var(--s6);
  }
}

@media (max-width: 900px) {
  .sticky-aside {
    position: static !important;
    top: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: var(--s5);
  }
  .blog-content-grid,
  .grid[style*="240px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- media slots & figcaption --------------------------------------------- */
.media-slot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
}
.media-slot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--ink-600);
}
.media-slot figcaption {
  padding-top: var(--s3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-ink-3);
}

/* ---- hero grid: 60/40 desktop, 1-column mobile ---------------------------- */
.hero-grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 861px) {
  .hero-grid {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    align-items: center;
  }
}
.media-slot.hero-people img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
}
@media (max-width: 860px) {
  .media-slot.hero-people img {
    aspect-ratio: 16 / 9;
  }
}

/* ---- people band (3 personas) --------------------------------------------- */
.people-band {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-top: var(--s6);
}
.people-band .media-slot figcaption {
  font-family: inherit;
  font-size: 14px;
  color: var(--on-ink-2);
}
@media (max-width: 700px) {
  .people-band {
    grid-template-columns: 1fr;
  }
  .people-band .media-slot img {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ---- wide bleed platform image (21:9) -------------------------------------- */
.media-bleed {
  width: 100%;
}
.media-bleed img {
  border-radius: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.media-bleed figcaption {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (max-width: 860px) {
  .media-bleed figcaption { padding-inline: var(--s5); }
}

/* ---- consent checkbox on the enquiry form ----------------------------------- */
.consent-check {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-ink-2);
  /* a comfortable target without making the whole row look like a button */
  padding: var(--s2) 0;
}
.consent-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}
.consent-check span { flex: 1 1 auto; }

/* ---- cookie consent ---------------------------------------------------------
   Fixed to the bottom, non-modal, and rendered early in the DOM so a keyboard
   user reaches the choice before the header. Tokens only, so it follows the
   light/dark toggle like everything else. */
.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: var(--ink-800);
  border-top: 2px solid var(--accent-rule);
  box-shadow: 0 -18px 48px rgb(0 0 0 / 0.34);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s5) var(--gutter);
  display: flex;
  gap: var(--s6);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-consent-copy { max-width: 68ch; }
.cookie-consent h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-ink);
}
.cookie-consent p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-ink-2);
  padding-top: var(--s2);
}
.cookie-consent-links { display: flex; gap: var(--s4); }
.cookie-consent-links a { color: var(--accent-blue-text); font-size: 13px; }
.cookie-consent-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  flex: none;
}
.cookie-consent-actions .btn { min-height: 44px; }

@media (max-width: 720px) {
  .cookie-consent-inner { padding: var(--s5) var(--s5); gap: var(--s4); }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .btn { flex: 1 1 auto; }
  /* the banner can be tall on a phone, so cap it and let it scroll */
  .cookie-consent { max-height: 80vh; overflow-y: auto; }
}

/* ---- company hero -----------------------------------------------------------
   A centred statement, deliberately unlike the sector pages, which open with a
   left headline against a right-hand paragraph and an accent rule. Same type
   scale and tokens, different silhouette. */
.company-hero {
  text-align: center;
  padding-block: var(--s9) var(--s8);
  border-bottom: 1px solid var(--ink-line);
}
.company-hero .label { justify-content: center; }
.company-hero h1 {
  font-size: clamp(34px, 6vw, 82px);
  max-width: 20ch;
  margin-inline: auto;
  padding-top: var(--s4);
  text-wrap: balance;
}
.company-hero .lede {
  max-width: 62ch;
  margin-inline: auto;
  padding-top: var(--s5);
  font-size: clamp(16px, 1.6vw, 19px);
}
@media (max-width: 640px) {
  .company-hero { padding-block: var(--s7) var(--s6); text-align: left; }
  .company-hero h1, .company-hero .lede { margin-inline: 0; }
  .company-hero .label { justify-content: flex-start; }
}

/* ---- media wide: full content width, caption underneath ---------------------
   Replaces the old side-by-side treatment, where a tall image sat beside two
   vertically-centred lines and left a large empty column beside it. */
.media-wide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.media-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  padding-top: var(--s4);
}
.media-caption .label { flex: none; margin: 0; }
.media-caption-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-ink-2);
  max-width: 68ch;
}
@media (max-width: 640px) {
  .media-caption { gap: var(--s2); }
  .media-caption-text { font-size: 14px; }
}

/* ---- media split ----------------------------------------------------------- */
.media-split {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 861px) {
  .media-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---- big-link & index-row ------------------------------------------------- */
.big-link {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--ink-line);
  font-size: clamp(24px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.05;
  color: var(--text-muted-lg);
  text-decoration: none;
  transition: color var(--t-mid) var(--ease-out), padding-left var(--t-mid) var(--ease-out);
}
.big-link:hover {
  color: var(--on-ink);
  padding-left: 18px;
}
.big-link .big-link-meta {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--on-ink-3);
  padding-top: 6px;
}
.big-link:hover .big-link-meta {
  color: var(--accent-text);
}

/* ---- theme-adaptive blog chips -------------------------------------------- */
.chip-most-read {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #15803d !important; /* dark green for high contrast in light mode */
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
:root[data-theme="dark"] .chip-most-read {
  color: #4ade80 !important;
}
.chip-fresh {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #7e22ce !important; /* dark purple for high contrast in light mode */
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
:root[data-theme="dark"] .chip-fresh {
  color: #c084fc !important;
}

/* ---- theme-adaptive contact success banner ------------------------------- */
.contact-success-banner {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #14532d;
}
:root[data-theme="dark"] .contact-success-banner {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

/* --------------------------------------------------------------------------
   ENTERPRISE BLOG THEME-DEPENDENT DESIGN SYSTEM
   Supports seamless dark/light theme switching across all blog elements
   -------------------------------------------------------------------------- */

/* ---- 1. Typography & Content Elements inside .entry-content ---- */
.entry-content {
  color: var(--on-ink-2);
}
:root[data-theme="light"] .entry-content {
  color: var(--on-paper-2);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--on-ink);
  font-weight: 800;
  letter-spacing: -0.024em;
  margin-top: var(--s7);
  margin-bottom: var(--s3);
  line-height: 1.25;
}
:root[data-theme="light"] .entry-content h2,
:root[data-theme="light"] .entry-content h3,
:root[data-theme="light"] .entry-content h4 {
  color: var(--on-paper);
}

.entry-content h2 {
  font-size: clamp(22px, 2.4vw, 30px);
}
.entry-content h3 {
  font-size: clamp(18px, 1.9vw, 23px);
  margin-top: var(--s6);
}

.entry-content p {
  color: var(--on-ink-2);
  line-height: 1.68;
  margin-bottom: var(--s4);
}
:root[data-theme="light"] .entry-content p {
  color: var(--on-paper-2);
}

.entry-content .lead,
article .lead {
  font-size: clamp(18px, 1.8vw, 20px) !important;
  color: var(--on-ink) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--s6) !important;
}
:root[data-theme="light"] .entry-content .lead,
:root[data-theme="light"] article .lead {
  color: var(--on-paper) !important;
}

.entry-content strong,
.entry-content b {
  color: var(--on-ink);
  font-weight: 700;
}
:root[data-theme="light"] .entry-content strong,
:root[data-theme="light"] .entry-content b {
  color: var(--on-paper);
}

.entry-content a:not(.btn) {
  color: var(--blue-light);
  text-decoration: underline;
  text-decoration-color: rgba(127, 166, 255, 0.45);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .entry-content a:not(.btn) {
  color: var(--blue-deep);
  text-decoration-color: rgba(5, 56, 174, 0.35);
}
.entry-content a:not(.btn):hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--s5);
  margin-bottom: var(--s5);
}
.entry-content ul {
  list-style: disc;
}
.entry-content ol {
  list-style: decimal;
}
.entry-content li {
  padding-block: 4px;
  line-height: 1.65;
  color: var(--on-ink-2);
}
:root[data-theme="light"] .entry-content li {
  color: var(--on-paper-2);
}
.entry-content li strong {
  color: var(--on-ink);
}
:root[data-theme="light"] .entry-content li strong {
  color: var(--on-paper);
}

/* Code & Preformatted Blocks */
.entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  color: var(--blue-light);
}
:root[data-theme="light"] .entry-content code {
  background: var(--paper-sunk);
  border-color: var(--paper-line);
  color: var(--blue-deep);
}

.entry-content pre {
  padding: var(--s4) var(--s5);
  border-radius: var(--r-card);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  overflow-x: auto;
  margin-block: var(--s5);
}
:root[data-theme="light"] .entry-content pre {
  background: var(--paper-sunk);
  border-color: var(--paper-line);
}
.entry-content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--on-ink);
}
:root[data-theme="light"] .entry-content pre code {
  color: var(--on-paper);
}

/* Blockquotes */
.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-block: var(--s6);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--accent-rule, var(--blue));
  background: var(--ink-700);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
:root[data-theme="light"] .entry-content blockquote,
:root[data-theme="light"] .entry-content .wp-block-quote {
  background: var(--paper-sunk);
}
.entry-content blockquote p,
.entry-content .wp-block-quote p {
  color: var(--on-ink);
  font-style: italic;
  font-size: 16.5px;
  margin: 0;
}
:root[data-theme="light"] .entry-content blockquote p,
:root[data-theme="light"] .entry-content .wp-block-quote p {
  color: var(--on-paper);
}

/* ---- 2. Architecture / Pro Tip Callout Cards ---- */
.entry-content .card,
article .card {
  padding: var(--s5);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  margin-block: var(--s6);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
:root[data-theme="light"] .entry-content .card,
:root[data-theme="light"] article .card {
  background: var(--paper-card) !important;
  border-color: var(--paper-line) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.entry-content .card .label,
article .card .label {
  color: var(--accent-blue-text) !important;
  font-weight: 700;
  margin-bottom: var(--s2);
}

.entry-content .card .body,
article .card .body {
  color: var(--on-ink-2);
}
:root[data-theme="light"] .entry-content .card .body,
:root[data-theme="light"] article .card .body {
  color: var(--on-paper-2);
}

.entry-content .card strong,
article .card strong {
  color: var(--on-ink);
}
:root[data-theme="light"] .entry-content .card strong,
:root[data-theme="light"] article .card strong {
  color: var(--on-paper);
}

/* ---- 3. Financial & Operational Comparison Tables ---- */
.prose-table-wrap {
  overflow-x: auto;
  margin-block: var(--s6);
  border-radius: var(--r-card);
  border: 1px solid var(--ink-line);
  background: var(--ink-800);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
:root[data-theme="light"] .prose-table-wrap {
  border-color: var(--paper-line) !important;
  background: var(--paper-card) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.prose-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.prose-table caption {
  text-align: left;
  padding: var(--s3) var(--s4);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: var(--on-ink-3);
  border-bottom: 1px solid var(--ink-line);
}
:root[data-theme="light"] .prose-table caption {
  color: var(--on-paper-3);
  border-bottom-color: var(--paper-line);
}

.prose-table th,
.prose-table td {
  text-align: left;
  padding: 14px 18px;
  vertical-align: middle;
  line-height: 1.45;
}

.prose-table thead th {
  background: var(--ink-700);
  border-bottom: 2px solid var(--rule-strong);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-ink);
}
:root[data-theme="light"] .prose-table thead th {
  background: var(--paper-sunk) !important;
  color: var(--on-paper) !important;
  border-bottom-color: var(--paper-ghost) !important;
}

.prose-table tbody tr {
  border-bottom: 1px solid var(--ink-line);
  transition: background var(--t-fast) var(--ease);
}
:root[data-theme="light"] .prose-table tbody tr {
  border-bottom-color: var(--paper-line) !important;
}

.prose-table tbody tr:hover {
  background: var(--ink-700);
}
:root[data-theme="light"] .prose-table tbody tr:hover {
  background: var(--paper-sunk) !important;
}

.prose-table tbody tr:last-child {
  border-bottom: none;
}

.prose-table tbody th {
  font-weight: 700;
  color: var(--on-ink);
}
:root[data-theme="light"] .prose-table tbody th {
  color: var(--on-paper) !important;
}

.prose-table td {
  color: var(--on-ink-2);
}
:root[data-theme="light"] .prose-table td {
  color: var(--on-paper-2) !important;
}

/* ---- 4. Metric & Savings Badges ---- */
.metric-badge,
.prose-badge,
span[style*="#4ade80"],
span[style*="rgba(34, 197, 94"] {
  background: var(--badge-green-bg) !important;
  color: var(--badge-green-text) !important;
  border: 1px solid var(--badge-green-border) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: inline-block !important;
  letter-spacing: -0.01em;
  transition: all var(--t-fast) var(--ease);
}

:root[data-theme="light"] .metric-badge,
:root[data-theme="light"] .prose-badge,
:root[data-theme="light"] span[style*="#4ade80"],
:root[data-theme="light"] span[style*="rgba(34, 197, 94"] {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.28) !important;
}

/* ---- 5. Animated Accordion FAQs ---- */
[data-disclosure] {
  transition: color var(--t-fast) var(--ease);
}
[data-disclosure]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}
[data-disclosure] span:first-child {
  color: var(--on-ink);
  transition: color var(--t-fast) var(--ease);
}
:root[data-theme="light"] [data-disclosure] span:first-child {
  color: var(--on-paper) !important;
}
[data-disclosure]:hover span:first-child {
  color: var(--blue) !important;
}

/* FAQ dividing lines adapt to light mode */
article [style*="border-top: 1px solid var(--ink-line)"],
article [style*="border-block: 1px solid var(--ink-line)"] {
  transition: border-color var(--t-fast) var(--ease);
}
:root[data-theme="light"] article [style*="border-top: 1px solid var(--ink-line)"],
:root[data-theme="light"] article [style*="border-block: 1px solid var(--ink-line)"] {
  border-color: var(--paper-line) !important;
}

/* FAQ chevron icon */
.disclosure-icon {
  color: var(--accent-headline, var(--blue));
  transition: color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .disclosure-icon {
  color: var(--blue) !important;
}

/* FAQ answer body */
.faq-panel .body {
  color: var(--on-ink-2);
}
:root[data-theme="light"] .faq-panel .body {
  color: var(--on-paper-2) !important;
}

/* ---- 6. In-Content Enterprise CTAs ---- */
.entry-content a[href*="/contact/"] {
  display: inline-block;
  padding: 14px 30px;
  background: var(--blue) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: var(--r-card);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(7, 75, 230, 0.35);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.entry-content a[href*="/contact/"]:hover {
  background: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(7, 75, 230, 0.45);
}

/* ---- 7. Sticky Table of Contents Aside ---- */
.sticky-aside {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
:root[data-theme="light"] .sticky-aside {
  scrollbar-color: var(--paper-ghost) transparent;
}

.sticky-aside .label {
  color: var(--accent-headline) !important;
  margin-bottom: var(--s2);
}

.sticky-aside a {
  color: var(--on-ink-3) !important;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  display: inline-block;
  min-height: 24px;
  padding-left: var(--s3);
  border-left: 2px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
:root[data-theme="light"] .sticky-aside a {
  color: var(--on-paper-3) !important;
}

.sticky-aside a:hover {
  color: var(--on-ink) !important;
  border-left-color: var(--ink-line);
}
:root[data-theme="light"] .sticky-aside a:hover {
  color: var(--on-paper) !important;
  border-left-color: var(--paper-line);
}

.sticky-aside a.active {
  color: var(--blue) !important;
  font-weight: 700;
  border-left-color: var(--blue);
}

/* ---- 8. Header Hero & Share Elements ---- */
.blog-hero-image {
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: all var(--t-fast) var(--ease);
}
:root[data-theme="light"] .blog-hero-image {
  background: var(--paper-sunk) !important;
  border-color: var(--paper-line) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.share-btn {
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  color: var(--on-ink);
  transition: all var(--t-fast) var(--ease);
}
:root[data-theme="light"] .share-btn {
  background: var(--paper-card) !important;
  border-color: var(--paper-line) !important;
  color: var(--on-paper) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.share-btn:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* ---- 9. Keep Reading Section ---- */
.big-link {
  color: var(--on-ink);
  border-bottom: 1px solid var(--ink-line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .big-link {
  color: var(--on-paper) !important;
  border-bottom-color: var(--paper-line) !important;
}
.big-link:hover {
  color: var(--blue) !important;
}
.big-link .big-link-meta {
  color: var(--on-ink-3);
  transition: color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .big-link .big-link-meta {
  color: var(--on-paper-3) !important;
}
.big-link:hover .big-link-meta {
  color: var(--accent-headline) !important;
}

/* ---- 10. Blog Archive / Grid Layout ---- */
.post-row {
  transition: border-color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .post-row {
  border-bottom-color: var(--paper-line) !important;
}

.post-row h2 a {
  color: var(--on-ink);
  transition: color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .post-row h2 a {
  color: var(--on-paper) !important;
}
.post-row h2 a:hover {
  color: var(--blue) !important;
}

.post-row .body {
  color: var(--on-ink-2);
}
:root[data-theme="light"] .post-row .body {
  color: var(--on-paper-2) !important;
}

.post-row .link-arrow {
  color: var(--chip-text);
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
:root[data-theme="light"] .post-row .link-arrow {
  color: var(--on-paper-2) !important;
}
.post-row .link-arrow:hover {
  color: var(--blue) !important;
}

.blog-sidebar .card {
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  transition: all var(--t-fast) var(--ease);
}
:root[data-theme="light"] .blog-sidebar .card {
  background: var(--paper-card) !important;
  border-color: var(--paper-line) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.blog-sidebar .card h3 a {
  color: var(--on-ink);
  transition: color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .blog-sidebar .card h3 a {
  color: var(--on-paper) !important;
}
.blog-sidebar .card h3 a:hover {
  color: var(--blue) !important;
}

:root[data-theme="light"] .blog-sidebar [style*="border-bottom: 1px solid var(--ink-line)"] {
  border-bottom-color: var(--paper-line) !important;
}
:root[data-theme="light"] .blog-sidebar [style*="border-left: 2px solid var(--ink-line)"] {
  border-left-color: var(--paper-line) !important;
}

/* Pagination Buttons */
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--s7);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-control);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  color: var(--on-ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.pagination .page-numbers:hover {
  border-color: var(--btn-ghost-line-hover, var(--on-ink));
  color: var(--on-ink);
}
.pagination .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}
:root[data-theme="light"] .pagination .page-numbers {
  background: var(--paper-card);
  border-color: var(--paper-line);
  color: var(--on-paper-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .pagination .page-numbers:hover {
  border-color: var(--on-paper-3);
  color: var(--on-paper);
}
:root[data-theme="light"] .pagination .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}