/* ============================================================
   iBidLogistics public site.
   One stylesheet, no framework. The FAQ accordion is native
   <details>/<summary>, the mobile nav is a CSS-only scroll row -- still
   true. The one deliberate exception is mapbg.js/mapbg-worker.js, a
   decorative animated background (see .map-bg below); everything else on
   the site still renders and works completely with JavaScript off.

   Visual language matches traqo.ai / superprocure.com's category: a dark,
   editorial "AI-native platform" aesthetic -- near-black navy throughout
   (not a dark hero over an otherwise light page), a display serif for
   headlines against a geometric sans for everything else, pill-shaped
   buttons, glass cards, and a single indigo accent with pink used
   sparingly for "this one's for you" emphasis. Product screenshots stay
   in their light browser/phone chrome deliberately -- a bright screen
   against a near-black page is the same trick those sites use for their
   own product shots.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Two near-black navy bands, alternated section to section -- this is
     the base surface everywhere, not a hero-only treatment. */
  --bg-1: #06071a;
  --bg-2: #080829;
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,.75);
  --ink-faint: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.06);
  --glass: rgba(255,255,255,.05);
  --glass-hover: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.1);

  --brand: #4f5fe0;       /* indigo -- primary buttons, links, glows */
  --brand-2: #6366f1;     /* indigo-500 -- eyebrow labels */
  --brand-dim: rgba(79,95,224,.16);
  --accent: #ec4899;      /* pink -- used sparingly, "recommended" emphasis only */
  --accent-dim: rgba(236,72,153,.12);
  --good: #34d399;
  --warn: #f59e0b;

  /* Surfaces that were hardcoded to the dark navy before the light theme
     existed. Tokenised so ONE definition serves both themes rather than a
     pile of [data-theme] overrides further down the file. */
  --head-bg: rgba(6,7,26,.72);      /* sticky header, over blur */
  --mask-1: rgba(6,7,26,.68);       /* map-canvas veil, centre */
  --mask-2: rgba(6,7,26,.94);       /* map-canvas veil, edges */
  --track: rgba(255,255,255,.08);   /* empty half of a progress bar */
  --mock-border: rgba(255,255,255,.14); /* browser/screenshot chrome edge */
  --hero-wash: rgba(6,7,26,.6);     /* inner-page hero band, under its glows */
  /* The two colour blooms the hero and page-head sit under. Tokenised because
     the light theme needs its own pair: alphas tuned for a near-black ground
     read as faint smudges on white, which made the light hero look washed out. */
  --hero-glow-1: rgba(79,95,224,.28);   /* home hero, top-left indigo bloom */
  --hero-glow-2: rgba(236,72,153,.16);  /* home hero, top-right pink bloom */
  --head-glow-1: rgba(79,95,224,.22);   /* inner-page head: same blooms, quieter */
  --head-glow-2: rgba(236,72,153,.14);
  --foot-bg: #030412;               /* footer, a shade below --bg-1 */
  --brand-hover: #3f4fd0;           /* solid button hover: a step DARKER than --brand */
  --ghost-border: rgba(255,255,255,.24);       /* outline button, on the page bg */
  --ghost-border-hover: rgba(255,255,255,.5);
  --funnel-ink: #fff;               /* funnel labels sit on a translucent brand tint */

  --radius: 20px;
  --radius-sm: 12px;
  --pill: 999px;
  --wrap: 1280px;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ============================ LIGHT THEME =============================
   Same token names, inverted surfaces -- so every rule in this file works
   in both themes without being written twice.

   Applied as <html data-theme="light"> by the inline snippet in the head
   fragment, which runs BEFORE first paint so there is no flash of the dark
   theme on a light-theme visitor's reload.

   DARK REMAINS THE DEFAULT, deliberately: it is the site's signature look,
   so an operating-system light preference does not silently restyle the
   brand for most visitors. Only an explicit click on the toggle switches,
   and that choice is remembered. To honour the OS preference instead, see
   the one-line note in the head fragment.

   Contrast: --ink on --bg-1 is #0b1020 on #ffffff (about 18:1) and the dimmed
   variant is ~7:1, both past WCAG AA for body text. --brand darkens from
   #4f5fe0 to #4338ca because the lighter indigo only reached ~3.9:1 on white,
   which fails AA for the link and button text it carries.
   ===================================================================== */
