/* 4rthur_service.css — the four /services/*.html pages.
   Shared chrome is duplicated verbatim across all five stylesheets by
   convention; see docs/CONVENTIONS.md. Rules here point at
   docs/CSS_RATIONALE.md instead of carrying the reasoning inline — a CSS
   comment is a delivered byte on every uncached load, and docs/ is 404'd
   in production. */

:root {
  --bg: #0a0a0a;
  --bg-alt: #141412;
  --bg-card: #16151300;
  --fg: #f5f5f0;
  --fg-dim: #b8b7b1;
  --muted: #6b6a66;
  --subtle: #2a2a26;
  --line: rgb(var(--fg-rgb) / 0.08);
  --line-strong: rgb(var(--fg-rgb) / 0.18);
  --accent: #ff3e1f;
  --accent-warm: #ff7a3e;
  --accent-2: #6efe6e;
  --sev-med: #ffa726;

  /* RGB triplets for alpha-tinting */
  --accent-rgb: 255 62 31;
  --accent-warm-rgb: 255 122 62;
  --accent-2-rgb: 110 254 110;
  --sev-med-rgb: 255 167 38;
  --fg-rgb: 245 245 240;
  --bg-rgb: 10 10 10;
  --bg-alt-rgb: 20 20 18;

  --italic: 'Instrument Sans', 'Times New Roman', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing scale. Block level and up; gaps under 12px stay literal.
     See docs/DESIGN_SYSTEM.md "Spacing rhythm". */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 72px;
  --sp-6: 120px;

  /* Type scale, eight steps. --t-display is the one-per-page hero and sits
     outside the scale; .footer-hero is a wordmark and sits outside it too.
     See docs/DESIGN_SYSTEM.md "Type scale". */
  --t-1: 11px;
  --t-2: 13px;
  --t-3: 15px;
  --t-4: 17px;
  --t-5: clamp(19px, 1.6vw, 22px);
  --t-6: clamp(24px, 2.6vw, 30px);
  --t-7: clamp(28px, 3.4vw, 42px);
  --t-8: clamp(34px, 4.4vw, 56px);
  --t-display: clamp(38px, 5.5vw, 72px);

  /* Height of the fixed nav. Drops to 71px under 768px, where the
     nav's own padding tightens. */
  --nav-h: 81px;
}
@media (max-width: 768px) { :root { --nav-h: 71px; } }

[data-theme="light"] {
  --bg: #f7f5f0;
  --bg-alt: #eeebe2;
  --bg-card: #1a181300;
  --fg: #1a1813;
  --fg-dim: #4d4a42;
  --muted: #6b655a;
  --subtle: #d9d6cc;
  --line: rgba(26, 24, 19, 0.10);
  --line-strong: rgba(26, 24, 19, 0.22);
  --accent: #d23410;
  --accent-warm: #ab4e11;
  --accent-2: #3a7d18;
  --sev-med: #a35c00;

  --accent-rgb: 210 52 16;
  --accent-warm-rgb: 171 78 17;
  --accent-2-rgb: 58 125 24;
  --sev-med-rgb: 163 92 0;
  --fg-rgb: 26 24 19;
  --bg-rgb: 247 245 240;
  --bg-alt-rgb: 238 235 226;
}

