/* =========================================================
   Esqio.ai — Design System
   Tokens · Reset · Typography · Components · Layout
   ========================================================= */

/* ---- Self-hosted variable fonts (no Google Fonts CDN dependency) ----
   Fonts live at /assets/fonts/. All three are variable WOFF2s that cover
   the weight range (plus opsz for Fraunces). font-display:swap keeps text
   visible immediately using a system-font fallback until the file arrives. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-italic-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Ink scale */
  --ink:      #0f1623;
  --ink-2:    #303a52;  /* deepened for better body contrast */
  --ink-3:    #546079;  /* deepened for secondary text readability (was #6b7a99) */
  --ink-4:    #8795b0;

  /* Surfaces */
  --bg:       #f7f7fb;    /* page background — off-white lavender */
  --surface:  #ffffff;
  --surface-2:#f0f1f8;
  --surface-3:#e6e8f2;

  /* Brand */
  --accent:       #3b5bdb;   /* primary indigo/blue */
  --accent-2:     #4c6ef5;
  --accent-dark:  #2c44b0;
  --accent-light: #e8eeff;
  --accent-soft:  #f2f5ff;

  /* Accent teal/cyan from circuit ring */
  --teal:         #14b8a6;
  --teal-2:       #5de8c8;
  --teal-light:   #d9f7f1;

  --purple:       #7048e8;
  --purple-light: #ede9fe;

  --green:        #0ca678;
  --green-light:  #d3f9ee;

  --amber:        #f08c00;
  --amber-light:  #fff3cd;

  /* Lines */
  --border:   #e4e6f0;
  --border-2: #d0d5e3;
  --hairline: rgba(15,22,35,0.06);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 32px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,22,35,0.04);
  --shadow-sm: 0 2px 8px rgba(15,22,35,0.05);
  --shadow:    0 4px 20px rgba(15,22,35,0.07);
  --shadow-lg: 0 12px 40px rgba(15,22,35,0.10);
  --shadow-xl: 0 20px 60px rgba(15,22,35,0.14);

  /* Typography */
  --font-display: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', ui-serif, Georgia, serif; /* editorial accent only */

  /* Layout */
  --content-max: 1320px;
  --pad-x: clamp(24px, 5vw, 80px);
  --nav-h: 84px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.04em; }
h2 { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.0;  letter-spacing: -0.035em; }
h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: 18px; letter-spacing: -0.01em; font-weight: 600; }
em { font-style: normal; color: var(--accent); }
h1 em, h2 em { color: var(--accent); font-style: normal; }
/* Optional editorial serif accent — opt-in via .serif */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; font-variation-settings: "opsz" 144; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.no-line::before { display: none; }

.lead {
  font-size: clamp(17px, 1.25vw, 21px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 640px;
  font-weight: 400;
}
body { font-feature-settings: "ss01", "cv11"; }

/* ---- Layout ---- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  width: 100%;
}
section {
  padding: clamp(80px, 9vw, 140px) 0;
  scroll-margin-top: calc(var(--nav-h) + 16px);
  /* Defer offscreen work + image fetching in browsers that support it.
     Browsers that don't support content-visibility will ignore the two lines below
     with no effect on layout. */
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* Keep above-the-fold sections rendered immediately so LCP isn't delayed and
   top padding under the fixed nav computes correctly. `.page-hero` is the
   first section on every subpage, so it must stay visible. */
.photo-hero,
.page-hero,
.objection-ribbon,
#home { content-visibility: visible; contain-intrinsic-size: none; }
section.tight { padding: clamp(48px, 5vw, 72px) 0; }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }

/* ---- Pills & tags ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--accent-light);
  color: var(--accent);
  letter-spacing: 0.01em;
}
.pill.teal { background: var(--teal-light); color: var(--teal); }
.pill.purple { background: var(--purple-light); color: var(--purple); }
.pill.green { background: var(--green-light); color: var(--green); }
.pill.amber { background: var(--amber-light); color: var(--amber); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
  white-space: nowrap;
  cursor: pointer;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn-link { color: var(--accent); padding: 8px 0; }
.btn-link:hover { color: var(--accent-dark); gap: 10px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(247,247,251,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.site-nav.scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo { flex-shrink: 0; display: flex; align-items: center; padding-left: 4px; }
.nav-logo svg,
.nav-logo img { height: 58px; width: auto; display: block; transition: transform .2s; }
.nav-logo:hover svg,
.nav-logo:hover img { transform: scale(1.02); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-item { position: relative; }
.nav-item > button,
.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.nav-item > button:hover,
.nav-item > a:hover,
.nav-item.open > button { color: var(--ink); background: var(--surface); }
.nav-caret { width: 12px; height: 12px; transition: transform .2s; }
.nav-item.open .nav-caret { transform: rotate(180deg); }

.nav-cta {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
}

/* --- Mega menu dropdown --- */
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 460px;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 110;
}
.nav-item.open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-grid { display: grid; gap: 2px; }

.mega-link {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  column-gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: background .15s ease;
  align-items: center;
}
.mega-link:hover,
.mega-link:focus-visible { background: var(--surface-2); outline: none; }

/* Icon tile — centered vertically with the title+desc block */
.mega-link .mega-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.mega-link:hover .mega-ico { background: var(--accent); color: #fff; }
.mega-link .mega-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Force the inner wrapper <span> to stack its two children on separate lines.
   Without this the title + desc run together as one inline line-run. */
.mega-link > span:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mega-link .mega-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.mega-link .mega-desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.45;
  font-weight: 400;
  /* keep descriptions tidy — allow wrap but prefer one line */
  letter-spacing: 0.005em;
}

/* Hover arrow — lives in the 3rd grid column so it doesn't push text */
.mega-link::after {
  content: '';
  grid-column: 3;
  width: 14px; height: 14px;
  background-color: currentColor;
  color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
  align-self: center;
}
.mega-link:hover::after,
.mega-link:focus-visible::after { opacity: 1; transform: translateX(0); }

/* --- Mobile toggle --- */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  color: var(--ink);
  margin-left: auto;
}
.nav-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --- Mobile menu panel --- */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  background: var(--surface);
  z-index: 99;
  overflow-y: auto;
  padding: 24px var(--pad-x) 80px;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: none;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-section { border-bottom: 1px solid var(--border); }
