/* ==========================================================================
   Everyday Upgrades Inc — brand system v1.0
   Tokens transcribed from "Everyday Upgrades Brand v3" handoff.
   Mint (#5FE0C0) is a STATUS color only — never a brand fill.
   Product keys and figures are always set in IBM Plex Mono.
   ========================================================================== */

/* Fonts are self-hosted. Google Fonts was a render-blocking request to a third
   origin, and the H1 — the LCP element on most pages — is set in Plex Sans, so
   that latency landed directly on Largest Contentful Paint.

   Plex Sans ships as a variable font with a 100–700 weight axis, so one 40KB
   file covers 400/450/500/600/700. Plex Mono is static, one file per weight. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core roles */
  --signal-blue: #1a4fd6;
  --signal-blue-hover: #12379c;
  --mint: #5fe0c0;
  --deep-navy: #0f1c33;
  --slate: #5c6b85;
  --mist: #f4f7fb;

  /* Blue ramp */
  --blue-50: #eaf0fd;
  --blue-100: #c3d4f8;
  --blue-300: #7fa2ef;
  --blue-500: #1a4fd6;
  --blue-700: #12379c;
  --blue-900: #0b2265;

  /* Light theme roles */
  --page: #f4f7fb;
  --surface: #ffffff;
  --surface-sunken: #eef2f7;
  --text: #0f1c33;
  --text-2: #43536f;
  --text-3: #5c6b85;
  --border: #e2e7ef;
  --border-strong: #c9d3e4;
  --rule: #dde4ee;
  --accent: #1a4fd6;
  --accent-soft: #eaf0fd;
  --on-accent: #ffffff;

  /* Status tints */
  --ok-bg: #e8f8f3;
  --ok-fg: #0d7a63;
  --info-bg: #eaf0fd;
  --info-fg: #12379c;
  --warn-bg: #fdf0e8;
  --warn-fg: #a1500f;

  /* Type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 28, 51, 0.05);
  --shadow-md: 0 4px 14px rgba(15, 28, 51, 0.07), 0 1px 2px rgba(15, 28, 51, 0.04);
  --shadow-lg: 0 24px 60px -18px rgba(15, 28, 51, 0.22), 0 2px 8px rgba(15, 28, 51, 0.05);
  --shadow-hero: 0 60px 120px -40px rgba(11, 34, 101, 0.38), 0 8px 24px -8px rgba(15, 28, 51, 0.1);

  --shell: 1200px;
  --gutter: 32px;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-inner: 10px;
}

/* Light is the default appearance — it does not follow OS preference. Dark
   only applies once the reader explicitly stamps [data-theme="dark"] (see
   the pre-paint script in layout.html, which also persists the choice). */
:root[data-theme="dark"] {
  --page: #0a1425;
  --surface: #16243d;
  --surface-sunken: #101d33;
  --text: #ffffff;
  --text-2: #c9d3e4;
  --text-3: #8b9ab5;
  --border: #1e2d47;
  --border-strong: #2b3d5c;
  --rule: #1e2d47;
  --accent: #4a7ef0;          /* blue lifts for contrast on dark */
  --accent-soft: rgba(74, 126, 240, 0.14);
  --on-accent: #0a1425;
  --ok-bg: rgba(95, 224, 192, 0.14);
  --ok-fg: #5fe0c0;
  --info-bg: rgba(74, 126, 240, 0.16);
  --info-fg: #7fa2ef;
  --warn-bg: rgba(255, 176, 112, 0.14);
  --warn-fg: #f0b784;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
  --shadow-hero: 0 60px 120px -40px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------------------ primitives -- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.num { font-variant-numeric: tabular-nums; }
.rule { height: 1px; background: var(--rule); border: 0; }

.eyebrow { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.eyebrow .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); }
.eyebrow .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.eyebrow .line { flex: 1; height: 1px; background: var(--rule); }