/* Honour the OS motion setting. The scoped reduced-motion rules further down
   handle components that need more than a duration cut. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

  /* ── base reset + typography ───────────────────────────── */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-feature-settings: "ss01", "cv11";
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* ── noise overlay ───────────────────────────────── */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
  }

  /* ── progress bar ───────────────────────────────── */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent);
    z-index: 1000;
    box-shadow: 0 0 10px var(--accent);
  }

  /* ── nav ───────────────────────────────── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(var(--bg-rgb) / 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  /* Two artwork variants, swapped by theme in CSS rather than JS so the
     correct one is painted on first frame — the inline theme script in
     <head> has already set data-theme before this rule is evaluated. */
  .logo-lockup {
    height: 28px;
    width: auto;
    display: block;
  }
  .logo-lockup--light { display: none; }
  [data-theme="light"] .logo-lockup--dark { display: none; }
  [data-theme="light"] .logo-lockup--light { display: block; }
  @media (max-width: 768px) { .logo-lockup { height: 24px; } }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a {
    font-size: var(--t-2);
    font-weight: 400;
    color: var(--fg-dim);
    transition: color 0.2s;
    position: relative;
  }
  .nav-links a:hover { color: var(--fg); }
  .nav-cta {
    font-family: var(--mono);
    font-size: var(--t-2);
    letter-spacing: 0.04em;
    padding: 10px 18px;
    border: 1px solid var(--fg);
    background: var(--fg);
    color: var(--bg);
    text-transform: uppercase;
    transition: all 0.2s;
  }
  .nav-cta:hover { background: var(--accent); color: var(--fg); border-color: var(--accent); }
  .nav-links a.nav-cta {
	color: var(--bg);
  }
  .nav-links a.nav-cta:hover {
	color: var(--fg);
  }
  /* hamburger toggle */
  .nav-toggle {
    display: none;
    width: 28px; height: 28px;
    position: relative;
    border: 1.5px solid var(--fg);
    margin-left: 4px;
    flex-shrink: 0;
    background: transparent;
    transition: border-color 0.3s ease;
  }
  .nav-toggle span {
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 1px;
    background: var(--fg);
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .nav-toggle span:nth-child(1) { transform: translate(-50%, -3px); }
  .nav-toggle span:nth-child(2) { transform: translate(-50%, 3px); }
  .nav-toggle.open { border-color: var(--accent); }
  .nav-toggle.open span { background: var(--accent); }
  .nav-toggle.open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

  .theme-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--fg);
  background: transparent;
  margin-left: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg {
  width: 14px;
  height: 14px;
  color: var(--fg);
  transition: color 0.3s ease;
}
.theme-toggle:hover svg { color: var(--accent); }

/* show sun in dark mode (click switches to light) */
[data-theme="dark"] .theme-toggle .icon-moon,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun,
.theme-toggle .icon-sun { display: block; }

