/* ============================================================
   EMSURGE / EOM — MARKETING DESIGN SYSTEM
   Dark enterprise UI, warm gold accent. Mirrors the EOM app
   (Barlow, #9A6D1C gold, navy surfaces, 10px radius).
   One stylesheet, shared across every page.
   ============================================================ */

/* ============================ FONTS ============================ */
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-ExtraLight.woff2") format("woff2");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Medium.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* SemiBold carries the display type. Mapped to 700 ALONE, so every existing use of 600 (buttons, eyebrows,
   strong, table heads) keeps rendering in Medium exactly as before and nothing changes by accident — a
   heading opts in by asking for 700. Latin subset, matching the coverage of the two faces above. */
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Gold (the EOM signature) ---- */
  --gold:        #c8922e;   /* accent on dark — readable                */
  --gold-deep:   #9a6d1c;   /* solid button fills / brand mark          */
  --gold-bright: #e0b257;   /* hover / glow / highlights                */
  --gold-tint:   rgba(154,109,28,.16);

  /* ---- Surfaces (navy → charcoal, matching the app) ---- */
  --bg:        #0d131c;   /* page                                       */
  --bg-2:      #111720;   /* deepest sections                           */
  --surface:   #1e2d3a;   /* cards                                      */
  --surface-2: #182431;   /* darker rows / table head                   */
  --surface-3: #26384a;   /* hover                                      */

  /* ---- Text ---- */
  --ink:      #ffffff;    /* headings                                   */
  --text:     #e9e3de;    /* body (cream)                               */
  --text-dim: #c2c7cc;
  --muted:    #93a0ad;

  /* ---- Lines ---- */
  --line:        #2f3746;
  --line-bright: rgba(199,200,201,.22);

  /* ---- Semantic (comparison ticks etc.) ---- */
  --ok:   #0bba83;
  --no:   #f84c64;
  --part: #e0b257;
  --teal: #6bc4d7;

  /* ---- Shape & depth ---- */
  --radius:   10px;
  --radius-s: 6px;
  /* Panels round harder than controls. The reference sits at 24px on cards and full pills on buttons, and
     that difference is most of what reads as current — a 10px card and a 10px input look like the same
     component. Inputs and menus stay on --radius so a text field still reads as a text field. */
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* The reading measure for long-form pages. Deliberately in rem, not ch: ch resolves against each
     element's OWN font size, so a headline and its body text would cap at wildly different widths and
     the column would never line up. One absolute value keeps the article header and body on one edge. */
  --measure: 41rem;
  --shadow-s: 0 6px 10px -3px rgba(0,0,0,.45);
  --shadow:   0 20px 50px -20px rgba(0,0,0,.65);
  --maxw: 1180px;

  --font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--gold-bright); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); }
::selection { background: var(--gold-tint); }

/* Display type is set BOLD and TIGHT. The ExtraLight 200 the headings used to carry got thinner and less
   certain the larger it grew, which is the opposite of what a headline should do; at 700 with negative
   tracking the same words read as a statement. Tracking scales with size — the bigger the type, the more
   the default spacing needs pulling in. Long-form headings deliberately opt back down (see .prose). */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); letter-spacing: -.03em; line-height: 1.1; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.06rem; }
p { color: var(--text-dim); }
strong { color: var(--text); font-weight: 600; }

.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
/* Sections breathe: the reference runs 110–155px between bands, and the extra air is what stops a long
   page reading as one continuous scroll. */
section { padding: 118px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; color: var(--gold); margin-bottom: 16px; }
.lead { font-size: 1.18rem; font-weight: 200; color: var(--text); max-width: 64ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.muted { color: var(--muted); }

/* ============================ BUTTONS ============================ */
/* Buttons are full pills in sentence case. Every label in the pages is already written sentence case — the
   uppercasing was purely presentational, and dropping it lets a button read as a sentence ("Book a
   walkthrough") rather than as a shout. Pills want more horizontal padding than rectangles to look settled. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 600; font-size: .95rem;
  letter-spacing: 0;
  padding: 13px 32px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold-deep); color: #fff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--gold); color: #fff; box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-bright); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

/* ============================ NAV ============================ */
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(13,19,28,.82); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 34px; height: 34px; flex: 0 0 34px; }
.brand .name { font-weight: 500; font-size: 1.32rem; letter-spacing: -.01em; color: var(--ink); }
.brand .name b { color: var(--gold-bright); font-weight: 600; }
/* logo+wordmark image — artwork is dark, so render it white on the dark nav */
.brand .brand-logo { height: 44px; width: auto; filter: brightness(0) invert(1); }
/* same wordmark in the footer (dark surface) */
.foot-brand .brand-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { color: var(--text-dim); font-weight: 500; font-size: .96rem; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-bright); }
.nav-cta { padding: 9px 22px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.7rem; cursor: pointer; line-height: 1; }
.nav-login-mobile { display: none; }