.mobile-section-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  font-size: 16px; font-weight: 600; color: var(--ink);
  text-align: left;
}
.mobile-section-head svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s; }
.mobile-section.open .mobile-section-head svg { transform: rotate(180deg); }
.mobile-section-body { display: none; padding: 0 4px 20px; flex-direction: column; gap: 4px; }
.mobile-section.open .mobile-section-body { display: flex; }
.mobile-section-body a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink-2);
}
.mobile-section-body a:hover { background: var(--surface-2); color: var(--ink); }
.mobile-cta { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.mobile-cta .btn { width: 100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(72px, 9vw, 120px);
  background:
    radial-gradient(ellipse 80% 60% at 85% 0%, rgba(93,232,200,0.14), transparent 60%),
    radial-gradient(ellipse 70% 70% at 10% 10%, rgba(59,91,219,0.10), transparent 55%),
    linear-gradient(180deg, #f7f7fb 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-title { margin-bottom: 24px; }
.hero-sub { font-size: clamp(17px, 1.2vw, 20px); color: var(--ink-2); line-height: 1.55; margin-bottom: 36px; max-width: 560px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.hero-stat .lbl { font-size: 13px; color: var(--ink-3); margin-top: 2px; max-width: 160px; }

/* Dashboard mockup card */
.mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 24px;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.mockup::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: radial-gradient(ellipse at center, rgba(59,91,219,0.08), transparent 65%);
  z-index: -1;
  border-radius: 40px;
}
.mk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mk-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mk-date { font-size: 12px; color: var(--ink-3); }
.mk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.mk-card { background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; }
.mk-card .lbl { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
.mk-card .val { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.mk-card .val.orange { color: #e07b00; }
.mk-card .val.green { color: var(--green); }
.mk-card .val.blue { color: var(--accent); }
.mk-entry { background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.mk-entry .ico { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mk-entry .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.mk-entry .body { flex: 1; min-width: 0; }
.mk-entry .body .t { font-weight: 600; font-size: 14px; color: var(--ink); }
.mk-entry .body .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mk-entry .body .d { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.mk-entry .meta { text-align: right; flex-shrink: 0; }
.mk-entry .meta .time { font-weight: 600; font-size: 14px; }
.mk-badges { display: flex; gap: 6px; margin-top: 6px; }
.mk-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--accent-light); color: var(--accent); }
.mk-badge.b { background: var(--purple-light); color: var(--purple); }
.mk-done { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 100px; background: var(--green-light); color: var(--green); margin-top: 8px; }
.mk-done svg { width: 11px; height: 11px; }

/* =========================================================
   LOGO STRIP (social proof)
   ========================================================= */
.logos-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}
.logos-strip .ls-head {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  opacity: 0.72;
}
.logos-row .lg {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.02em;
}

/* =========================================================
   PROBLEM / FEATURE BLOCKS
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split.narrow { grid-template-columns: 1fr 1.1fr; }
.split.reversed .split-media { order: -1; }

.feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.feature-list .fl-item { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .fl-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.feature-list .fl-check svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
.feature-list .fl-text { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.feature-list .fl-text strong { color: var(--ink); font-weight: 600; }

.media-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow);
}
.media-card.tinted { background: linear-gradient(160deg, #f4f6ff 0%, #ffffff 100%); }

/* Section — soft card band */
.band {
  background: var(--surface);
}
.band-soft {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 60%, var(--bg) 100%);
}

/* =========================================================
   TESTIMONIAL CAROUSEL
   ========================================================= */
.testimonials { background: var(--surface); }
.tst-wrap { overflow: hidden; position: relative; margin: 0 calc(var(--pad-x) * -1); padding: 16px 0; }
.tst-wrap::before, .tst-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.tst-wrap::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.tst-wrap::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.tst-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: tst-scroll 60s linear infinite;
}
.tst-track:hover { animation-play-state: paused; }
@keyframes tst-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tst-card {
  min-width: 420px;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tst-quote { font-family: var(--font-display); font-size: 19px; line-height: 1.45; color: var(--ink); letter-spacing: -0.015em; font-weight: 500; }
.tst-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tst-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.tst-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.tst-role { font-size: 12px; color: var(--ink-3); }

/* =========================================================
   SECURITY SECTION (dark)
   ========================================================= */
.dark-section {
  background: linear-gradient(160deg, #0b1120 0%, #111a33 100%);
  color: #e5e9f5;
  position: relative;
  overflow: hidden;
}
.dark-section::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(93,232,200,0.10), transparent 55%);
  pointer-events: none;
}
.dark-section h1, .dark-section h2, .dark-section h3 { color: #ffffff; }
.dark-section .lead, .dark-section p { color: #a9b3cc; }
.dark-section .eyebrow { color: var(--teal-2); }
.dark-section .eyebrow::before { background: var(--teal-2); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.pillar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: 32px;
  transition: border-color .2s, background .2s;
}
.pillar:hover { border-color: rgba(93,232,200,0.35); background: rgba(255,255,255,0.06); }
.pillar-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(93,232,200,0.14);
  color: var(--teal-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.pillar-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.pillar h3 { font-size: 20px; margin-bottom: 10px; color: #fff; }
.pillar p { font-size: 14px; line-height: 1.65; color: #9aa6c0; }

/* =========================================================
   STATS SECTION
   ========================================================= */
.stats { background: var(--bg); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 200px;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  text-align: center;
  max-width: 24ch;
  margin: 0 auto;
}

/* =========================================================
   INTEGRATIONS — scrolling marquee
   ========================================================= */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.intg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 18px;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  min-width: 168px;
}
.intg-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.intg-card .lg { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.intg-card .lg svg, .intg-card .lg img { width: 100%; height: 100%; object-fit: contain; }
.intg-card .nm { font-size: 13px; font-weight: 600; color: var(--ink); }

/* Integrations marquee — auto-scrolls on desktop, becomes a swipeable
   touch-scroll carousel on mobile OR when `prefers-reduced-motion` is set.
   This way the content is always reachable regardless of the user's motion
   preferences or browser defaults (iOS defaults to limited motion in some
   accessibility setups). */
.intg-marquee {
  margin-top: 48px;
  overflow: hidden;
  position: relative;
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  padding: 8px 0;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.intg-marquee .intg-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: intg-scroll 48s linear infinite;
}
.intg-marquee .intg-track:hover { animation-play-state: paused; }
.intg-marquee .intg-card { flex-shrink: 0; min-width: 190px; }
@keyframes intg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mobile / touch-first: disable the auto-scroll animation, allow horizontal
   swiping, and remove the edge mask so the first/last cards are fully visible.
   Covers phones AND any user whose browser forces reduced motion. */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .intg-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: none;
    -webkit-mask-image: none;
    margin-left: calc(var(--pad-x) * -0.5);
    margin-right: calc(var(--pad-x) * -0.5);
    padding: 8px calc(var(--pad-x) * 0.5);
  }
  .intg-marquee::-webkit-scrollbar { display: none; }
  .intg-marquee .intg-track {
    animation: none;
    width: auto;
    padding-right: 16px;
  }
  .intg-marquee .intg-card {
    scroll-snap-align: start;
    min-width: 150px;
  }
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list { max-width: 860px; margin: 48px auto 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.02em;
}
.faq-q .plus {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s;
}
.faq-q .plus svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.5; transition: transform .3s; }
.faq-item.open .faq-q .plus { background: var(--accent); }
.faq-item.open .faq-q .plus svg { stroke: #fff; transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a-inner {
  padding: 0 4px 24px;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 680px;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta-block {
  background: linear-gradient(135deg, #0f1623 0%, #1a2445 50%, #3b5bdb 100%);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 72px);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-block::before {
  content: '';
  position: absolute;
  top: -200px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(93,232,200,0.25), transparent 60%);
  pointer-events: none;
}
.cta-block h2 { color: #fff; max-width: 720px; margin: 0 auto 20px; }
.cta-block p { color: rgba(255,255,255,0.7); font-size: 17px; max-width: 560px; margin: 0 auto 32px; line-height: 1.6; }
.cta-block .hero-ctas { justify-content: center; margin-bottom: 0; }
.cta-block .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.cta-block .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.cta-block .btn-accent { background: #fff; color: var(--ink); }
.cta-block .btn-accent:hover { background: var(--teal-2); color: var(--ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot {
  background: #0b1120;
  color: rgba(255,255,255,0.65);
  padding: clamp(48px, 6vw, 80px) 0 32px;
}
.foot-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--pad-x); }
.foot-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.foot-brand .nav-logo svg { height: 52px; }
.foot-brand p { font-size: 14px; max-width: 300px; line-height: 1.6; margin-top: 20px; color: rgba(255,255,255,0.55); }
.foot-news { margin-top: 24px; }
.foot-news label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.foot-news .row { display: flex; gap: 8px; max-width: 340px; }
.foot-news input {
  flex: 1; padding: 11px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  color: #fff; font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.foot-news input::placeholder { color: rgba(255,255,255,0.4); }
.foot-news input:focus { border-color: var(--teal-2); }
.foot-news button { background: var(--teal-2); color: var(--ink); font-size: 13px; font-weight: 600; padding: 0 16px; border-radius: var(--r-sm); }
.foot-news button:hover { background: #fff; }

.foot-col h4 { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 18px; }
.foot-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 10px; transition: color .15s; }
.foot-col a:hover { color: #fff; }

.foot-bot {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.foot-bot .legal { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bot .legal a:hover { color: #fff; }

/* =========================================================
   PAGE TEMPLATE (subpages)
   ========================================================= */
.page-hero {
  /* Extra top padding guarantees the H1 is always clear of the fixed nav
     regardless of content-visibility skipping or scroll-restoration quirks. */
  padding-top: calc(var(--nav-h) + clamp(72px, 8vw, 120px));
  padding-bottom: clamp(48px, 6vw, 80px);
  background:
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(93,232,200,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 10%, rgba(59,91,219,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
}
.page-hero .container { max-width: 960px; }
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lead { max-width: 720px; }

/* =========================================================
   CONTACT FORM (shared)
   ========================================================= */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-submit { width: 100%; padding: 14px; font-size: 15px; font-weight: 600; background: var(--accent); color: #fff; border-radius: var(--r-md); transition: background .15s; }
.form-submit:hover { background: var(--accent-dark); }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .7s cubic-bezier(.22,.61,.36,1) forwards; }

/* Stagger helpers */
.d-1 { animation-delay: .05s; }
.d-2 { animation-delay: .15s; }
.d-3 { animation-delay: .25s; }
.d-4 { animation-delay: .35s; }
.d-5 { animation-delay: .45s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-inner .hero-visual { max-width: 560px; }
  .split, .split.narrow { grid-template-columns: 1fr; }
  .split.reversed .split-media { order: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: span 3; }
  .nav-links { display: none; }
  .nav-burger { display: flex; order: 3; margin-left: auto; }
  .nav-cta { display: none; }   /* Book a Demo lives inside the mobile menu on mobile */
  .mobile-menu { display: block; }
}
@media (max-width: 640px) {
  :root { --nav-h: 68px; }
  /* Extra-defensive logo sizing so the burger always has room on narrow phones */
  .nav-logo { padding-left: 0; }
  .nav-logo svg, .nav-logo img { height: 36px; max-width: 140px; object-fit: contain; }
  .nav-inner { padding-left: 16px; padding-right: 12px; gap: 12px; }
  .nav-burger { width: 44px; height: 44px; }
  .nav-burger svg { width: 24px; height: 24px; }
  .foot-brand .nav-logo img { height: 48px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; width: 100%; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
  .tst-card { min-width: 320px; max-width: 320px; padding: 22px; }
  .tst-quote { font-size: 17px; }
  .stats-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 40px 24px; }
  /* Hero rhythm tightened on phones */
  .hero-inner { gap: 32px; }
  .hero-stats-row { gap: 20px; flex-direction: column; }
  .hero-stat { max-width: 100%; }
  .hero-stat .num { font-size: 28px; }
  /* Tap targets — minimum 44px height for buttons/nav items */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .mega-link { padding: 14px 14px; }
  .mobile-section-head { padding: 20px 4px; }
  .mobile-section-body a { padding: 12px 12px; }
  .faq-q { padding: 20px 4px; min-height: 56px; }
  /* ROI card: control row stacks so the slider gets full width */
  .roi-control { gap: 12px; }
  .roi-control output { font-size: 20px; min-width: 72px; }
  /* Result number — let the clamp in the base rule handle phone sizing. */
  /* Objection cards tighter */
  .obj-card { padding: 20px; }
  .obj-q { font-size: 16px; }
  /* Feature matrix headline doesn't wrap awkwardly */
  .section-head h2 { hyphens: auto; }
  /* Partner card aside */
  .partner-badge-num { font-size: 56px; }
  /* Footer cleanup */
  .foot-top { gap: 28px; }
  .foot-news .row { flex-direction: column; max-width: 100%; }
  .foot-news button { width: 100%; padding: 12px; }
  /* Prevent any accidental horizontal overflow */
  body, main, section { overflow-x: clip; }
  /* Trust row keeps dots but shrinks items */
  .trust-row { padding-top: 18px; margin-top: 28px; }
}

/* 414px — small phones landscape / large phones portrait */
@media (max-width: 414px) {
  h1 { font-size: clamp(32px, 9vw, 40px); }
  h2 { font-size: clamp(28px, 7vw, 36px); }
  .lead { font-size: 16px; }
  .page-hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero { padding-top: calc(var(--nav-h) + 32px); }
  .cta-block { padding: 32px 20px; }
  .cta-block h2 { font-size: 26px; }
  .cta-block p { font-size: 15px; }
  /* Brief body tighter */
  .brief-section { padding: 22px 0; }
  .brief-h2 { font-size: 22px; }
  .brief-h3 { font-size: 12px; }
  .brief-section p { font-size: 14.5px; }
  .brief-list li { font-size: 14px; }
  /* Trust badges on tiny screens — wrap and drop dots (already) */
  .trust-badges { gap: 8px 12px; }
  .trust-badge { font-size: 11.5px; }
  .trust-label { font-size: 10px; }
  /* Pricing cards edge-to-edge-ish */
  .price-card { padding: 28px 22px; }
  /* Matrix down to a minimum */
  .matrix-head, .matrix-row { min-width: 480px; }
}

/* Mobile polish for new components introduced in the consolidation */
@media (max-width: 720px) {
  /* Product-page jump pills — scroll horizontally rather than wrap cramped */
  .product-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    margin-left: calc(var(--pad-x) * -0.5);
    margin-right: calc(var(--pad-x) * -0.5);
    padding-left: calc(var(--pad-x) * 0.5);
    padding-right: calc(var(--pad-x) * 0.5);
  }
  .product-jump::-webkit-scrollbar { display: none; }
  .product-jump a { flex-shrink: 0; min-height: 40px; }

  /* Step-cards inside /product/ */
  .step-card { padding: 28px 22px; }
  .step-num { width: 40px; height: 40px; font-size: 20px; margin-bottom: 16px; }
  .step-body h3 { font-size: 20px; }
  .step-body p { font-size: 14px; }

  /* Help-center jump pills — horizontal scroll on small screens */
  .hc-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .hc-jump::-webkit-scrollbar { display: none; }
  .hc-jump-link { flex-shrink: 0; }
  .hc-jump-cta { flex-shrink: 0; margin-left: 0; }

  /* Solutions tabs already scroll at 720px — tighten icon+label spacing */
  .sol-tab svg { width: 14px; height: 14px; }

  /* Partner card / CTA block — reduce margins on mobile */
  .partner-card { padding: 28px 22px; }
}

/* Very small (iPhone SE / portrait 375px) specific touches */
@media (max-width: 390px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .hero-ctas .btn { padding: 14px 16px; font-size: 14.5px; }
  .nav-logo svg, .nav-logo img { height: 34px; }
  /* ROI result number sizing lives in the base rule's clamp() now; that keeps
     the whole dollar amount on one line and scales the font down gracefully
     on narrow phones. Do NOT re-add word-break:break-all here — it caused the
     "$3,861,00\n0" wrap bug by breaking numbers at any character. */
  /* Partner badge doesn't dominate */
  .partner-badge-num { font-size: 48px; }
  /* Brief CTA buttons full-width */
  .brief-cta .hero-ctas .btn { width: 100%; }
}
@media (max-width: 420px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-brand { grid-column: span 1; }
}

/* =========================================================
   PHOTO BACKGROUNDS & EDITORIAL BLOCKS
   ========================================================= */

/* Full-bleed photo hero — dark overlay + light text */
.photo-hero {
  position: relative;
  min-height: 88vh;
  padding: calc(var(--nav-h) + 80px) 0 80px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.photo-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.04);
}
/* Looping video backdrop (sits on top of the ::before poster) */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-video.ready { opacity: 1; }
.photo-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,17,32,0.70) 0%, rgba(11,17,32,0.55) 45%, rgba(11,17,32,0.92) 100%),
    linear-gradient(90deg, rgba(11,17,32,0.82) 0%, rgba(11,17,32,0.35) 55%, rgba(11,17,32,0.15) 100%);
  z-index: -1;
}
.photo-hero h1 { color: #fff; max-width: 900px; font-weight: 600; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.photo-hero h1 em { color: var(--teal-2); }
.photo-hero .lead { color: rgba(255,255,255,0.9); max-width: 640px; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.photo-hero .eyebrow { color: var(--teal-2); }
.photo-hero .eyebrow::before { background: var(--teal-2); }
.photo-hero .hero-stats { margin-top: 56px; }
.photo-hero .hero-stat .num { color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.photo-hero .hero-stat .lbl { color: rgba(255,255,255,0.72); }
.photo-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.photo-hero .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.photo-hero .btn-accent { background: #fff; color: var(--ink); }
.photo-hero .btn-accent:hover { background: var(--teal-2); color: var(--ink); }

/* Legal-tech hero variant: heavier wash + slow Ken Burns so the video
   reads as ambient backdrop, not a distraction. Readability comes first. */
.photo-hero--legal::after {
  background:
    linear-gradient(180deg, rgba(9,14,28,0.78) 0%, rgba(9,14,28,0.60) 45%, rgba(9,14,28,0.94) 100%),
    linear-gradient(90deg, rgba(9,14,28,0.88) 0%, rgba(9,14,28,0.40) 58%, rgba(9,14,28,0.15) 100%);
}
.photo-hero--legal .hero-video {
  filter: saturate(0.82) contrast(1.02) brightness(0.90);
  animation: heroKen 48s ease-in-out infinite alternate;
  transform-origin: center 55%;
}
@keyframes heroKen {
  from { transform: scale(1.00); }
  to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-hero--legal .hero-video { animation: none; }
}

/* Hero stats: label + 3-column row */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
}
.hero-stats-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-stats-row {
  display: flex;
  gap: clamp(20px, 3.5vw, 52px);
  flex-wrap: wrap;
}
.hero-stat { flex: 0 1 auto; max-width: 240px; }
.hero-stat sup { font-size: 0.55em; color: var(--teal-2); margin-left: 2px; }

/* Stats section footnote */
.stats-footnote {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  max-width: 820px;
  margin: 32px auto 0;
  line-height: 1.6;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.stats-footnote sup { font-weight: 600; color: var(--accent); margin-right: 2px; }
.stat-card sup { font-size: 0.45em; color: var(--accent); margin-left: 2px; vertical-align: super; }

/* =========================================================
   FOUNDING DESIGN-PARTNER BAND (replaces testimonials pre-launch)
   ========================================================= */
.partner-band {
  background: var(--surface);
  padding: clamp(64px, 7vw, 104px) 0;
}
.partner-card {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  background: linear-gradient(160deg, #ffffff 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.partner-card::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(93,232,200,0.14), transparent 60%);
  pointer-events: none;
}
.partner-copy .eyebrow { color: var(--accent); }
.partner-copy h2 em { color: var(--accent); font-style: italic; }
.partner-copy .lead { font-size: 17px; color: var(--ink-2); line-height: 1.6; max-width: 540px; }
.partner-benefits {
  list-style: none;
  padding: 0; margin: 28px 0;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 560px;
}
.partner-benefits li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.partner-benefits li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 2.5; }
.partner-benefits li strong { color: var(--ink); font-weight: 600; }
.partner-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.partner-aside {
  display: flex; flex-direction: column;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 36px);
  position: relative;
  z-index: 1;
}
.partner-badge {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}
.partner-badge-num {
  font-family: var(--font-serif);
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal-2);
  margin-bottom: 6px;
}
.partner-badge-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.partner-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.partner-meta-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45;
}
.partner-meta-k {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.48); flex-shrink: 0; padding-top: 2px;
}
.partner-meta-row span:last-child { text-align: right; }
.partner-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

@media (max-width: 900px) {
  .partner-card { grid-template-columns: 1fr; }
  .partner-aside { margin-top: 8px; }
  .partner-meta-row { flex-direction: column; gap: 2px; }
  .partner-meta-row span:last-child { text-align: left; }
}

/* Compliance / trust lockup under the hero stats */
.trust-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 880px;
}
.trust-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  padding-right: 4px;
}
.trust-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.88);
}
.trust-badge svg {
  width: 14px; height: 14px;
  color: var(--teal-2);
  flex-shrink: 0;
}
.trust-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
}
@media (max-width: 640px) {
  .trust-row { gap: 12px; margin-top: 32px; padding-top: 20px; }
  .trust-badges { gap: 10px 14px; }
  .trust-dot { display: none; }
  .trust-badge { font-size: 12px; }
}

/* Photo-backed feature section — side-by-side copy with photo */
.photo-feature {
  position: relative;
  padding: 0;
  color: #fff;
  isolation: isolate;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.photo-feature::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-img);
  background-size: cover; background-position: center;
  z-index: -2;
}
.photo-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,17,32,0.88) 0%, rgba(11,17,32,0.55) 60%, rgba(11,17,32,0.3) 100%);
  z-index: -1;
}
.photo-feature .container { padding-top: 120px; padding-bottom: 120px; }
.photo-feature h2 { color: #fff; max-width: 640px; }
.photo-feature h2 em { color: var(--teal-2); }
.photo-feature .lead { color: rgba(255,255,255,0.85); }
.photo-feature .eyebrow { color: var(--teal-2); }
.photo-feature .eyebrow::before { background: var(--teal-2); }
.photo-feature .feature-list .fl-text { color: rgba(255,255,255,0.85); }
.photo-feature .feature-list .fl-text strong { color: #fff; }
.photo-feature .feature-list .fl-check { background: rgba(93,232,200,0.18); color: var(--teal-2); }

/* Final CTA over a photo */
.photo-cta {
  position: relative;
  padding: clamp(96px, 11vw, 160px) 0;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}
.photo-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-img);
  background-size: cover; background-position: center;
  z-index: -2;
}
.photo-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,17,32,0.7) 0%, rgba(11,17,32,0.55) 100%);
  backdrop-filter: blur(1px);
  z-index: -1;
}
.photo-cta .overlay-card {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  background: rgba(247,247,251,0.95);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-2xl);
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
  box-shadow: var(--shadow-xl);
}
.photo-cta .overlay-card h2 { color: var(--ink); margin-bottom: 20px; }
.photo-cta .overlay-card h2 em { color: var(--accent); }
.photo-cta .overlay-card p { color: var(--ink-2); font-size: 17px; max-width: 560px; margin: 0 auto 32px; line-height: 1.55; }