/* show moon in light mode (click switches to dark) */
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 768px) {
  .theme-toggle { width: 26px; height: 26px; }
  .theme-toggle svg { width: 12px; height: 12px; }
}

  /* mobile menu overlay */
  .mobile-menu {
    position: fixed; inset: 0;
    z-index: 99;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    overflow-y: auto;
  }
  .mobile-menu.open { visibility: visible; opacity: 1; }
  .mobile-menu-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
    pointer-events: none;
  }
  .mobile-menu-inner {
    position: relative; z-index: 2;
    min-height: 100%;
    display: flex; flex-direction: column;
    padding: 100px 24px 40px;
  }
  .mobile-menu-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu-status {
    display: flex; align-items: center; gap: 8px;
    color: var(--accent-2);
  }
  .mobile-menu-status .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 8px var(--accent-2);
    animation: mobile-pulse 1.6s ease-in-out infinite;
  }
  @keyframes mobile-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }
  .mobile-menu-list {
    list-style: none;
    flex-grow: 1;
    margin: 0; padding: 0;
  }
  .mobile-menu-list li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .mobile-menu.open .mobile-menu-list li { opacity: 1; transform: translateY(0); }
  .mobile-menu.open .mobile-menu-list li:nth-child(1) { transition-delay: 0.18s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(2) { transition-delay: 0.24s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(3) { transition-delay: 0.30s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(4) { transition-delay: 0.36s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(5) { transition-delay: 0.42s; }
  .mobile-menu-list a,
  .mobile-menu-list .mm-group-trigger {
    display: flex; align-items: baseline; gap: 18px;
    padding: 22px 0;
    font-size: var(--t-7);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--fg);
    line-height: 1;
  }
  .mobile-menu-list a .num,
  .mobile-menu-list .mm-group-trigger .num {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--accent);
    letter-spacing: 0.15em;
    font-weight: 400;
    flex-shrink: 0;
    width: 28px;
  }
  .mobile-menu-list a .lbl,
  .mobile-menu-list .mm-group-trigger .lbl { flex-grow: 1; }
  .mobile-menu-list a .arr,
  .mobile-menu-list .mm-group-trigger .arr {
    font-size: var(--t-4);
    color: var(--muted);
    transition: color 0.2s, transform 0.2s;
  }
  .mobile-menu-list a:active .arr,
  .mobile-menu-list .mm-group-trigger:active .arr { color: var(--accent); transform: translate(2px, -2px); }
  .mobile-menu-list li.active a .lbl {
    font-family: var(--italic);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
  }
  .mobile-menu-list li.active a .num { color: var(--accent); }
  .mobile-menu-foot {
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
  }
  .mobile-menu.open .mobile-menu-foot {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
  }
  .mobile-menu-foot .lbl {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mobile-menu-foot a, .mobile-menu-foot span {
    color: var(--fg-dim);
    font-size: var(--t-3);
  }
  body.menu-open { overflow: hidden; }

  /* ─── announcement bar ───
     Fixed above the nav on every page that carries .ann (all but the post it
     announces). body.has-ann offsets the page and the nav while it shows;
     html.ann-hidden (scrolled) and body.menu-open slide it away, and
     html.ann-off (dismissed, set in <head>) removes it. The same block is in
     all five stylesheets; see docs/CONVENTIONS.md. */
  :root { --ann-h: 36px; }
  .ann {
    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
    height: var(--ann-h); display: flex; align-items: center; justify-content: center;
    padding: 0 48px; background: color-mix(in srgb, var(--accent) 9%, var(--bg));
    border-bottom: 1px solid rgb(var(--accent-rgb) / .3);
    transition: transform .3s ease, visibility 0s;
  }
  .ann-link { display: flex; align-items: center; gap: 12px; min-width: 0;
    font-size: var(--t-2); color: var(--fg-dim); text-decoration: none; }
  .ann-link > .ann-long, .ann-link > .ann-short { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .ann-tag, .ann-cta { flex: none; font-family: var(--mono); font-size: var(--t-1);
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .ann-link:hover { color: var(--fg); }
  .ann-link:hover .ann-cta { text-decoration: underline; text-underline-offset: 3px; }
  .ann-short { display: none; }
  .ann-x { position: absolute; right: 10px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    background: none; border: 0; color: var(--muted); cursor: pointer; }
  .ann-x:hover { color: var(--fg); }
  .has-ann nav { transform: translateY(var(--ann-h)); transition: transform .3s ease; }
  :root:not(.ann-off) body.has-ann { padding-top: var(--ann-h); }
  .ann-hidden .ann, .menu-open .ann {
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s .3s;
  }
  .ann-hidden .has-ann nav, .has-ann.menu-open nav, .ann-off .has-ann nav { transform: none; }
  .ann-off .ann { display: none; }
  @media (max-width: 640px) {
    .ann { justify-content: flex-start; padding: 0 44px 0 16px; }
    .ann-long { display: none; }
    .ann-short { display: inline; }
  }

  @media (max-width: 768px) {
    nav { padding: 16px 20px; }
    .nav-links { gap: 12px; }
    .nav-links a:not(.nav-cta) { display: none; }
    /* See docs/CSS_RATIONALE.md § Shared chrome > nav .nav-dd. */
    nav .nav-dd { display: none; }
    .nav-toggle { display: block; }
    .nav-cta {
      padding: 9px 14px;
      font-size: var(--t-1);
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    .mobile-menu-list a,
    .mobile-menu-list .mm-group-trigger { font-size: var(--t-6); }
  }

  /* ── shared ───────────────────────────────── */
  .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
  :target, section[id] { scroll-margin-top: var(--nav-h); }
  @media (max-width: 768px) { .container { padding: 0 20px; } }

  .eyebrow {
    font-family: var(--mono);
    font-size: var(--t-1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--accent);
    display: inline-block;
  }
  .section-num {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; }
  .italic-serif { font-family: var(--italic); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--accent)}

  /* ── buttons ───────────────────────────────── */
  .btn {
    font-family: var(--mono);
    font-size: var(--t-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--fg);
    border: 1px solid var(--accent);
  }
  .btn-primary:hover { background: transparent; color: var(--accent); }
  .btn-secondary {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line-strong);
  }
  .btn-secondary:hover { border-color: var(--fg); background: rgba(255,255,255,0.04); }
  .btn .arrow { transition: transform 0.3s; }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ── section shared ───────────────────────────────── */
  section { padding: var(--sp-6) 0; position: relative; }
  .section-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: var(--sp-5);
    align-items: end;
  }
  .section-header-full { grid-template-columns: 1fr; }
  .section-header h2 {
    font-size: var(--t-8);
    letter-spacing: -0.04em;
  }
  .section-header h2 em {
    font-family: var(--italic);
    color: var(--accent);
    font-weight: 400;
  }
  .section-header p {
    color: var(--fg-dim);
    font-size: var(--t-4);
    line-height: 1.5;
  }
  @media (max-width: 900px) {
    section { padding: var(--sp-5) 0; }
    .section-header { grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  }

  /* ── footer ───────────────────────────────── */
  footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--line);
  }
  .footer-hero {
    font-size: clamp(24px, 4.5vw, 64px);
    font-weight: 500;
    line-height: 0.85;
    margin-bottom: 60px;
    position: relative;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .footer-col h5 {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .footer-col a {
    display: block;
    color: var(--fg-dim);
    font-size: var(--t-3);
    padding: 6px 0;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--accent); }
  .footer-tag {
    font-family: var(--italic);
    font-style: italic;
    font-size: var(--t-5);
    color: var(--fg-dim);
    max-width: 360px;
    line-height: 1.4;
    margin-bottom: var(--sp-2);
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  .footer-bottom .accent { color: var(--accent); }
  /* Company registration. Its own line so the legal detail never competes
     with the brand line above it, and --fg-dim rather than --muted because
     --muted fails AA against the footer background in dark mode. */
  .footer-legal { margin-top: 6px; color: var(--fg-dim); letter-spacing: .06em; }
  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; }
  }

  /* These elements function as "thumbnails" or code views and intentionally
   stay dark in both themes for visual consistency with the rest of the web. */
[data-theme="light"] .terminal,
[data-theme="light"] .terminal-body,
[data-theme="light"] .tool-visual,
[data-theme="light"] .featured-visual,
[data-theme="light"] .author-avatar,
[data-theme="light"] .author-mark {
  --line: rgba(245, 245, 240, 0.08);
  --line-strong: rgba(245, 245, 240, 0.18);
  --fg: #f5f5f0;
  --fg-dim: #b8b7b1;
  --muted: #6b6a66;
  --accent: #ff3e1f;
  --accent-rgb: 255 62 31;
  background-color: #0a0a0a;
  color: var(--fg);
}
[data-theme="light"] .tool-visual,
[data-theme="light"] .featured-visual {
  /* background-image, NOT the `background` shorthand.
     See docs/CSS_RATIONALE.md § Shared chrome > The stay-dark tint. */
  background-image: linear-gradient(rgb(255 255 255 / 0.015), rgb(255 255 255 / 0.015));
}

/* ─── Services nav dropdown (desktop) ─── */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger {
  font: inherit; font-size: var(--t-2); color: var(--fg-dim); background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s ease;
}
.nav-dd-trigger:hover { color: var(--fg); }
/* Current-page marker on the dropdown trigger. Declarations are copied from
   .nav-links a.active in 4rthur_blog.css so the active state looks the same
   everywhere it appears. */
.nav-dd-trigger.active { color: var(--fg); }
.nav-dd-trigger.active::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  /* See docs/CSS_RATIONALE.md § Service pages > .mm-group-trigger::after. */
  margin-left: 0;
  vertical-align: middle;
}
.nav-dd-caret { font-size: .8em; transition: transform .2s ease; }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret,
.nav-dd[data-open] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: 100%; right: 0; margin-top: 12px;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 20px 50px rgb(0 0 0 / .5);
  overflow: hidden; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* The first dropdown opens rightward: anchored right, it runs off the left edge below ~900px. */
.nav-links > .nav-dd:first-child .nav-dd-panel { left: 0; right: auto; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd[data-open] .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Escape's override; the nav script clears it once the menu is left. */
.nav-dd[data-closed] .nav-dd-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.nav-dd[data-closed] .nav-dd-caret { transform: none; }
.nav-dd-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--fg);
}
.nav-dd-item:last-child { border-bottom: 0; }
.nav-dd-item:hover, .nav-dd-item:focus-visible { background: rgb(var(--accent-rgb) / .06); outline: none; }
.nav-dd-item--promo { background: rgb(var(--accent-rgb) / .07); }
.nav-dd-mark { color: var(--accent); font-size: var(--t-1); padding-top: 3px; flex: 0 0 auto; }
.nav-dd-t { display: block; font-size: var(--t-3); font-weight: 600; line-height: 1.25; }
.nav-dd-tag {
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgb(var(--accent-rgb) / .5);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap;
}
.nav-dd-d { display: block; font-size: var(--t-2); color: var(--fg-dim); margin-top: 2px; line-height: 1.4; }