/* nav dropdown (Solutions) */
.nav-drop { position: relative; }
.nav-drop > a { color: var(--text-dim); font-weight: 500; font-size: .96rem; cursor: pointer; }
.nav-drop > a::after { content: " ▾"; font-size: .7em; color: var(--gold); }
.nav-drop .drop-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; min-width: 230px; z-index: 60; }
.nav-drop .drop-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; } /* hover bridge */
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: block; }
.nav-drop .drop-menu a { display: block; padding: 10px 14px; border-radius: var(--radius-s); color: var(--text-dim); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav-drop .drop-menu a:hover { background: var(--surface-3); color: var(--gold-bright); }

/* hero persona quick links */
.hero-personas { margin-top: 22px; font-size: .98rem; color: var(--muted); }
.hero-personas a { color: var(--gold-bright); font-weight: 600; }
.hero-personas a:hover { color: var(--gold); }

/* ============================ HERO ============================ */
.hero { position: relative; overflow: hidden; background: var(--bg-2); padding: 108px 0 92px; border-bottom: 1px solid var(--line); }
.hero::after { content:""; position:absolute; right:-180px; top:-160px; width:560px; height:560px; border-radius:50%; background: radial-gradient(circle, rgba(200,146,46,.18), transparent 64%); pointer-events:none; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--gold-bright); }
.hero .lead { font-size: 1.26rem; font-weight: 400; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { display: grid; place-items: center; }
.hero-art img { border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }

/* softened product-screenshot backgrounds */
.bg-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-photo::after { content: none; } /* photo replaces the radial glow */

/* page header (interior pages) */
.pagehead { background: var(--bg-2); padding: 76px 0 60px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.pagehead::after { content:""; position:absolute; right:-140px; top:-120px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(200,146,46,.14), transparent 65%); }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead h1 { margin-bottom: 16px; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold-bright); }
/* product-page market switcher (Carbon · LNG · EAC · Biodiversity) */
.market-nav { font-size: .95rem; color: var(--muted); margin-bottom: 18px; }
.market-nav strong { color: var(--gold-bright); font-weight: 600; }
.market-nav a { color: var(--text-dim); }
.market-nav a:hover { color: var(--gold-bright); }

/* ============================ STATS STRIP ============================ */
.stats { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 54px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; text-align: center; }
.stat .n { font-size: 2.7rem; font-weight: 700; letter-spacing: -.04em; color: var(--gold-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: .92rem; margin-top: 8px; }

/* ============================ CARDS ============================ */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.cards.two  { grid-template-columns: repeat(2,1fr); }
.cards.four { grid-template-columns: repeat(4,1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-s); transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; flex-direction: column; }
.card.hl { border-color: var(--gold-deep); background: linear-gradient(180deg, rgba(154,109,28,.10), var(--surface)); }
a.card:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-bright); }
.card .ico { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 1.55rem; margin-bottom: 18px; background: var(--gold-tint); border: 1px solid rgba(200,146,46,.3); }
/* EOM/Material SVG glyph inside the icon tile (from the shared sprite, gold via currentColor) */
.ico .ic { width: 27px; height: 27px; color: var(--gold-bright); fill: currentColor; }
.card h3 { margin-bottom: 9px; color: var(--ink); }
.card p { font-size: .98rem; }
.card .more { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--gold-bright); font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; }
.tag-pill { align-self: flex-start; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-bright); border: 1px solid rgba(200,146,46,.3); margin-bottom: 14px; }
.tag-pill.free { background: rgba(11,186,131,.14); color: var(--ok); border-color: rgba(11,186,131,.35); }