/* =========================================================
   EDITORIAL / BLOG PREVIEW GRID
   ========================================================= */
.blog-preview { background: var(--surface); }
.blog-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.blog-featured {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s;
}
.blog-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-featured .img {
  aspect-ratio: 16 / 10;
  background-image: var(--bg-img);
  background-size: cover; background-position: center;
}
.blog-featured .body { padding: 28px 28px 32px; }
.blog-featured .tag-row { margin-bottom: 14px; }
.blog-featured .tag-text {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.blog-featured h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.blog-featured .excerpt { font-size: 15px; color: var(--ink-2); line-height: 1.55; max-width: 520px; }

.blog-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-content: start;
}
.blog-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  transition: transform .25s, box-shadow .25s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card .img {
  aspect-ratio: 16 / 10;
  background-image: var(--bg-img);
  background-size: cover; background-position: center;
}
.blog-card .body { padding: 18px 20px 22px; }
.blog-card .date {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.blog-card h4 { font-size: 16px; line-height: 1.25; letter-spacing: -0.015em; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .blog-sub-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PROSE (legal / help content)
   ========================================================= */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 12px; color: var(--ink); }
.prose .updated { font-size: 13px; color: var(--ink-3); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.prose h2 { font-family: var(--font-serif); font-size: 24px; color: var(--ink); margin-top: 40px; margin-bottom: 14px; letter-spacing: -0.01em; }
.prose h3 { font-size: 18px; color: var(--ink); margin-top: 28px; margin-bottom: 10px; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 12px 0 20px 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .15s; }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; padding: 2px 6px; background: var(--surface-2); border-radius: 4px; }
.prose .summary-box {
  padding: 20px 24px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  margin: 16px 0 32px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.prose .summary-box strong { color: var(--ink); }
.prose .subhead {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 22px;
  margin-bottom: 10px;
}
.prose .footnote {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  padding-top: 20px;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
}

/* Centered thank-you card */
.center-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(40px, 6vw, 64px);
  box-shadow: var(--shadow);
}
.center-card .check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--green-light); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.center-card .check svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 3; }

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; } .mt-8 { margin-top: 64px; }
.max-w-prose { max-width: 680px; }
.muted { color: var(--ink-3); }
.no-wrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "Your Timesheet, Written for You" / product-preview band on the homepage.
   Desktop = 2-column split with dashboard mockup on the right.
   Mobile  = single column, dashboard drops below the copy. */