:root[data-theme="light"] {
  --bg-1: #ffffff;
  --bg-2: #f4f6fb;
  --ink: #0b1020;
  --ink-dim: rgba(11,16,32,.72);
  --ink-faint: rgba(11,16,32,.56);
  --line: rgba(11,16,32,.12);
  --line-soft: rgba(11,16,32,.07);
  --glass: rgba(11,16,32,.035);
  --glass-hover: rgba(11,16,32,.06);
  --glass-border: rgba(11,16,32,.10);

  --brand: #4338ca;
  --brand-2: #4f46e5;
  --brand-dim: rgba(67,56,202,.10);
  --accent: #db2777;
  --accent-dim: rgba(219,39,119,.10);
  --good: #047857;
  --warn: #b45309;

  --head-bg: rgba(255,255,255,.78);
  --mask-1: rgba(255,255,255,.55);
  --mask-2: rgba(255,255,255,.88);
  --track: rgba(11,16,32,.09);
  --mock-border: rgba(11,16,32,.14);
  --hero-wash: rgba(244,246,251,.75);
  /* On white the blooms need more chroma, not less: indigo-500 instead of the
     dark theme's dimmer indigo, and alphas picked so the colour clearly reads
     without swallowing the ink (AA contrast is carried by --ink, not these). */
  --hero-glow-1: rgba(99,102,241,.22);
  --hero-glow-2: rgba(236,72,153,.15);
  --head-glow-1: rgba(99,102,241,.16);
  --head-glow-2: rgba(236,72,153,.11);
  --foot-bg: #eef1f8;
  --brand-hover: #3730a3;
  /* White borders/labels vanish on a white page: the outline button needs an
     ink-based edge, and the funnel labels sit on a pale brand tint here rather
     than the dark one they were written for, so they take the ink colour. */
  --ghost-border: rgba(11,16,32,.22);
  --ghost-border-hover: rgba(11,16,32,.45);
  --funnel-ink: var(--ink);
}

/* 78.125% of the browser default (16px -> 12.5px) rather than a fixed px
   value, so it still respects a visitor's own font-size preference. Nearly
   every size in this file is rem, so this one line scales all text
   sitewide; spacing/padding/icons are px and stay exactly where they are. */
html { font-size: 78.125%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-1);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-2); }
h1, h2, h3, h4 { line-height: 1.05; margin: 0 0 .5em; letter-spacing: -0.01em; font-weight: 400; }
h1, h2 { font-family: var(--font-serif); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 2.2vw, 2.9rem); }
h3 { font-size: 1.14rem; font-weight: 700; font-family: var(--font-sans); }
h4 { font-size: .98rem; font-weight: 700; font-family: var(--font-sans); }
p { margin: 0 0 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 860px; }
.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;
}
.skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.muted { color: var(--ink-dim); }

/* ---- header ---- */
/* Fixed + translucent + blurred rather than solid: this is the no-scroll-
   listener approximation of the "transparent, then solidifies" header
   pattern -- no JS on this site, so it's blurred-translucent from the
   first frame instead of only after a scroll event. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--head-bg); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand__logo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__text > b { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.brand__text > span { font-size: .64rem; color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.site-nav a { color: var(--ink-dim); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* No JS on this site, so no hamburger menu -- below 760px the nav drops to
   its own scrollable row under the brand/Login bar instead of disappearing.
   A hidden nav left every other page reachable only through in-page CTAs and
   the footer, with nothing persistent once you'd scrolled past them. */
@media (max-width: 760px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 10px; padding-block: 12px; min-height: 0; }
  .site-nav {
    order: 3; width: 100%; flex-wrap: nowrap; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}