/* ============================ SPLIT (feature rows) ============================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip .split-media { order: -1; }
.split-media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.split-media img[src$=".svg"] { box-shadow: none; border: none; } /* illustrations carry their own panels */
.feat { display: grid; gap: 15px; margin-top: 24px; }
.feat .row { display: flex; gap: 13px; align-items: flex-start; }
.feat .tick { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-bright); display: grid; place-items: center; font-size: .8rem; font-weight: 700; margin-top: 3px; border: 1px solid rgba(200,146,46,.35); }
.feat .row p { margin: 0; font-size: .99rem; }
.feat .row b { color: var(--text); }

/* ============================ CALLOUT ============================ */
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold-deep); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 24px 28px; margin: 26px 0; }
.callout h3 { color: var(--gold-bright); margin-bottom: 10px; }
.callout ul { margin: 12px 0 0 1.1rem; }
.callout li { margin: 9px 0; color: var(--text-dim); }

/* ============================ COMPARISON TABLE ============================ */
.tablewrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .98rem; }
table.cmp thead th { background: var(--surface-2); text-align: left; padding: 16px 18px; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--line); }
table.cmp thead th.eomcol { background: var(--gold-deep); color: #fff; }
table.cmp tbody td, table.cmp tbody th { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp tbody th { font-weight: 500; text-align: left; color: var(--ink); width: 28%; }
table.cmp tbody td { color: var(--text-dim); }
table.cmp tbody td.eomcol { background: rgba(154,109,28,.12); color: var(--text); }
table.cmp tbody tr:last-child td, table.cmp tbody tr:last-child th { border-bottom: none; }
.y { color: var(--ok); font-weight: 700; }
.p { color: var(--part); font-weight: 700; }
.n { color: var(--no); font-weight: 700; }
.legend { font-size: .86rem; color: var(--muted); margin: 12px 2px 0; }
.legend span { margin-right: 18px; }

/* ============================ LIVE DATA TABLE ============================ */
table.data { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .98rem; }
table.data thead th { background: var(--surface-2); text-align: left; padding: 13px 12px; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--line); white-space: nowrap; }
table.data tbody td { padding: 12px 12px; border-bottom: 1px solid var(--line); color: var(--text-dim); vertical-align: top; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data .prod { font-weight: 600; color: var(--gold-bright); }
table.data .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-updated { font-size: .86rem; color: var(--muted); margin-top: 12px; }

/* ============================ FIELD DICTIONARY ============================ */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2px 32px; margin-top: 42px; }
.fields span { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: .98rem; padding: 9px 2px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fields span::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); }