.product-preview {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .product-preview { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   AMBIENT BACKGROUNDS — very subtle, to break up large white stretches.
   Each variant paints a soft radial wash. Tints are < 6% opacity so they
   stay out of the way of content; they just give the eye something to rest on.
   ========================================================= */
.bg-mist {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(93,232,200,0.06), transparent 65%),
    radial-gradient(ellipse 50% 40% at 5% 100%, rgba(59,91,219,0.05), transparent 65%),
    var(--surface);
}
.bg-dawn {
  position: relative;
  background:
    radial-gradient(ellipse 55% 45% at 10% 0%, rgba(112,72,232,0.06), transparent 60%),
    radial-gradient(ellipse 65% 40% at 100% 100%, rgba(93,232,200,0.05), transparent 65%),
    var(--bg);
}
.bg-grid {
  position: relative;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--surface-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}
.bg-grid::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 20%, var(--surface) 80%);
  pointer-events: none;
}
/* Layer a soft corner blob on any band section for depth */
.band.tinted-corner,
.objection-ribbon.tinted-corner,
.roi-section.tinted-corner,
.stats.tinted-corner {
  position: relative;
  isolation: isolate;
}
.band.tinted-corner::before,
.objection-ribbon.tinted-corner::before,
.roi-section.tinted-corner::before,
.stats.tinted-corner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 35% at 90% 10%, rgba(59,91,219,0.04), transparent 65%),
    radial-gradient(ellipse 35% 30% at 8% 95%, rgba(93,232,200,0.05), transparent 65%);
  pointer-events: none;
}