/* ─── Mobile menu groups ─── */
.mm-group-trigger {
  font: inherit; color: inherit; background: none; border: 0; width: 100%;
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
}
.mm-group-trigger .arr { margin-left: auto; transition: transform .2s ease; }
.mm-group[data-open] > .mm-group-trigger .arr { transform: rotate(180deg); }
.mm-sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.mm-group[data-open] > .mm-sub { max-height: 60vh; }
.mm-sub a { display: flex; gap: 10px; align-items: center; padding: 10px 0 10px 28px; color: var(--fg-dim); text-decoration: none; }
.mm-sub a .mm-mark { color: var(--accent); font-size: var(--t-1); }

/* ─── service page ─── */
.svc-hero { padding: var(--sp-6) 0 var(--sp-4); }
.svc-crumb { font-family: var(--mono); font-size: var(--t-2); color: var(--fg-dim); margin-bottom: 14px; }
.svc-crumb a { color: var(--fg-dim); text-decoration: none; }
.svc-crumb a:hover { color: var(--accent); }
.svc-eyebrow { font-family: var(--mono); font-size: var(--t-2); letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.svc-hero h1 { font-size: var(--t-7); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 16px; }
.svc-hero h1 em { font-family: var(--italic); font-style: italic; color: var(--accent); font-weight: 500; }
.svc-dek { font-size: var(--t-4); color: var(--fg-dim); line-height: 1.55; max-width: 62ch; }
.svc-runs { font-family: var(--mono); font-size: var(--t-2); color: var(--fg-dim); margin: 16px 0; }
.svc-runs b { color: var(--fg); font-weight: 500; }
.svc-runs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(var(--accent-rgb) / .35); }
.svc-runs a:hover { color: var(--accent); }