/* mini stat tiles inside callouts */
.tiles { display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0 6px; }
.tiles .t { flex: 1; min-width: 160px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.tiles .num { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; color: var(--gold-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.tiles .lbl { font-size: .88rem; color: var(--muted); margin-top: 8px; }

/* ============================ LOGO STRIP ============================ */
.logos { display: flex; flex-wrap: wrap; gap: 30px 44px; align-items: center; justify-content: center; margin-top: 36px; }
.logos img { height: 38px; width: auto; opacity: .72; filter: grayscale(1) brightness(1.6); transition: opacity .2s; }
.logos img:hover { opacity: 1; }

/* ============================ CTA BAND ============================ */
.ctaband { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 60px 44px; text-align: center; box-shadow: var(--shadow); }
.ctaband h2 { margin-bottom: 12px; }
.ctaband p { max-width: 58ch; margin: 0 auto 28px; color: var(--text-dim); }

/* ============================ FORMS ============================ */
.formcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow-s); max-width: 640px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .9rem; color: var(--text-dim); margin-bottom: 7px; font-weight: 500; }
.field label .req { color: var(--gold-bright); }
.field input, .field select, .field textarea,
.q input:not([type="radio"]):not([type="checkbox"]), .q select, .q textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px; transition: border-color .15s, background .15s;
}
.field input::placeholder, .field textarea::placeholder, .q input::placeholder, .q textarea::placeholder { color: #6b7886; }
.field input:focus, .field select:focus, .field textarea:focus,
.q input:focus, .q select:focus, .q textarea:focus { outline: none; border-color: var(--gold); background: var(--surface-3); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-s); font-size: .95rem; display: none; }
.form-status.ok { display: block; background: rgba(11,186,131,.12); border: 1px solid rgba(11,186,131,.4); color: #5fe0b8; }
.form-status.err { display: block; background: rgba(248,76,100,.12); border: 1px solid rgba(248,76,100,.4); color: #ff9aa8; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ============================ MULTI-PAGE FORM WIZARD ============================ */
[hidden] { display: none !important; }
.wizard .wpage { display: none; }
.wizard .wpage.active { display: block; }
.wizard .wpage h3 { margin-bottom: 6px; }
.wpage-sub { color: var(--muted); font-size: .92rem; margin-bottom: 22px; }
.wizard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wizard-page-label { font-size: .85rem; color: var(--text-dim); font-weight: 500; }
.wizard-progress { height: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.wizard-progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .25s; }
.wizard .q { margin: 0 0 24px; }
.wizard .q.qhidden { display: none; }
.wizard .q > label { display: block; font-size: .97rem; color: var(--text); margin-bottom: 8px; font-weight: 500; }
.wizard .q .q-num { color: var(--muted); font-weight: 400; }
.q-sub { font-size: .85rem; color: var(--muted); margin: -4px 0 10px; }
.q-sub a { word-break: break-all; }
.wizard .q textarea { min-height: 90px; resize: vertical; }
.opts { display: flex; flex-direction: column; gap: 9px; }
.opt { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: .95rem; cursor: pointer; }
.opt input { accent-color: var(--gold); width: 16px; height: 16px; flex: none; cursor: pointer; }
.other-text { margin-top: 4px; max-width: 340px; }
.q-err { display: none; font-size: .85rem; color: #ff9aa8; margin-top: 7px; }
.q.invalid .q-err { display: block; }
.q.invalid input:not([type="radio"]):not([type="checkbox"]), .q.invalid textarea { border-color: rgba(248,76,100,.6); }
.wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.wizard-nav-spacer { flex: 1; }
.wizard-done h3 { margin-bottom: 10px; }
.wizard-done p { color: var(--text-dim); }

/* ============================ CITATIONS / REFERENCES / DISCLAIMER ============================ */
.cite { font-size: .62em; vertical-align: super; line-height: 0; margin-left: 2px; color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.cite::before { content: "["; }
.cite::after  { content: "]"; }
.refs { margin: 18px 0 0; padding-left: 0; list-style: none; counter-reset: ref; }
.refs li { counter-increment: ref; position: relative; padding-left: 30px; margin-bottom: 12px; font-size: .92rem; color: var(--text-dim); }
.refs li::before { content: "[" counter(ref) "]"; position: absolute; left: 0; color: var(--gold-bright); font-weight: 600; font-size: .85rem; }
.refs li a { word-break: break-word; }
.disclaimer { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; margin-top: 24px; }
.disclaimer h3 { color: var(--text); font-size: 1.12rem; margin-bottom: 10px; }
.disclaimer p { font-size: .86rem; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer strong { color: var(--text-dim); }

/* ============================ FOOTER ============================ */
footer.site { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--muted); padding: 56px 0 28px; }
.foot-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.foot-brand .name { font-weight: 500; font-size: 1.18rem; }
.foot-brand .name b { color: var(--gold-bright); }
.foot-tag { color: var(--muted); max-width: 34ch; margin-top: 12px; font-size: .92rem; }
.foot-col h5 { color: var(--text); font-size: .9rem; margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.foot-col a { display: block; color: var(--muted); font-size: .92rem; margin-bottom: 8px; }
.foot-col a:hover { color: var(--gold-bright); }
.foot-note { width: 100%; border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px; font-size: .82rem; color: var(--muted); line-height: 1.7; }
.foot-note b { color: var(--text-dim); }

/* ============================ PRODUCT TRADEMARK MARK ============================ */
/* Inline EOM mark next to product-feature names, e.g. the Aggregator. */
.tm { color: var(--gold-bright); font-weight: 600; white-space: nowrap; }
.tm img { height: 1em; width: auto; display: inline-block; vertical-align: -0.14em; margin-right: 4px; }

/* ============================ AI PRIVACY NOTE ============================ */
.ai-privacy { display: flex; gap: 11px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius-s); padding: 14px 16px; margin-top: 22px; max-width: 60ch; }
.ai-privacy .lock { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.4; }
.ai-privacy p { margin: 0; font-size: .92rem; color: var(--text-dim); }
.ai-privacy b { color: var(--text); }

/* ============================ FOOTNOTES ============================ */
.fn { font-size: .62em; vertical-align: super; line-height: 0; margin-left: 1px; color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.fn::before { content: "\2020"; } /* dagger */
.claim-note { font-size: .82rem; color: var(--muted); margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 70ch; line-height: 1.6; }
.claim-note a { color: var(--gold-bright); }

/* ============================ SCREENSHOTS (click to enlarge) ============================ */
/* Small by default, embedded in content; click opens the full image in a lightbox. */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; margin-top: 44px; }
figure.shot { margin: 0; display: flex; flex-direction: column; }
figure.shot img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-s); background: var(--surface-2); cursor: zoom-in; display: block; transition: border-color .15s, box-shadow .15s, transform .15s; }
figure.shot img:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-3px); }
figure.shot figcaption { font-size: .84rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
figure.shot figcaption b { color: var(--text-dim); font-weight: 600; }
/* a screenshot used as the media side of a split row keeps the same affordances */
.split-media figure.shot { width: 100%; }
/* feature screenshot: framed, gently tilted, with a soft gold glow; straightens on hover */
figure.shot.shot-feature { position: relative; }
figure.shot.shot-feature::before { content: ""; position: absolute; inset: -10% -8%; background: radial-gradient(closest-side, rgba(200,146,46,.20), transparent 78%); filter: blur(6px); z-index: 0; pointer-events: none; }
figure.shot.shot-feature img { position: relative; z-index: 1; transform: perspective(1400px) rotateY(-7deg) rotate(-1.4deg); transform-origin: 60% 50%; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s; }
figure.shot.shot-feature:hover img { transform: perspective(1400px) rotateY(0deg) rotate(0deg); box-shadow: var(--shadow); }
@media (max-width: 920px) { figure.shot.shot-feature img { transform: none; } }

/* lightbox overlay */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(5,9,14,.9); backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 1280px; display: flex; flex-direction: column; gap: 14px; cursor: default; }
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin-inline: auto; border-radius: var(--radius); border: 1px solid var(--line-bright); box-shadow: var(--shadow); }
.lightbox figcaption { color: var(--text-dim); font-size: .95rem; text-align: center; max-width: 84ch; margin-inline: auto; line-height: 1.55; }
.lightbox-close { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: var(--text); font-size: 2.2rem; line-height: 1; cursor: pointer; transition: color .15s; }
.lightbox-close:hover { color: var(--gold-bright); }