/* =========================================================
   HERO TAGLINE — small italic serif under the H1
   ========================================================= */
.hero-tagline {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.hero-tagline em {
  color: var(--teal-2);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
/* Nav logo grows with the bigger image dimensions set in markup */
.nav-logo svg, .nav-logo img { height: 52px; width: auto; display: block; }
.foot-brand .nav-logo img { height: 64px; width: auto; }

/* =========================================================
   OBJECTION RIBBON — 4 quick answers right under the hero
   ========================================================= */
.objection-ribbon {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 5vw, 72px) 0;
}
.obj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.obj-card {
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color .2s, transform .2s;
}
.obj-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.obj-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.obj-ico svg { width: 18px; height: 18px; }
.obj-q {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 8px;
}
.obj-a {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.obj-a a { color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .obj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .obj-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ROI CALCULATOR
   ========================================================= */
.roi-section { background: var(--bg); }
.roi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.roi-inputs { display: flex; flex-direction: column; gap: 22px; }
.roi-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.roi-control { display: flex; align-items: center; gap: 16px; }
/* Slider track fill — JS sets --pct on every input change; the gradient follows.
   We also style the native -moz-range-progress for Firefox which honors it. */
.roi-control input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--pct, 50%),
    var(--surface-3) var(--pct, 50%),
    var(--surface-3) 100%
  );
  outline: none;
  transition: background .1s linear;
  touch-action: none;
}
.roi-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.roi-control input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
}
.roi-control input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.roi-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(59,91,219,0.35);
  cursor: grab;
  transition: transform .1s;
}
.roi-control input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.roi-control input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(59,91,219,0.35);
  cursor: grab;
}
.roi-control input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.roi-control output {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  min-width: 88px;
  text-align: right;
  letter-spacing: -0.01em;
}
.roi-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.4;
}