/* Body content starts below the fixed header -- every page needs this
   once, so it lives on <main> rather than being repeated per page. Also the
   content-layer half of the .map-bg stacking contract below: a fixed
   z-index:1 canvas paints ABOVE any unpositioned element regardless of DOM
   order, so main needs its own stacking context at a higher z-index or the
   background would cover the page. */
main { display: block; padding-top: 76px; position: relative; z-index: 10; }
/* The wrapped two-row header above is ~153px tall, so 76px left every
   inner page's breadcrumb hidden behind it and the eyebrow half-covered on
   phones. Same breakpoint as the wrap; the value is the measured header
   height plus a little air. (The .legal h2 scroll offset further down is
   the same number for the same reason.) */
@media (max-width: 760px) { main { padding-top: 160px; } }

/* ---- animated background map (decorative -- a stylized corridor network
   with simulated vehicles, not a live feed of anything) ----
   Mounted once, in the header fragment, so it's the first thing in <body>
   on every page. Layer contract: canvas paints behind everything (z:1),
   the radial mask keeps it from ever competing with text for contrast
   (z:2), main/.site-foot sit above both (z:10). .site-head is already
   translucent+blurred so it naturally shows a hint of it through too. */
.map-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.map-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-bg__mask {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(65% 65% at 50% 38%, var(--mask-1), var(--mask-2) 100%);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: var(--pill); padding: 0 26px; font-weight: 600;
  text-decoration: none; font-size: .94rem; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-sans); white-space: nowrap;
}
.btn--solid { background: var(--brand); color: #fff; box-shadow: 0 8px 24px -8px rgba(79,95,224,.55); }
.btn--solid:hover { background: var(--brand-hover); }
.btn--ghost { border-color: var(--ghost-border); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ghost-border-hover); }
.btn--lg { height: 52px; padding: 0 30px; font-size: .98rem; }

/* Small uppercase label above a heading -- ONE Platform / Analytics / etc. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-2); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--brand-2); display: inline-block; }

/* Glass pill badge -- the "Recognized by Gartner & G2" style strip above a
   hero headline. */
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: var(--pill); padding: 7px 16px;
  font-size: .8rem; color: var(--ink-dim); margin-bottom: 22px;
}
.badge-pill b { color: var(--ink); font-weight: 700; }

/* ---- page furniture ---- */
section { padding: clamp(40px, 6vw, 88px) 0; position: relative; }
section + section { border-top: 1px solid var(--line-soft); }
.alt { background: var(--bg-2); }
.head { max-width: 62ch; margin-bottom: 34px; }
.head p { color: var(--ink-dim); font-size: 1.05rem; margin: 0; }
.lede { font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); color: var(--ink-dim); max-width: 58ch; }

/* Two-column layouts that stack on narrow screens: hero copy beside the
   device composite, and the analytics teaser beside its mini panel. */
.two-col { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col--hero { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 880px) { .two-col--even { grid-template-columns: 1fr 1fr; } }

/* The home hero band. Lives here rather than inline on the section so the
   glows and wash follow the theme -- the old inline style froze the dark
   values, which over a light page collapsed into a muddy grey band. */
.hero {
  background:
    radial-gradient(65% 130% at 15% 0%, var(--hero-glow-1), transparent 60%),
    radial-gradient(55% 110% at 100% 10%, var(--hero-glow-2), transparent 55%),
    var(--hero-wash);
  padding-top: clamp(40px, 6vw, 68px);
}
/* On white the band needs a seat, or it dissolves into the trust strip below.
   Light-only on purpose: dark separates by value already. */
:root[data-theme="light"] .hero { border-bottom: 1px solid var(--line-soft); }

.page-head {
  /* Translucent base layer (not solid --bg-1) so the background map shows
     through here same as it does everywhere else -- this band is the top
     of every inner page, the one place besides the home hero with room for
     it to actually read. */
  background:
    radial-gradient(60% 140% at 12% 0%, var(--head-glow-1), transparent 60%),
    radial-gradient(50% 120% at 100% 0%, var(--head-glow-2), transparent 55%),
    var(--hero-wash);
  padding: clamp(34px, 5vw, 52px) 0 clamp(24px, 3.5vw, 38px);
}
.crumbs { font-size: .84rem; color: var(--ink-faint); margin-bottom: 14px; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 26px; }
.card h3 { margin-bottom: .35em; color: var(--ink); }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-dim); font-size: .96rem; }
.icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-dim); color: var(--brand-2); margin-bottom: 16px; }
.icon svg { width: 21px; height: 21px; }