/* ============================ PARTNERS / LOGO WALL ============================ */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-top: 44px; }
.partner { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-s); min-height: 116px; display: grid; place-items: center; padding: 22px 24px; text-align: center; }
.partner img { max-height: 56px; max-width: 100%; width: auto; }
.partner .pname { color: #0d131c; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.partner .psub { display: block; color: #5b6b7a; font-weight: 500; font-size: .82rem; margin-top: 5px; }

/* ============================ TESTIMONIAL ============================ */
.quote-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold-deep); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 30px 34px; max-width: 760px; margin: 44px auto 0; box-shadow: var(--shadow-s); }
.quote-card blockquote { margin: 0; font-size: 1.18rem; font-weight: 200; color: var(--text); line-height: 1.62; }
.quote-card .who { margin-top: 18px; font-size: .95rem; color: var(--muted); }
.quote-card .who b { color: var(--gold-bright); font-weight: 600; }

/* ============================ MEDIA / PRESS ============================ */
/* The index shares the articles' treatment: one centred column, so the announcement list and the
   heading above it hang off the same left edge instead of drifting apart across a 1180px grid. */
.media-index { max-width: 820px; margin-inline: auto; }
.media-list { display: grid; gap: 16px; margin-top: 40px; }
.media-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-s); }
.media-item .date { font-size: .78rem; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.media-item h3 { margin: 9px 0 11px; font-size: 1.12rem; line-height: 1.34; }
.media-item p { font-size: .95rem; color: var(--text-dim); margin: 0; line-height: 1.7; }
.media-item p + p { margin-top: 14px; } /* summary → "Read the press release →" */
.media-empty { background: var(--surface-2); border: 1px dashed var(--line-bright); border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; color: var(--muted); margin-top: 24px; }

/* ============================ LONG-FORM ARTICLE (press releases) ============================ */
/* Component pages build their own rhythm out of grids and cards. A press release is plain prose,
   and the global margin reset leaves it with no measure and no air: paragraphs touch each other
   and headings sit flush on the paragraph above. .prose supplies both.
   Barlow's 400 maps to the Medium face, so long body copy needs a shorter line, more leading and
   a touch of tracking to stop reading as a wall.

   The column is CENTRED. A max-width alone pins the measure to the left edge of the page grid, which
   is what made these pages read as misaligned: every line hugged the left rule while a third of the
   width stayed empty on the right, and the full-width header above never lined up with it. Newsrooms
   centre the column and let framed blocks break out wider than the text — see .prose .callout below
   and the .pagehead.article header, which shares this exact measure. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.78; letter-spacing: .01em; color: var(--text-dim); }
/* The h2 owns the whole boundary between two sections — space above, hairline, space below — so
   the gap is identical whether the section it follows ended in a paragraph, a list or a quote card.
   A heading belongs to what comes after it, hence far more room above than below. */
/* Section headings take weight rather than size: at 400 (the Medium face) a subhead reads as a marker
   inside the article, where the display 200 thinned out and floated away from the text under it. */
.prose > h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 400; line-height: 1.26; letter-spacing: -.02em;
  margin: 64px 0 0; padding-top: 30px; border-top: 1px solid var(--line);
}
.prose > h2 + * { margin-top: 14px; }
.prose > h3 { font-size: 1.14rem; font-weight: 600; color: var(--text); margin: 36px 0 0; }
.prose > h3 + * { margin-top: 10px; }
/* Long-form headings opt OUT of the display weight above. A marketing headline is meant to arrest; a
   subhead inside a press release is meant to be a signpost you read past, and 700 at this size fights the
   body text either side of it. Stated here so a press release keeps the reading weight whichever order
   these two style branches land in. */