section { padding: 104px 0; }
.section-head { max-width: 62ch; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
.section-head p { margin-top: 16px; color: var(--text-2); font-size: 17px; line-height: 1.65; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  padding: 12px 20px; border-radius: var(--radius-sm);
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(11,34,101,.24); }
.btn-primary:hover { background: var(--signal-blue-hover); box-shadow: 0 6px 18px -6px rgba(26,79,214,.6); }
:root[data-theme="dark"] .btn-primary:hover { background: #7fa2ef; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: 20px;
}
.tag-ok { background: var(--ok-bg); color: var(--ok-fg); }
.tag-info { background: var(--info-bg); color: var(--info-fg); }
.tag-warn { background: var(--warn-bg); color: var(--warn-fg); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* ---------------------------------------------------------------- header -- */
.topbar {
  background: var(--deep-navy); color: #8b9ab5;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.topbar .shell { display: flex; align-items: center; justify-content: center; gap: 10px; height: 34px; text-align: center; }
.topbar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 0 3px rgba(95,224,192,.16); }
.topbar a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }

header.site {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
header.site.stuck { border-bottom-color: var(--border); background: color-mix(in srgb, var(--page) 92%, transparent); }
header.site .shell { display: flex; align-items: center; gap: 32px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--text); }
.brand .wm { font-size: 17px; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; }
nav.main { display: flex; gap: 28px; }
nav.main a {
  position: relative; font-size: 14.5px; color: var(--text-2); font-weight: 450;
  padding: 4px 0; transition: color .16s ease; white-space: nowrap;
}
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
nav.main a:hover { color: var(--text); }
nav.main a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  transition: color .16s ease, border-color .16s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
.nav-toggle { display: none; }

/* Seven nav items, the wordmark and the CTA stop fitting on one line at about
   1040px, so the menu collapses to the hamburger earlier than the rest of the
   mobile layout does. Duplicated from the 760px block rather than moved, so
   the small-screen rules there keep working on their own. */
@media (max-width: 1040px) {
  nav.main, .header-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  header.site.open nav.main {
    display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
    gap: 0; background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 18px; box-shadow: var(--shadow-lg);
  }
  header.site.open nav.main a { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; padding: 88px 0 0; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 720px;
  background:
    radial-gradient(50% 60% at 22% 12%, rgba(26,79,214,.13), transparent 70%),
    radial-gradient(38% 50% at 82% 4%, rgba(95,224,192,.13), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(78% 62% at 50% 6%, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
  -webkit-mask-image: radial-gradient(78% 62% at 50% 6%, #000 0%, rgba(0,0,0,.55) 45%, transparent 88%);
  opacity: .5;
}
.hero > .shell { position: relative; z-index: 1; }
.hero-copy { max-width: 780px; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px 6px 8px;
  box-shadow: var(--shadow-sm);
}
.hero .kicker .pip { width: 16px; height: 16px; border-radius: 5px; background: var(--signal-blue); flex: none; }
.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(40px, 6.2vw, 72px);
  letter-spacing: -0.04em; line-height: 1.02;
}
.hero h1 .accent { color: var(--accent); }
.hero .lede { margin-top: 24px; max-width: 60ch; font-size: 18.5px; line-height: 1.62; color: var(--text-2); }
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-cta .note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-left: 6px; }

.stat-row {
  margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
/* Symmetric horizontal padding so text is not flush against the divider on its
   left. First and last cells stay flush to the shell edges. */
.stat { padding: 22px 24px; border-right: 1px solid var(--rule); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { display: block; margin-top: 5px; font-size: 13px; color: var(--text-3); }

/* -------------------------------------------------------- product shots -- */
.shot-wrap { margin-top: 64px; padding-bottom: 104px; perspective: 1600px; }
.shot {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-hero);
}
.shot-bar {
  display: flex; align-items: center; gap: 28px;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.shot-bar .sbrand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 14px; font-weight: 600; letter-spacing: -0.025em; }
.shot-nav { display: flex; gap: 22px; font-size: 13.5px; color: var(--text-2); }
.shot-nav .on { color: var(--accent); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 3px; }
.shot-btn { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); border: 0; background: var(--accent); color: var(--on-accent); }
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 20px; }
.lic {
  border: 1px solid var(--border); border-radius: var(--radius-inner); padding: 18px;
  display: flex; flex-direction: column; gap: 12px; background: var(--surface);
}
.lic-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lic-top > span:first-child { font-size: 12.5px; color: var(--text-3); }
.lic-fig { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lic-fig small { color: var(--text-3); font-size: 14px; font-weight: 400; }
.meter { height: 5px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.meter i.done { background: var(--mint); }
.lic-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }

/* ------------------------------------------------------------- vendors -- */
.vendors { padding: 0 0 96px; }
.vendors .lbl { text-align: center; margin-bottom: 26px; }
.vendor-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.vendor-strip div {
  padding: 26px 12px; text-align: center; border-right: 1px solid var(--border);
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-3);
  transition: color .2s ease, background-color .2s ease;
}
.vendor-strip div:last-child { border-right: 0; }
.vendor-strip div:hover { color: var(--text); background: var(--accent-soft); }
.disclaimer { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-3); }

/* --------------------------------------------------------------- pillars -- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.pillar:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pillar .ic {
  width: 40px; height: 40px; border-radius: var(--radius-inner);
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.pillar h3 { font-size: 19px; letter-spacing: -0.025em; }
.pillar p { color: var(--text-2); font-size: 14.5px; line-height: 1.62; }
.pillar ul { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.pillar li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-2); align-items: flex-start; }
.pillar li svg { flex: none; margin-top: 4px; color: var(--accent); }

/* -------------------------------------------------------------- feature -- */
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.feature + .feature { margin-top: 96px; padding-top: 96px; border-top: 1px solid var(--rule); }
.feature.flip .feat-copy { order: 2; }
.feature h3 { font-size: clamp(26px, 3vw, 34px); }
.feature p { margin-top: 16px; color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.feat-list { margin-top: 26px; display: flex; flex-direction: column; }
.feat-list li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--text-2); }
.feat-list li:last-child { border-bottom: 1px solid var(--rule); }
.feat-list b { color: var(--text); font-weight: 600; }
.feat-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}