.cta-band {
  background:
    radial-gradient(70% 160% at 15% 20%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(135deg, #4f5fe0, #3730a3);
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); }
.cta-band .btn--ghost { background: transparent; border-color: rgba(255,255,255,.42); color: #fff; }
.cta-band .btn--ghost:hover { border-color: #fff; }
.cta-band .btn--solid { background: #fff; color: var(--brand); box-shadow: none; }
.cta-band .btn--solid:hover { background: #f2f3ff; }

/* ---- stat row (trust strip) ---- */
.stat-row { text-align: center; }
.stat-row b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); color: var(--ink); display: block; }
.stat-row span { font-size: .82rem; color: var(--ink-faint); }

/* ---- numbered flow ---- */
.flow { counter-reset: step; display: grid; gap: 18px; padding: 0; margin: 0; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow li { list-style: none; position: relative; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 24px 24px 24px 66px; }
.flow li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 24px; top: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}
.flow h3 { font-size: 1rem; margin-bottom: .25em; color: var(--ink); }
.flow p { font-size: .92rem; color: var(--ink-dim); margin: 0; }

/* ---- device composite: web + mobile together ---- */
/* Screenshots stay in light chrome on purpose -- a bright app screen
   against near-black is the same contrast trick this look is built on,
   not an inconsistency to fix. */
.composite { position: relative; padding-bottom: 46px; padding-right: 26px; }
.browser { border: 1px solid var(--mock-border); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef2f7; border-bottom: 1px solid #dde5ef; }
.browser__dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.browser__url { margin-left: 10px; font-size: .7rem; color: #7b8aa0; background: #fff; border: 1px solid #dde5ef; border-radius: 5px; padding: 2px 10px; }
/* The captures carry the pilot customer's name in their top band; the viewport
   crops it rather than the files being edited. Default tuning is for the
   1600x1000 app captures (62.5% native aspect) -- padding-bottom shorter than
   that crops the bottom too, and inset shifts the masthead (~55px, ~5.5% of
   1000) out the top with a little margin. */
.browser__view { height: 0; padding-bottom: 46%; overflow: hidden; position: relative; }
.browser__view img { position: absolute; inset: -8% 0 auto 0; width: 100%; }
/* Taller dashboard captures (1600x1200): show more of the page below the
   masthead rather than cropping tight like the hero shots. */
.browser__view--tall { padding-bottom: 60%; }
/* Masked at capture time rather than cropped, so there's no masthead to hide
   -- show the frame as captured (1600x900) instead of insetting the top. */
.browser__view--flat { padding-bottom: 56.25%; }
.browser__view--flat img { inset: 0; }

.phone {
  position: absolute; right: 0; bottom: 0; width: 27%; min-width: 118px;
  border: 8px solid #14202f; border-radius: 22px; overflow: hidden; background: #14202f;
  box-shadow: 0 30px 60px -16px rgba(0,0,0,.7);
}
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34%; height: 5px; border-radius: 100px; background: #2c3a4c; z-index: 2; }
.phone img { border-radius: 14px; }

/* Standalone frames for single-image cards (Analytics extra shots, the
   Solutions role cards) -- same chrome as .browser/.phone but not paired
   inside a .composite, so no absolute positioning to fight. */
.shot-web { border: 1px solid var(--mock-border); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 26px 60px -22px rgba(0,0,0,.6); margin-top: 16px; }
.shot-phone { width: 210px; margin: 16px auto 0; border: 8px solid #14202f; border-radius: 22px; overflow: hidden; background: #14202f; box-shadow: 0 22px 46px -16px rgba(0,0,0,.65); position: relative; }
.shot-phone::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34%; height: 5px; border-radius: 100px; background: #2c3a4c; z-index: 2; }
.shot-phone img { display: block; width: 100%; border-radius: 14px; }

/* ============================================================
   Analytics page. Everything below is drawn in CSS/SVG — the
   figures shown are illustrative, and labelled as such on the
   page, not a customer's real numbers.
   ============================================================ */
.panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 24px; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.panel__head h3 { margin: 0; color: var(--ink); }
.panel__head span { font-size: .78rem; color: var(--ink-faint); }

.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 16px; background: var(--glass); }
.kpi b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; color: var(--ink); line-height: 1.1; }
.kpi small { display: block; font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.kpi .delta { font-size: .8rem; font-weight: 650; margin-top: 6px; display: inline-block; }
/* Both through tokens: .down was a bare orange-400 that read 1.96:1 on the
   light panel, the one hard-coded text colour the light theme still had. */
.up { color: var(--good); } .down { color: var(--warn); }

/* funnel */
.funnel { display: grid; gap: 9px; }
.funnel div { position: relative; background: rgba(79,95,224,.22); border-radius: 8px; padding: 11px 14px; font-size: .9rem; font-weight: 600; color: var(--funnel-ink); }
.funnel div span { float: right; color: var(--ink-faint); font-weight: 550; }
.funnel div:nth-child(1) { width: 100%; }
.funnel div:nth-child(2) { width: 88%; background: rgba(79,95,224,.19); }
.funnel div:nth-child(3) { width: 71%; background: rgba(79,95,224,.16); }
.funnel div:nth-child(4) { width: 64%; background: rgba(79,95,224,.13); }
.funnel div:nth-child(5) { width: 61%; background: rgba(79,95,224,.11); }

/* horizontal bars */
.bars { display: grid; gap: 12px; }
.bar__row { display: grid; grid-template-columns: 132px 1fr auto; gap: 12px; align-items: center; font-size: .88rem; color: var(--ink-dim); }
.bar__track { background: var(--track); border-radius: 100px; height: 9px; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.bar__row b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

/* trend */
.trend { width: 100%; height: auto; }
.trend .grid-line { stroke: var(--line); stroke-width: 1; }
.trend .area { fill: url(#tg); }
.trend .line { fill: none; stroke: var(--brand-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend .dot { fill: var(--bg-1); stroke: var(--brand-2); stroke-width: 2.5; }
.trend text { font-size: 10px; fill: var(--ink-faint); font-family: inherit; }

/* mini table */
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.tbl td { color: var(--ink-dim); }
.tbl td b { font-variant-numeric: tabular-nums; color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.pill--ok { background: rgba(52,211,153,.14); color: var(--good); }
.pill--warn { background: rgba(245,158,11,.16); color: var(--warn); }

.note {
  border-left: 3px solid var(--brand-2); background: var(--glass); padding: 14px 18px;
  border-radius: 0 12px 12px 0; font-size: .9rem; color: var(--ink-dim); margin: 26px 0 0;
}

/* ---- faq ---- */
.faq { max-width: 78ch; }
.faq details { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 650; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-2); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-dim); margin: 0 0 16px; font-size: .97rem; }
.faq details a { color: var(--brand-2); }

/* ---- contact + footer ---- */
.contact-grid { display: grid; gap: 26px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-line { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact-line .icon { margin: 0; flex: none; width: 38px; height: 38px; }
.contact-line b { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.contact-line span, .contact-line a { color: var(--ink-dim); }

.site-foot { background: var(--foot-bg); color: var(--ink-faint); padding: 48px 0 32px; font-size: .9rem; border-top: 1px solid var(--line-soft); position: relative; z-index: 10; }
.site-foot a { color: var(--ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot__cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 28px; }
.site-foot__cols h4 { color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; font-weight: 700; }
.site-foot__cols ul { list-style: none; margin: 0; padding: 0; }
.site-foot__cols li { margin-bottom: 9px; }
.site-foot__base { border-top: 1px solid var(--line-soft); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
/* The wordmark in the footer's first column. Was an inline color:#fff, which
   the light theme could not override -- white on the pale --foot-bg, so the
   company name vanished at the end of every light-theme page. */
.site-foot__brand { color: var(--ink); font-size: 1.05rem; font-weight: 700; }

/* ---- legal pages (privacy, terms, cookies) ----
   Long-form prose, so a reading measure rather than the marketing grid,
   numbered headings that match each page's table of contents, and a
   "what this means" summary card up top so nobody has to read 2,000 words
   to find out whether we sell their data (we don't). */
.legal { max-width: 78ch; }
.legal-meta { color: var(--ink-faint); font-size: .9rem; margin-bottom: 26px; }
.legal-summary { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 34px; }
.legal-summary h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.legal-summary ul { margin: 0; padding-left: 20px; color: var(--ink-dim); }
.legal-summary li { margin-bottom: 6px; }
.legal-toc { border-left: 2px solid var(--brand-2); padding-left: 18px; margin: 0 0 40px; }
.legal-toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; }
.legal-toc li { margin-bottom: 5px; break-inside: avoid; font-size: .94rem; }
.legal-toc a { color: var(--ink-dim); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; }
.legal h2 { font-family: var(--font-sans); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 44px 0 12px; scroll-margin-top: 90px; }
.legal h3 { font-size: 1.04rem; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--ink-dim); }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 1rem; }
.legal li { margin-bottom: 6px; }
.legal li > ul { margin-top: 6px; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .94rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-dim); }
.legal th { color: var(--ink); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.legal-scroll { overflow-x: auto; }
/* Below 760px the header wraps onto two rows (see .site-head above) and
   stands ~150px tall, so the 90px heading offset left every contents-link
   target hidden behind it. Same breakpoint as the header, on purpose. */
@media (max-width: 760px) { .legal h2 { scroll-margin-top: 170px; } }
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
  /* Tables become one labelled card per row: three or five columns on a
     335px measure were 100px-wide slivers of wrapped text. The label comes
     from each cell's data-label, which the pages copy from the column
     header. Header row hidden visually only (clip, not display:none) so
     a screen reader still announces the columns. */
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal tr { display: block; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass); padding: 6px 14px; margin-bottom: 12px; }
  .legal td { display: block; border: 0; padding: 8px 0; }
  .legal td + td { border-top: 1px solid var(--line-soft); }
  .legal td::before { content: attr(data-label); display: block; color: var(--ink); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
}

/* ---- theme toggle ----
   Sits between the nav and the Login button. Ships hidden (see the header
   fragment) and is revealed by theme.js, so it never appears as a dead
   control when JavaScript is off. The icon is pure CSS -- a filled disc that
   a box-shadow bites a crescent out of in dark mode, and a rayed sun in
   light -- so no icon font or SVG request for one 20px glyph. */
.theme-toggle {
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.theme-toggle:hover { background: var(--glass-hover); color: var(--ink); }

/* Dark theme -> offer light -> show a moon. */
.theme-toggle__icon {
  width: 15px; height: 15px; border-radius: 50%;
  background: transparent;
  box-shadow: inset -4px -1px 0 0 currentColor;
  transition: box-shadow 140ms ease, background 140ms ease;
}
/* Light theme -> offer dark -> show a sun: solid disc plus four rays. */
:root[data-theme="light"] .theme-toggle__icon {
  width: 11px; height: 11px;
  background: currentColor;
  box-shadow:
    0 -7px 0 -4px currentColor,
    0  7px 0 -4px currentColor,
    -7px 0 0 -4px currentColor,
     7px 0 0 -4px currentColor;
}

/* Product screenshots keep their light chrome in BOTH themes (see the note at
   the top of this file) -- but on a white page a white browser bar needs an
   edge or the mock dissolves into the background. */
:root[data-theme="light"] .browser__bar { border-bottom: 1px solid rgba(11,16,32,.10); }