.prose > h1, .prose > h2, .pagehead.article h1 { font-weight: 400; letter-spacing: -.02em; }
.prose > ul, .prose > ol { padding-left: 1.15rem; }
.prose > p + ul, .prose > p + ol { margin-top: 10px; } /* a list belongs to the sentence introducing it */
.prose li + li { margin-top: 9px; }
/* The place dateline reads as part of the first sentence, not as a label floating above the article. */
.prose .dateline-inline { font-weight: 600; color: var(--text); letter-spacing: .04em; }
/* Framed blocks set their own gap and break OUT past the text measure, so the article has a second
   rhythm instead of one uniform ribbon. Folded flat below the breakpoint, where there is no width to spare. */
.prose .callout, .prose .quote-card { max-width: none; margin: 26px 0 0; }
.prose > h2 + .callout, .prose > h2 + .quote-card { margin-top: 18px; }
.prose .quote-card blockquote { font-size: 1.12rem; line-height: 1.7; }
.prose .callout li, .prose .quote-card p { letter-spacing: 0; }
.prose .backlink { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
@media (min-width: 861px) {
  .prose .callout, .prose .quote-card { margin-inline: -8%; }
}
@media (max-width: 560px) {
  .prose > h2 { margin-top: 46px; padding-top: 24px; }
}

/* ── The article header, sharing the article's measure ──
   A press release opens the way a newsroom does: eyebrow, then date, then headline, then standfirst —
   all on the same centred column as the body, so the whole page hangs off one left edge. */
.pagehead.article .wrap > * { max-width: var(--measure); margin-inline: auto; }
.pagehead.article .eyebrow { margin-bottom: 10px; }
.pagehead.article .stamp { font-size: .92rem; color: var(--muted); margin-bottom: 18px; }
.pagehead.article h1 {
  font-size: clamp(1.95rem, 3.6vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.025em;
}

/* ============================ SCROLL REVEAL ============================ */
/* The .reveal-init class is added by reveal.js, so with JS off everything stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init { opacity: 0; transform: translateY(26px); transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  .reveal-init.reveal-in { opacity: 1; transform: none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 920px) {
  .hero-grid, .split, .split.flip { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .split-media, .hero-art { order: -1; }
  .cards, .cards.two, .cards.four { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .nav-links { position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; }
  .nav-cta { margin-top: 8px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-login-mobile { display: inline-flex; padding: 7px 16px; font-size: .9rem; margin-left: 12px; }
  /* mobile: dropdown renders inline, always expanded */
  .nav-drop { width: 100%; }
  .nav-drop > a { display: block; padding: 12px 0; }
  .nav-drop .drop-menu { display: block; position: static; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .nav-drop .drop-menu a { padding: 9px 0; }
}
@media (max-width: 560px) {
  section { padding: 62px 0; }
  .cards, .cards.two, .cards.four, .stats-grid, .contact-grid { grid-template-columns: 1fr; }
}