/* certificate */
.cert { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cert-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cert-head .t { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; margin-top: 5px; }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.keys span {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.05em;
  text-align: center; padding: 11px 4px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text);
}
.cert-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cert-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cert-meta .v { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; margin-top: 4px; }
.cert-actions { display: flex; gap: 10px; }

/* renewal table — scrolls inside its own panel so the page never scrolls sideways */
.tbl-scroll { overflow-x: auto; }
.tbl { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); white-space: nowrap;
}
.tbl td { padding: 15px 16px; border-bottom: 1px solid var(--rule); color: var(--text-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--text); font-weight: 500; }
.tbl .d { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr { transition: background-color .16s ease; }
.tbl tbody tr:hover { background: var(--accent-soft); }

/* ------------------------------------------------------------ estimator -- */
.est { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; overflow: hidden; }
.est-form { padding: 36px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.seg { display: flex; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: 0; background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 500; padding: 8px 6px; border-radius: 4px;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); font-weight: 600; }
select, input[type="text"], input[type="email"], textarea {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 13px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
select:focus, input:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-head { display: flex; justify-content: space-between; align-items: baseline; }
.range-head output { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

.est-out { padding: 36px; display: flex; flex-direction: column; gap: 20px; background: var(--surface-sunken); }
.est-total { display: flex; align-items: baseline; gap: 10px; }
.est-total .amt { font-size: 46px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.est-total .per { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.est-lines { display: flex; flex-direction: column; }
.est-lines div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--text-2); }
.est-lines div:last-child { border-bottom: 0; }
.est-lines .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.est-lines .save .v { color: var(--ok-fg); }
.est-note { font-size: 12px; color: var(--text-3); line-height: 1.55; }

/* ------------------------------------------------------------- process -- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.step { padding: 30px 26px; border-right: 1px solid var(--rule); position: relative; }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.step.lit::before { width: 100%; }
.step .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--accent); }
.step h4 { margin-top: 14px; font-size: 17px; letter-spacing: -0.02em; }
.step p { margin-top: 9px; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.step .t { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* ---------------------------------------------------------- comparison -- */
.compare { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 17px 22px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--rule); }
.compare thead th { background: var(--surface-sunken); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.compare thead th.us { color: var(--accent); }
.compare tbody td:first-child { color: var(--text); font-weight: 500; }
.compare tbody td { color: var(--text-2); }
.compare td.us { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.compare tr:last-child td { border-bottom: 0; }
.compare td.us .ck { color: var(--ok-fg); }

/* ---------------------------------------------------------------- quote -- */
.quote-band { background: var(--deep-navy); border-radius: var(--radius); padding: 56px; position: relative; overflow: hidden; }
:root[data-theme="dark"] .quote-band { background: var(--surface); border: 1px solid var(--border); }
.quote-band::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(95,224,192,.16), transparent 65%);
}
.quote-band blockquote {
  position: relative; margin: 0; max-width: 46ch;
  font-size: clamp(22px, 2.7vw, 30px); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.32; color: #fff;
}
:root[data-theme="dark"] .quote-band blockquote { color: var(--text); }
.quote-band .who { position: relative; margin-top: 26px; display: flex; align-items: center; gap: 13px; }
.quote-band .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-300), var(--signal-blue)); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 600; }
.quote-band .who b { display: block; font-size: 14px; color: #fff; font-weight: 600; }
:root[data-theme="dark"] .quote-band .who b { color: var(--text); }
.quote-band .who span { font-size: 13px; color: #8b9ab5; }

/* ------------------------------------------------------------------ faq -- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0; display: flex; gap: 20px;
  align-items: center; justify-content: space-between;
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.02em; color: var(--text);
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .pm { flex: none; width: 20px; height: 20px; position: relative; }
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.faq summary .pm::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq summary .pm::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq details[open] summary .pm::after { transform: rotate(90deg) scaleX(0); }
.faq details p { padding: 0 44px 22px 0; color: var(--text-2); font-size: 15px; line-height: 1.68; }

/* ------------------------------------------------------------------ cta -- */
.cta { background: var(--deep-navy); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
:root[data-theme="dark"] .cta { background: #060e1c; border-top: 1px solid var(--border); }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 70% at 12% 100%, rgba(26,79,214,.4), transparent 70%),
    radial-gradient(34% 60% at 88% 0%, rgba(95,224,192,.14), transparent 70%);
}
.cta::after {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent 75%);
}
.cta .shell { position: relative; z-index: 1; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.cta h2 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -0.04em; }
.cta .lede { margin-top: 18px; color: #c9d3e4; font-size: 17px; line-height: 1.65; max-width: 46ch; }
.cta-points { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.cta-points li { display: flex; gap: 11px; align-items: center; font-size: 14.5px; color: #c9d3e4; }
.cta-points svg { color: var(--mint); flex: none; }

.qform {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 30px; backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 16px;
}
.qform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qform label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8b9ab5; display: block; margin-bottom: 7px; }
.qform input, .qform select, .qform textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
.qform input::placeholder, .qform textarea::placeholder { color: #6d7f9c; }
.qform select { color: #fff; }
.qform select option { background: var(--deep-navy); color: #fff; }
.qform input:focus, .qform select:focus, .qform textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(95,224,192,.16); }
.qform .btn-primary { background: #fff; color: var(--deep-navy); justify-content: center; }
.qform .btn-primary:hover { background: var(--mint); box-shadow: 0 8px 24px -8px rgba(95,224,192,.5); }
.qform .fine { font-size: 11.5px; color: #8b9ab5; line-height: 1.5; }
.qform .ok { display: none; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mint); }
.qform.sent .ok { display: flex; }

/* --------------------------------------------------------------- footer -- */
footer.site { background: var(--page); border-top: 1px solid var(--border); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; }
.foot-brand p { margin-top: 16px; font-size: 14px; color: var(--text-3); max-width: 34ch; line-height: 1.6; }
.foot-col h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 16px; }
.foot-col li + li { margin-top: 11px; }
.foot-col a { font-size: 14px; color: var(--text-2); transition: color .16s ease; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-3);
}
.foot-bottom .legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-bottom a { color: var(--text-3); }
.foot-bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------- reveal -- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .feature, .faq-wrap, .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature.flip .feat-copy { order: 0; }
  .est { grid-template-columns: 1fr; }
  .est-form { border-right: 0; border-bottom: 1px solid var(--border); }
  .pillars { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .vendor-strip { grid-template-columns: repeat(3, 1fr); }
  .vendor-strip div:nth-child(3n) { border-right: 0; }
  .vendor-strip div:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .shot-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  /* At two columns the row edges move: odd cells are now row-left, even are
     row-right, so the flush sides have to follow. */
  .step:nth-child(2n+1) { padding-left: 0; padding-right: 26px; }
  .step:nth-child(2n) { border-right: 0; padding-left: 26px; padding-right: 0; }
}
@media (max-width: 760px) {
  section { padding: 72px 0; }
  nav.main, .header-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  header.site.open nav.main {
    display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
    gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px var(--gutter) 18px;
    box-shadow: var(--shadow-lg);
  }
  header.site.open nav.main a { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2n+1) { padding-left: 0; padding-right: 24px; }
  .stat:nth-child(2n) { border-right: 0; padding-left: 24px; padding-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
  .hero { padding-top: 56px; }
  .shot-nav, .shot-bar .shot-btn { display: none; }
  .keys { grid-template-columns: repeat(3, 1fr); }
  .cert-meta { grid-template-columns: 1fr 1fr; }
  .quote-band { padding: 34px; }
  .qform .row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 620px; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
}
:root[data-theme="dark"] { --mark-tile: #ffffff; --mark-stroke: #1a4fd6; }

/* ------------------------------------------------------- footer contact -- */
.foot-contact {
  margin-top: 20px; display: flex; flex-direction: column; gap: 7px;
  font-style: normal; font-size: 13.5px; line-height: 1.6; color: var(--text-3);
}
.foot-contact a { color: var(--text-2); transition: color .16s ease; }
.foot-contact a:hover { color: var(--accent); }
/* Address block links to the Google Business listing; keep it reading as an
   address rather than a link until hover. Same specificity as the rule above,
   declared after it, so it wins without !important. */
.foot-contact .foot-addr { color: var(--text-3); }
.foot-contact .foot-addr:hover { color: var(--accent); }

.foot-social { margin-top: 18px; display: flex; gap: 10px; }
.foot-social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.foot-social a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.foot-social svg { flex: none; }
.cta-direct { margin-top: 26px; font-size: 14px; color: #8b9ab5; line-height: 1.6; }
.cta-direct a { color: var(--mint); border-bottom: 1px solid rgba(95, 224, 192, .35); }
.cta-direct a:hover { border-bottom-color: var(--mint); }

/* ---------------------------------------------------------- form states -- */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qform .err {
  display: none; align-items: center; gap: 9px;
  font-size: 13.5px; line-height: 1.5; color: #ffb784;
}
.qform.failed .err { display: flex; }
.qform.sending button[type="submit"] { opacity: .6; pointer-events: none; }
.qform input[aria-invalid="true"], .qform select[aria-invalid="true"] { border-color: #ffb784; }

/* ==========================================================================
   Content pages — about, contact, and the legal set.
   A single measured column; the homepage keeps its own wider composition.
   ========================================================================== */
.page { padding: 64px 0 104px; }
.page-head { max-width: 46rem; padding-bottom: 40px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; }
.page-head h1 {
  font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.04em; line-height: 1.05;
  text-wrap: balance; margin-top: 18px;
}
.page-head .lede { margin-top: 22px; font-size: 18.5px; line-height: 1.62; color: var(--text-2); max-width: 60ch; }
.page-head .updated { margin-top: 24px; }

.crumbs { display: flex; gap: 9px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs span:last-child { color: var(--accent); }

/* Running text sits near 65 characters; headings hang off the same measure. */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.025em;
  margin: 48px 0 14px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 17px; letter-spacing: -0.02em; margin: 30px 0 10px; color: var(--text); }
.prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.72; color: var(--text-2); }
.prose ul { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.prose ul li {
  position: relative; padding-left: 22px; font-size: 16px; line-height: 1.68; color: var(--text-2);
}
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.prose a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code {
  font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 4px;
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text);
}

.callout {
  padding: 20px 22px; margin: 0 0 32px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 15.5px; line-height: 1.65; color: var(--text-2);
}
.callout strong { color: var(--text); }

.legal-note {
  margin-top: 40px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px dashed var(--border-strong); background: var(--surface);
  font-size: 14px !important; line-height: 1.6; color: var(--text-3) !important;
}

.facts { display: flex; flex-direction: column; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: 12rem 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }

/* contact cards */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.contact-card { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.contact-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.contact-big {
  font-size: 19px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.35;
  color: var(--accent); word-break: break-word;
}
.contact-addr { font-style: normal; color: var(--text); font-size: 16px; font-weight: 500; }
/* The address links out to the Google Business listing. Kept in body colour
   rather than accent — three lines of link blue reads as heavy next to the
   email and phone — with the accent and the outbound glyph on hover. */
.contact-addr a { color: inherit; transition: color .16s ease; }
.contact-addr a:hover { color: var(--accent); }
/* The global reset sets `svg { display: block }`, which would drop this glyph
   onto its own line — put it back inline so it trails the last address line. */
.contact-addr .ext {
  display: inline-block; margin-left: 7px; vertical-align: baseline;
  opacity: .45; transition: opacity .16s ease;
}
.contact-addr a:hover .ext { opacity: 1; }
.contact-card p { font-size: 14px; line-height: 1.6; color: var(--text-3); margin: 0; }

.map-embed { overflow: hidden; margin-bottom: 56px; }
.map-embed iframe {
  display: block; width: 100%; height: 320px; border: 0; filter: grayscale(0.15);
}
/* Facade shown until the reader opts into loading Google Maps. */
.map-facade {
  min-height: 320px; padding: 32px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; background: var(--surface-sunken);
}
.map-facade .map-pin { color: var(--accent); }
.map-addr {
  font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text);
}
.map-note {
  margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3); max-width: 46ch;
}

/* stat substantiation line under the hero figures */
.stat-basis {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); max-width: 74ch;
}

/* commitments band — replaces the removed testimonial */
.commit-band {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px 36px;
}
.commit-head { max-width: 62ch; }
.commit-head .lbl {
  display: block; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.commit-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.commit-list {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px 28px;
}
.commit-list li { display: grid; grid-template-columns: 16px 1fr; gap: 4px 10px; align-items: start; }
.commit-list svg { grid-row: 1 / span 2; margin-top: 4px; color: var(--ok-fg); }
.commit-list b { font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.commit-list span { font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.commit-foot { margin: 26px 0 0; font-size: 14px; color: var(--text-2); }

/* product comparison table on the Microsoft 365 hub */
.scroll-x { overflow-x: auto; margin: 30px 0 44px; }
.compare-tbl {
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14.5px;
}
.compare-tbl th, .compare-tbl td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.compare-tbl thead th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-sunken); white-space: nowrap;
}
.compare-tbl tbody tr:last-child td { border-bottom: 0; }
.compare-tbl td { color: var(--text-2); }
.compare-tbl td:first-child { font-weight: 500; color: var(--text); white-space: nowrap; }
.compare-tbl td.d { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- reviews -- */
.reviews {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px;
}
.review { padding: 28px 26px; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.review:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.review blockquote {
  margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text);
  letter-spacing: -0.005em;
}
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption {
  margin-top: auto; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.review .av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; flex: none;
}
.review .who { display: flex; flex-direction: column; min-width: 0; }
.review .who b { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.review .who span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.review .src {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface-sunken);
  border: 1px solid var(--rule); border-radius: 20px; padding: 3px 8px; white-space: nowrap;
}
@media (max-width: 1024px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .reviews { grid-template-columns: 1fr; } }

/* contextual link appended to a generated FAQ answer */
.faq-more { display: inline-block; margin-left: 4px; white-space: nowrap; font-weight: 500; }
.faq-page { margin-bottom: 56px; }

.page-cta {
  margin-top: 64px; padding: 32px 36px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.page-cta h2 { font-size: 23px; letter-spacing: -0.03em; }
.page-cta p { margin-top: 7px; font-size: 15px; color: var(--text-2); }

nav.main a[aria-current="page"] { color: var(--accent); }
nav.main a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page { padding: 40px 0 72px; }
  .facts > div { grid-template-columns: 1fr; gap: 5px; }
  .page-cta { flex-direction: column; align-items: flex-start; padding: 26px; }
}

/* ---------------------------------------------------------------- careers -- */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0 8px; }
.role { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.role:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.role-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.role-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; flex: 1; }
.role-meta {
  margin: 0; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.role p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.role .btn { margin-top: 6px; }

.roles-empty {
  margin: 22px 0 8px; padding: 26px 28px;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.roles-empty .lbl {
  margin: 0 0 10px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.roles-empty p:last-child { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }

@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }

/* Microsoft Solutions Partner badge. Sits on a solid tile because the badge
   artwork assumes a light ground — on the dark theme it would otherwise sit
   directly on navy, which Microsoft's brand guidelines do not permit. */
/* The tile lives on the wrapper, not the image. box-sizing: border-box from
   the reset means padding on the <img> would eat into its declared height and
   shrink the artwork instead of surrounding it. */
.foot-partner {
  margin-top: 20px; display: inline-block;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.foot-partner img { height: 34px; width: auto; display: block; }