.roi-result {
  background: linear-gradient(160deg, #0f1623 0%, #1a2445 55%, #3b5bdb 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.roi-result::before {
  content: '';
  position: absolute;
  top: -100px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(93,232,200,0.20), transparent 60%);
  pointer-events: none;
}
.roi-result-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.roi-result-num {
  font-family: var(--font-serif);
  /* clamp scales aggressively on narrow screens so the number never needs to
     break across lines. Floor of 28px ensures it still reads as the headline
     figure even on a 320px iPhone SE. */
  font-size: clamp(28px, 7.2vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
  /* Never break the dollar amount mid-number ($3,861,00\n0 was the bug). */
  white-space: nowrap;
  /* Extreme safety: if the card width somehow can't hold the number at the
     minimum font-size, allow the text itself to scale down rather than wrap. */
  overflow-wrap: normal;
}
.roi-result-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin-bottom: 24px;
}
.roi-result-sub strong { color: var(--teal-2); font-weight: 600; }
.roi-result-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.roi-result-cta .btn-accent { background: #fff; color: var(--ink); }
.roi-result-cta .btn-accent:hover { background: var(--teal-2); color: var(--ink); }
.roi-result-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.roi-result-cta .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.roi-disclaimer {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) {
  .roi-card { grid-template-columns: 1fr; }
}

/* =========================================================
   PRICING PAGE
   ========================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  /* Reserve room for the featured-card flag which sits at the top of its card.
     Matches the flag's 28px height + 10px breathing room. */
  padding-top: 22px;
  /* Make sure no ancestor overflow/containment clips the flag */
  overflow: visible;
}
/* Ensure the pricing section itself never traps the flag inside a clipped box */
.pricing-section, .pricing-section > .container {
  content-visibility: visible !important;
  overflow: visible;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 12px 40px rgba(59,91,219,0.15);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 14%);
  /* Extra top padding gives the internal flag room without any overflow math */
  padding-top: 44px;
}
.price-flag {
  /* Pin the flag INSIDE the card boundary so no overflow clipping can ever hide it.
     Previously it floated at top:-14px (above the card) which got clipped in two
     places: content-visibility on the <section>, and overflow-x:clip at mobile. */
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(59,91,219,0.3);
  white-space: nowrap;
}
.price-tier {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.price-desc {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 24px;
  min-height: 48px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 64px;
}
.price-currency {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.price-num {
  font-family: var(--font-serif);
  font-size: 58px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.price-period {
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 6px;
}
.price-contact {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.price-billing {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.price-cta {
  width: 100%;
  margin-bottom: 32px;
  justify-content: center;
}
.price-features-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.price-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.price-features li svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  fill: none; stroke: var(--accent);
  stroke-width: 2.5;
}
.price-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 880px;
  margin: 48px auto 0;
}
.price-note a { color: var(--accent); font-weight: 600; }

/* Feature matrix */
.matrix {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.matrix-head, .matrix-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
}
.matrix-head {
  background: var(--surface-2);
  padding: 16px 24px;
}
.matrix-head > div {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.matrix-head > div:not(:first-child),
.matrix-row > div:not(:first-child) {
  text-align: center;
}
.matrix-row {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-2);
}
.matrix-row > div:first-child { color: var(--ink); font-weight: 500; }
.matrix-row > div:not(:first-child) {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--accent);
  font-weight: 500;
}
.matrix-row > div:not(:first-child):contains("—") { color: var(--ink-4); }

/* =========================================================
   SOLUTIONS / PRODUCT TABS
   Button tabs sit in a scrolling row on mobile; tab panels
   fade in on activation for subtle continuity.
   ========================================================= */
.sol-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 48px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  max-width: fit-content;
  box-shadow: var(--shadow-sm);
}
.sol-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  min-height: 40px;
}
.sol-tab svg { width: 16px; height: 16px; opacity: 0.7; }
.sol-tab:hover { color: var(--ink); background: var(--surface-2); }
.sol-tab.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,22,35,0.15);
}
.sol-tab.is-active svg { opacity: 1; color: var(--teal-2); }