/* --sp-6, not --sp-5. Separation was never the problem: at 72px the gap was
   already 4.5x the largest gap inside a section. Isolation was. At 72px the
   busiest screen carried 21 text blocks with three headings tied for largest,
   so the eye had no entry point. 120px drops that to 15 blocks and two.
   Measured: past 120px nothing improves and the page just gets longer, and
   changing body or heading size moves neither number. */
.svc-section { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
@media (min-width: 901px) {
  /* Label in a left rail, heading and content beside it. Same 1fr/2fr idiom
     .section-header and the tools page already use, so the whole site keeps
     one content edge. Before this the page was six eyebrow-then-content
     blocks in a 770px column down a 1400px container. */
  .svc-section > .container {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0 var(--sp-5);
    align-items: start;
  }
  .svc-section > .container > * { grid-column: 2; }
  .svc-section > .container > .eyebrow { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .svc-section h2 { margin-top: 0; max-width: 26ch; }
  /* One heading-to-content gap. Each component brought its own margin-top on
     top of the h2's margin-bottom, so the same relationship was spaced five
     different ways down the page: 16 / 32 / 30 / 26 / 16. */
  .svc-section h2 + * { margin-top: 0; }
  .svc-deliverables, .svc-guarantee { max-width: 70ch; }
}
.svc-section .eyebrow { font-family: var(--mono); font-size: var(--t-2); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.svc-section h2 { font-size: var(--t-6); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--sp-3); }
.svc-section h2 em { font-family: var(--italic); font-style: italic; color: var(--accent); }
.svc-body { color: var(--fg-dim); font-size: var(--t-3); line-height: 1.6; max-width: 70ch; }
.pr-link { font-family: var(--mono); font-size: var(--t-2); color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / .35); }
.pr-link:hover { border-bottom-color: var(--accent); }

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.svc-step { border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3); }
.svc-step-n { font-family: var(--mono); font-size: var(--t-1); color: var(--accent); }
.svc-step-t { font-weight: 600; margin: 8px 0 6px; }
.svc-step-d { font-size: var(--t-2); color: var(--fg-dim); line-height: 1.45; }
@media (max-width: 780px) { .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* case study — terminal stays dark in both themes */
.svc-case { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 10px; }
.svc-case-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-2); color: var(--fg-dim); }
.svc-case-meta b { color: var(--accent); }
.svc-case-term { padding: 16px; font-family: var(--mono); font-size: var(--t-2); line-height: 1.7;
  background-color: #0a0a0a; background-image: linear-gradient(rgb(255 255 255 / .015), rgb(255 255 255 / .015)); color: #9fef8f; }
.svc-case-term .c { color: #6a6a6a; }
.svc-case-term .crit { color: var(--accent); font-weight: 600; }
.svc-case-verdict { padding: 14px 16px; font-size: var(--t-3); color: var(--fg); }
.svc-case-verdict em { font-family: var(--italic); font-style: italic; color: var(--accent); }
:root[data-theme="light"] .svc-case-term { --accent: #ff3e1f; --accent-rgb: 255 62 31; background-color: #0a0a0a; background-image: linear-gradient(rgb(255 255 255 / .015), rgb(255 255 255 / .015)); }

/* See docs/CSS_RATIONALE.md § Service pages > .svc-offer. */
.svc-offer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 14px; padding: 22px 24px; border-radius: 12px;
  border: 1px solid rgb(var(--accent-rgb) / .4);
  background-color: rgb(var(--accent-rgb) / .05); }
.svc-offer-free { display: block; font-family: var(--italic); font-style: italic;
  color: var(--accent); font-size: var(--t-7); line-height: 1; }
.svc-offer-was { display: block; margin-top: 7px; font-size: var(--t-2);
  color: var(--fg-dim); text-decoration: line-through; }
.svc-offer-terms { margin-left: auto; text-align: right; max-width: 36ch; }
/* See docs/CSS_RATIONALE.md § Service pages > .svc-offer-badge text. */
.svc-offer-badge { display: inline-block; font-family: var(--mono); font-size: var(--t-1);
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg);
  border: 1px solid rgb(var(--accent-rgb) / .45); border-radius: 999px;
  padding: 3px 10px; }
.svc-offer-terms p { margin-top: 9px; font-size: var(--t-2); color: var(--fg-dim);
  line-height: 1.55; }
@media (max-width: 640px) {
  .svc-offer-terms { margin-left: 0; text-align: left; }
}

/* Two rates, stated. Deliberately NOT a formula — no operators, no worked
   total: the buyer is told the prices, not handed arithmetic. */
.svc-price-cards { display: grid; gap: var(--sp-2); margin-top: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.svc-price-card { padding: var(--sp-3); border-radius: 10px;
  border: 1px solid var(--line); background-color: var(--bg-alt); }
.svc-price-card-l { display: block; font-family: var(--mono); font-size: var(--t-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.svc-price-card-v { display: block; margin-top: 8px; font-size: var(--t-6);
  letter-spacing: -.01em; color: var(--fg); }
.svc-price-card-u { display: block; margin-top: 4px; font-family: var(--mono);
  font-size: var(--t-1); color: var(--fg-dim); }
.svc-price-note { font-size: var(--t-2); color: var(--fg-dim); margin-top: 10px; }
/* margin-top because .eyebrow is inline-flex and carries none of its own —
   the sibling after it owns the gap, the same way .svc-steps does. Without
   it the box butts against the "/ The guarantee" label. */
.svc-guarantee { border: 1px solid rgb(var(--accent-rgb) / .4); border-radius: 12px; padding: var(--sp-3);
  margin-top: 14px;
  background-image: linear-gradient(180deg, rgb(var(--accent-rgb) / .08), transparent); }
.svc-guarantee-t { font-weight: 600; }
.svc-guarantee p { color: var(--fg-dim); font-size: var(--t-3); line-height: 1.55; }

.svc-deliverables { margin: 10px 0 0 18px; color: var(--fg-dim); font-size: var(--t-3); line-height: 1.8; }

.svc-ctaband { text-align: center; padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.svc-ctaband h2 { font-size: var(--t-7); font-weight: 600; margin-bottom: 16px; }
.svc-ctaband h2 em { font-family: var(--italic); font-style: italic; color: var(--accent); }

  /* See docs/CSS_RATIONALE.md § Service pages > The pricing diagram. */
  .pr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
  .pr-head-l { flex: 1 1 520px; }
  .pr-head-l h2 { margin-top: 14px; }
  .pr-lede { margin-top: 16px; max-width: 52ch; color: var(--fg-dim); font-size: var(--t-3); line-height: 1.6; }
  .pr-presets-label { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .pr-presets { display: flex; flex-wrap: wrap; gap: 8px; }
  .pr-pill { border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); background: none; transition: border-color .18s, color .15s; }
  .pr-pill:hover { border-color: rgb(var(--accent-rgb) / .5); color: var(--accent); }
  .pr-pill--bare { border-color: transparent; }

  .pr-body { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 44px; align-items: flex-start; }
  .pr-diagram { flex: 3 1 600px; min-width: 0; display: grid; grid-template-columns: 108px 1fr; column-gap: 20px; }
  .pr-lane { grid-column: 1; padding-top: 15px; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
  .pr-row { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* A card cannot go below ~204px before its stepper and price collide, so the
     rows size to that minimum rather than to a fixed column count. min(100%, …)
     keeps the track from exceeding its container on very narrow screens. */
  .pr-row--3,
  .pr-row--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  .pr-node { display: flex; flex-direction: column; gap: 11px; padding: 13px 13px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-alt); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
  .pr-node:hover { border-color: rgb(var(--accent-rgb) / .4); }
  .pr-node.in-scope { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .3); }
  .pr-node--wide { padding: 15px 16px; gap: 13px; }
  .pr-node-head { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
  /* Stacked header + flex:1 description keep the three server cards' meters,
     steppers and prices on shared baselines. Don't put margin-top:auto on both
     the meter and the stepper — flexbox splits the slack and they go ragged. */
  .pr-node-head--stack { flex-direction: column; align-items: flex-start; gap: 7px; }
  .pr-node-t { font-size: var(--t-3); font-weight: 500; letter-spacing: -.005em; }
  .pr-node--wide .pr-node-t { letter-spacing: -.01em; }
  .pr-row--3 .pr-node-head--stack .pr-node-t,
  .pr-rate { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .pr-node-d { font-size: var(--t-2); line-height: 1.5; color: var(--fg-dim); flex: 1 1 auto; }
  .pr-node-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

  .pr-glyph { flex: 0 0 auto; background: var(--accent); }
  .pr-glyph--web { width: 8px; height: 8px; border-radius: 1px; }
  .pr-glyph--mobile { width: 5px; height: 8px; border-radius: 1.5px; }
  .pr-glyph--binary { width: 7px; height: 7px; transform: rotate(45deg); }
  .pr-glyph--api { width: 8px; height: 8px; border-radius: 50%; }
  .pr-glyph--va { width: 8px; height: 8px; opacity: .4; }
  .pr-glyph--vapt { width: 8px; height: 8px; }
  .pr-glyph--net { width: 9px; height: 9px; border-radius: 50%; background: none; border: 1px solid var(--accent); }

  .pr-meter { height: 3px; border-radius: 2px; background: rgb(var(--fg-rgb) / .07); overflow: hidden; }
  .pr-meter span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .18s; }
  .pr-meter-cap { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); }

  .pr-step { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
  .pr-step button { width: 27px; height: 29px; background: rgb(var(--fg-rgb) / .03); font-family: var(--mono); font-size: var(--t-3); color: var(--fg-dim); transition: color .15s; }
  .pr-step button:hover { color: var(--accent); }
  .pr-step input { width: 40px; padding: 6px 0; border: 0; background: none; text-align: center; font-family: var(--mono); font-size: var(--t-2); font-weight: 500; color: var(--fg); }
  .pr-node--wide .pr-step button { width: 30px; height: 32px; }
  .pr-node--wide .pr-step input { width: 52px; font-size: var(--t-3); }
  .pr-price { font-family: var(--mono); font-size: var(--t-2); font-weight: 500; color: var(--accent); white-space: nowrap; }
  .pr-node--wide .pr-price { font-size: var(--t-4); }
  .pr-row--3 .pr-price,
  .pr-row--2 .pr-price { font-size: var(--t-3); }
  .pr-price.zero { color: var(--muted); }


  /* Connectors are 1px CSS rules, no SVG. Bus sits at 24px; drops run 0->24,
     trunks 24->48. Column centres match the 3-up grid's 16px gaps:
     centre = (W - (n-1)*gap) / 2n. Recompute if the gap changes. */
  .pr-conn { grid-column: 2; position: relative; height: 48px; }
  .pr-conn i, .pr-conn b, .pr-conn u { position: absolute; background: var(--line-strong); }
  .pr-conn i { top: 0; width: 1px; height: 24px; }
  .pr-conn i:nth-of-type(1) { left: calc(16.667% - 5.33px); }
  .pr-conn i:nth-of-type(2) { left: 50%; }
  .pr-conn i:nth-of-type(3) { right: calc(16.667% - 5.33px); }
  .pr-conn b { top: 24px; left: calc(16.667% - 5.33px); right: calc(16.667% - 5.33px); height: 1px; }
  .pr-conn u { top: 24px; left: 50%; width: 1px; height: 24px; }
  /* 2-column lane: centre = (W - gap) / 4 = 25% - 4px at a 16px gap. */
  .pr-conn--2 i:nth-of-type(1) { left: calc(25% - 4px); right: auto; }
  .pr-conn--2 i:nth-of-type(2) { left: auto; right: calc(25% - 4px); }
  .pr-conn--2 b { left: calc(25% - 4px); right: calc(25% - 4px); }
  .pr-conn--diverge i { top: 24px; }
  .pr-conn--diverge b { top: 24px; }
  .pr-conn--diverge u { top: 0; }
  .pr-conn::after { content: ''; position: absolute; left: calc(50% - 1px); top: 24px; width: 3px; height: 3px; background: var(--accent); animation: prFlow 2.6s linear infinite; }
  .pr-conn--diverge::after { top: 0; }
  @keyframes prFlow { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px); } }
  @media (prefers-reduced-motion: reduce) { .pr-conn::after { animation: none; } }

  .pr-rail { flex: 1 1 320px; min-width: 280px; position: sticky; top: calc(var(--nav-h) + var(--sp-3)); /* measured wrap point: 1310px */ align-self: flex-start; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); }
  @media (max-width: 1309px) { .pr-rail { position: static; } }
  .pr-rail-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .pr-rail-t { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .pr-rail-n { font-family: var(--mono); font-size: var(--t-1); color: var(--muted); }
  /* auto-fit so the rail doesn't look empty once it wraps full-width under the
     diagram: one column in the sidebar, several across when wide. */
  .pr-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 15px 26px; padding: 18px 0; }
  .pr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .pr-line-n { font-size: var(--t-2); font-weight: 500; }
  .pr-line-m { display: block; font-family: var(--mono); font-size: var(--t-1); color: var(--muted); margin-top: 2px; }
  .pr-line-p { font-family: var(--mono); font-size: var(--t-2); color: var(--fg-dim); white-space: nowrap; }
  .pr-empty { font-size: var(--t-2); color: var(--fg-dim); }
  .pr-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 18px 0 4px; border-top: 1px solid var(--line); }
  .pr-total-l { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pr-total-v { font-family: var(--mono); font-size: var(--t-6); font-weight: 500; letter-spacing: -.02em; color: var(--accent); }
  .pr-fine { font-family: var(--mono); font-size: var(--t-1); line-height: 1.6; color: var(--muted); padding: 14px 0 18px; }
  .pr-ctas { display: flex; flex-direction: column; gap: 9px; }
  .pr-ctas .btn { justify-content: center; }

  .pr-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); }
  .pr-note-t { display: block; font-family: var(--mono); font-size: var(--t-1); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .pr-notes p { font-size: var(--t-2); line-height: 1.6; color: var(--fg-dim); }

  /* See docs/CSS_RATIONALE.md § Service pages > The pricing diagram. */
  @media (max-width: 899px) {
    .pr-diagram { grid-template-columns: minmax(0, 1fr); }
    .pr-lane { grid-column: 1; padding-top: 0; }
    .pr-row { grid-column: 1; }
    .pr-conn { display: none; }
    .pr-rail { position: static; }
  }
  @media (max-width: 360px) {
    .pr-rail { min-width: 0; }
  }

  /* ── comparison table ───────────────────────────────── */
  /* DELIBERATE DIVERGENCE from the 4rthur_main.css copy — do NOT resync.
     See docs/CSS_RATIONALE.md § Service pages > .table-compare is a deliberate divergence. */
  .table-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    margin-top: 40px;
  }
  .table-compare .row-head {
    padding: 32px 40px;
    font-family: var(--mono);
    font-size: var(--t-1);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .table-compare .row-head:first-child { border-right: 1px solid var(--line); }
  .table-compare .row-head.highlight {
    background: var(--bg-alt);
    color: var(--accent);
    border-right: 1px solid var(--line);
  }
  .table-compare .cell {
    padding: 28px 40px;
    font-size: var(--t-4);
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
    color: var(--fg-dim);
  }
  .table-compare .cell:nth-child(odd) {
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--italic);
    font-style: italic;
    font-size: var(--t-5);
  }
  .table-compare .cell.highlight {
    color: var(--fg);
    font-style: normal;
    font-family: var(--sans);
    background: rgb(var(--accent-rgb) / 0.03);
  }
  .table-compare .cell:nth-last-child(-n+2) { border-bottom: none; }
  @media (max-width: 900px) {
  .table-compare {
    grid-template-columns: 1fr;
    border: none;
    margin-top: 32px;
  }

  /* hide the duplicate column headers on mobile — labels go inline instead */
  .table-compare .row-head { display: none; }

  /* each cell becomes a self-labeled, full-width row */
  .table-compare .cell {
    padding: 36px 20px 22px;
    border: 1px solid var(--line);
    border-bottom: none;
    border-right: none !important;
    position: relative;
    font-size: var(--t-4);
  }

  /* mono "/ label" sitting above each value */
  .table-compare .cell::before {
    position: absolute;
    top: 14px;
    left: 20px;
    font-family: var(--mono);
    font-size: var(--t-1);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
  }
  .table-compare .cell:nth-child(odd) {
    font-size: var(--t-4);
  }
  .table-compare .cell:nth-child(odd)::before {
    content: '/ Masked version';
    color: var(--muted);
  }
  .table-compare .cell.highlight::before {
    content: '/ Full version';
    color: var(--accent);
  }

  /* close the bottom of each old/new pair, then space pairs apart */
  .table-compare .cell.highlight {
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .table-compare .cell.highlight:last-child {
    margin-bottom: 0;
  }

  /* cancel the desktop "no bottom border on last 2" rule */
  .table-compare .cell:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}