.sol-panel {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
}
.sol-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}
.sol-panel[hidden] { display: none; }

/* =========================================================
   CONTACT PAGE — dual-path (Calendly vs form)
   ========================================================= */
.contact-paths {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  max-width: 720px;
}
.contact-path {
  flex: 1 1 300px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  transition: border-color .2s, box-shadow .2s, background .2s;
  min-height: 72px;
}
.contact-path:hover { border-color: var(--border-2); }
.contact-path.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 8px 24px rgba(59,91,219,0.12);
}
.contact-path svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-3); margin-top: 2px; }
.contact-path.is-active svg { color: var(--accent); }
.contact-path strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
.contact-path-sub { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; }

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-aside { padding-top: 8px; }
.contact-checks {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.contact-checks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.contact-checks li svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
}
.contact-checks li strong { color: var(--ink); font-weight: 600; }

.contact-info-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.contact-info-list > div {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2);
}
.contact-info-list svg { color: var(--accent); }
.contact-info-list a { color: var(--ink); font-weight: 500; }

.contact-prefer {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--bg);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
}
.contact-prefer-lbl {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}

.calendly-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calendly-frame {
  position: relative;
  width: 100%;
  height: 760px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.calendly-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.calendly-fallback {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.55;
}
.calendly-fallback a { color: var(--accent); font-weight: 600; }

/* Instant booking-confirmed overlay. Covers the Calendly iframe with our own
   success state the moment Calendly fires event_scheduled — removes the 30–90s
   "did my booking work?" anxiety that comes from email-delivery latency.
   Starts hidden; revealed via [hidden] removal + .is-shown class. */
.calendly-confirm {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(247, 247, 251, 0.78);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  opacity: 0;
  transition: opacity .32s ease;
}
.calendly-confirm.is-shown { opacity: 1; }
.calendly-confirm[hidden] { display: none; }

.calendly-confirm-card {
  max-width: 520px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 24px 64px rgba(15, 22, 35, 0.18);
  text-align: center;
  transform: translateY(8px);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1) .08s;
}
.calendly-confirm.is-shown .calendly-confirm-card { transform: translateY(0); }

.calendly-confirm-check {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  animation: calendly-pop .48s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
.calendly-confirm-check svg { width: 28px; height: 28px; }
@keyframes calendly-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .calendly-confirm-check { animation: none; }
}

.calendly-confirm-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  outline: none;
}
.calendly-confirm-lead {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.calendly-confirm-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.calendly-confirm-steps li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--r-md);
}
.calendly-confirm-steps li svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke: var(--green); stroke-width: 2.5;
}
.calendly-confirm-steps li a { color: var(--accent); font-weight: 600; }
.calendly-confirm-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.calendly-confirm-small {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .calendly-confirm-card { padding: 24px 20px; border-radius: var(--r-lg); }
  .calendly-confirm-card h3 { font-size: 22px; }
  .calendly-confirm-lead { font-size: 14.5px; }
  .calendly-confirm-steps li { font-size: 13px; padding: 10px 12px; }
  .calendly-confirm-ctas .btn { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .calendly-frame { height: 700px; }
}
@media (max-width: 640px) {
  .contact-paths { flex-direction: column; }
  .contact-path { flex: 1 1 auto; }
  .calendly-frame { height: 640px; }
}

/* =========================================================
   ACCESSIBILITY — skip link, focus rings, aria-current
   ========================================================= */

/* Skip-to-main link for keyboard users — visible only when focused */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--teal-2); outline-offset: 2px; }

/* Unified focus ring on every interactive element — WCAG 2.1 AA compliant */
*:focus { outline: none; } /* remove default so our own ring is consistent */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Dark-section focus uses the teal so it has contrast on dark bg */
.dark-section *:focus-visible,
.photo-hero *:focus-visible,
.photo-feature *:focus-visible,
.photo-cta *:focus-visible,
.site-foot *:focus-visible {
  outline-color: var(--teal-2);
}

/* aria-current="page" on nav links — mark the active page subtly */
.nav-links a[aria-current="page"],
.nav-links button[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
}
.mobile-single[aria-current="page"] { color: var(--accent); }

/* Invalid form fields — visible but not aggressive */
.form-group input:user-invalid,
.form-group select:user-invalid,
.form-group textarea:user-invalid {
  border-color: #d13c3c;
  box-shadow: 0 0 0 3px rgba(209,60,60,0.12);
}
.form-group input:user-valid,
.form-group select:user-valid,
.form-group textarea:user-valid {
  border-color: var(--green);
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect reduced motion everywhere — but don't nuke marquee-style animations
   that exist specifically to make content accessible. If the user can't see it
   animate, we need an alternative way for them to reach the content.
   This rule excludes the integrations track so content stays reachable. */
@media (prefers-reduced-motion: reduce) {
  *:not(.intg-track):not(.tst-track), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure link contrast meets 4.5:1 on light surfaces. Our --ink-3 color is
   close to failing at small sizes, so upgrade it slightly when used for body
   text in the "muted" utility. */
.muted { color: var(--ink-2); }

/* 404 page — on-brand not-found with quick-access cards */
.fourohfour-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: clamp(100px, 14vw, 180px);
  font-weight: 500;
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.05em;
}
.fourohfour-mark svg {
  width: clamp(70px, 10vw, 120px);
  height: clamp(70px, 10vw, 120px);
  animation: fourohfour-spin 26s linear infinite;
}
@keyframes fourohfour-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fourohfour-mark svg { animation: none; }
}
.fourohfour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.fourohfour-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  text-align: left;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.fourohfour-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.fourohfour-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.fourohfour-ico svg { width: 18px; height: 18px; }
.fourohfour-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.fourohfour-desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* "How It Works" section on /product/ — branded backdrop that picks up the
   landing-page palette (indigo + teal washes, subtle dot mesh). Keeps the
   foreground cards on a clean surface so legibility stays high. */
.hiw-section {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
  scroll-margin-top: calc(var(--nav-h) + 16px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 85% 0%, rgba(93,232,200,0.12), transparent 60%),
    radial-gradient(ellipse 60% 55% at 12% 100%, rgba(59,91,219,0.10), transparent 62%),
    linear-gradient(180deg, #f4f5fb 0%, #eef1fa 55%, #f4f5fb 100%);
}
/* Subtle dot mesh overlay — adds depth at legal-tech-grade quietness.
   Uses an SVG data URI so no extra HTTP request. */
.hiw-section::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='1' cy='1' r='1' fill='%2398a6c7' fill-opacity='0.28'/></svg>");
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,0.7) 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,0.7) 30%, transparent 85%);
  opacity: 0.6;
  pointer-events: none;
}
/* Soft highlight seam at top/bottom so the section transitions without a hard line */
.hiw-section::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 80px;
  background: linear-gradient(180deg, var(--surface), transparent);
  pointer-events: none;
  z-index: -1;
}
.hiw-section .section-head em { color: var(--accent); }
/* Step cards pop against the tinted backdrop — bump shadow & keep surface white */
.hiw-section .step-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15,22,35,0.04);
}
.hiw-section .step-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 48px rgba(15,22,35,0.10);
  transform: translateY(-4px);
}

/* In-page jump nav used on /product/ hero */
.product-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 32px;
}
.product-jump a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.product-jump a:hover { color: var(--ink); background: var(--surface-2); border-color: var(--border-2); }

/* 3-step pipeline cards on /product/ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 32px 28px;
  position: relative;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.step-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--accent); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}
.step-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.step-body h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  margin-bottom: 12px;
  line-height: 1.2;
}
.step-body p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 18px;
}
.step-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.step-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
}
.step-bullets li svg {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
}
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 720px) {
  .sol-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--r-md);
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .sol-tabs::-webkit-scrollbar { display: none; }
  .sol-tab { padding: 10px 14px; font-size: 13px; }
}

/* Help Center jump nav — category pills that highlight as you scroll */
.hc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
}
.hc-jump-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  min-height: 40px;
}
.hc-jump-link:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border-2);
}
.hc-jump-link.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.hc-jump-cta { margin-left: auto; }
@media (max-width: 640px) {
  .hc-jump { gap: 8px; }
  .hc-jump-link { padding: 8px 14px; font-size: 13px; }
  .hc-jump-cta { margin-left: 0; margin-top: 4px; }
}

/* Mobile single-link nav rows (no dropdown) */
.mobile-section .mobile-single {
  display: block;
  padding: 18px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.mobile-section .mobile-single:hover { color: var(--accent); }

/* =========================================================
   SECURITY BRIEF (printable reference)
   ========================================================= */
.brief-meta {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.brief-section {
  padding: clamp(28px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--border);
}
.brief-section:last-of-type { border-bottom: none; }
.brief-h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brief-h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 10px;
}
.brief-section p { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin-bottom: 14px; }
.brief-section p strong { color: var(--ink); font-weight: 600; }
.brief-section a { color: var(--accent); font-weight: 600; }
.brief-list {
  list-style: none;
  padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.brief-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.brief-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.brief-list li strong { color: var(--ink); font-weight: 600; }
.brief-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 14px;
}
.brief-table th, .brief-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.brief-table tr:last-child td { border-bottom: none; }
.brief-table th {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.brief-table td { color: var(--ink-2); line-height: 1.55; }
.brief-table td code { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.brief-sig {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.brief-cta {
  text-align: center;
  padding: 48px 0 24px;
}
.brief-cta p { font-size: 17px; color: var(--ink-2); margin-bottom: 20px; font-family: var(--font-serif); font-style: italic; }

@media print {
  .site-nav, .site-foot, .mobile-menu, .nav-burger, .hero-ctas { display: none !important; }
  .page-hero { padding: 20px 0; background: none !important; }
  .page-hero h1 { font-size: 28px; }
  body { background: #fff; color: #000; }
  .brief-section { page-break-inside: avoid; border-bottom: 1px solid #ccc; }
  .brief-h2 { color: #000; }
  .brief-list li::before { background: #000; }
  .brief-table { border-color: #999; }
  .brief-table th { background: #f2f2f2; color: #000; }
  a { color: #000 !important; text-decoration: underline; }
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .matrix-head, .matrix-row { grid-template-columns: 1.5fr repeat(3, 1fr); padding: 14px 18px; }
  .matrix-head > div, .matrix-row > div { font-size: 13px; }
  .matrix-row > div:not(:first-child) { font-size: 16px; }
}
@media (max-width: 640px) {
  /* Horizontal-scroll escape hatch for the comparison matrix on phones */
  .matrix {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
  }
  .matrix-head, .matrix-row {
    min-width: 560px;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    padding: 12px 14px;
  }
  .matrix-row > div:not(:first-child) { font-size: 14px; }
  .matrix-head > div, .matrix-row > div { font-size: 12px; }
  /* Brief tables similar treatment */
  .brief-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}