/* ===========================================================================
   PaperBridge — site styles (2026 revamp)
   ---------------------------------------------------------------------------
   Tokens plus about twenty reusable blocks. The old sheet carried ~640 lines of
   bespoke per-section rules, which is why each section looked slightly unlike
   the last; here a new section is composed, not restyled.

   On colour: the brand pair is navy and green, and they are used at full
   strength. An earlier pass kept everything near-white and hairline-grey and
   the result read as unfinished rather than restrained — so surfaces are
   either properly dark or properly tinted, each module owns an accent, and
   type carries real weight.
   ========================================================================= */

:root {
  /* ink */
  --ink:        #0A1026;
  --ink-soft:   #44506B;
  --muted:      #646F8B;   /* 5.0:1 on white, 4.7:1 on the tint — the previous
                              tone cleared neither, and captions are exactly the
                              text people squint at. */
  --on-dark:    #EEF2FF;
  --on-dark-dim:#C7D3F2;   /* body copy on dark. Brighter than it looks it needs
                              to be: on the deep gradient anything dimmer reads as
                              washed out rather than as quiet. */

  /* surfaces */
  --bg:         #FFFFFF;
  --bg-tint:    #F4F7FE;
  --deep:       #0A1433;   /* the dark sections */
  --deep-2:     #122052;
  --line:       #DFE6F5;
  --line-dark:  rgba(255,255,255,.14);

  /* brand */
  --navy:       #1E3A8A;
  --navy-bright:#2E5BE8;
  --green:      #16A34A;
  --green-bright:#22C55E;

  /* module accents — five modules that must read as peers, not as one
     product with four footnotes. Each owns a hue. */
  --c-doc:   #2E5BE8;
  --c-prop:  #0EA5A4;
  --c-ins:   #7C3AED;
  --c-task:  #E0761B;
  --c-time:  #16A34A;
  --c-plat:  #DB2777;

  --grad:       linear-gradient(120deg, var(--navy-bright) 0%, var(--green-bright) 100%);
  --grad-deep:  linear-gradient(140deg, #0A1433 0%, #16286B 55%, #0C2E4A 100%);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;

  --pad:  clamp(20px, 5vw, 40px);
  --gap:  clamp(14px, 1.8vw, 20px);
  --sect: clamp(34px, 3.6vw, 56px);
  --maxw: 1180px;

  --sh:    0 2px 6px rgba(10,16,38,.05), 0 18px 40px -26px rgba(10,16,38,.3);
  --sh-lg: 0 4px 10px rgba(10,16,38,.06), 0 34px 70px -34px rgba(13,30,90,.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16.5px; line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--sect) 0; position: relative; }
.section--tint { background: var(--bg-tint); }

/* A dark section. Used for rhythm — two or three per page, never adjacent. */
/* position:relative is load-bearing, not decoration: the ::before wash below
   is inset -10% on each side, and without a positioned ancestor it resolves
   against the page, escapes this overflow:hidden and scrolls the whole
   document sideways. .section supplies it, but .hero does not. */
.section--deep { position: relative; background: var(--grad-deep); color: var(--on-dark); overflow: hidden; }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .lede, .section--deep p { color: var(--on-dark-dim); }
.section--deep .eyebrow { color: var(--green-bright); }
.section--deep .small { color: var(--on-dark-dim); }
/* A soft colour wash so the dark is never flat. */
.section--deep::before {
  content: ''; position: absolute; inset: -40% -10% auto; height: 70%;
  background: radial-gradient(60% 60% at 25% 20%, rgba(46,91,232,.5), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(34,197,94,.33), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.section--deep > * { position: relative; z-index: 1; }

/* ── type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; }
h1 { font-size: clamp(38px, 6vw, 70px); letter-spacing: -0.042em; }
h2 { font-size: clamp(29px, 3.9vw, 46px); letter-spacing: -0.035em; }
h3 { font-size: clamp(18px, 1.7vw, 21px); font-weight: 650; letter-spacing: -0.02em; }
p  { margin: 0; }

.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede  { font-size: clamp(16.5px, 1.55vw, 20px); color: var(--ink-soft); line-height: 1.62; }
.small { font-size: 13.5px; color: var(--muted); }

/* Left-aligned by default. A centred stack of eyebrow + headline + lede on
   every section is the single most recognisable AI-site tell; centring is
   now the exception (.head--mid), used once a page at most. */
.head { max-width: 700px; margin: 0 0 calc(var(--gap) * 1.1); }
.head--mid { margin-inline: auto; text-align: center; }
.head--left { margin-inline: 0; text-align: left; }
.head h2 + .lede { margin-top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(46,91,232,.1); color: var(--navy-bright);
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.section--deep .eyebrow { background: rgba(255,255,255,.1); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px -8px rgba(46,91,232,.65); }
.btn--primary:hover { box-shadow: 0 14px 30px -10px rgba(46,91,232,.7); }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy-bright); color: var(--navy-bright); }
.section--deep .btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: var(--line-dark); }
.section--deep .btn--ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.btn--lg { padding: 15px 32px; font-size: 16.5px; }
.btn--block { width: 100%; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 24px; height: 92px; }
.brand__logo { height: 64px; width: auto; }   /* 820x270 — the strapline needs this much to be readable at all */
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav__links a { color: var(--ink-soft); transition: color .15s ease; }
.nav__links a:hover { color: var(--navy-bright); }
.nav__cta { display: flex; gap: 10px; }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px; margin-left: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.nav__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav__mobile { display: none; flex-direction: column; gap: 2px; padding: 8px var(--pad) 22px; border-top: 1px solid var(--line); background: #fff; }
.nav__mobile a { padding: 12px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-weight: 500; }
.nav__mobile a:last-child { border: 0; margin-top: 12px; }
.nav__mobile.open { display: flex; }
@media (max-width: 960px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(32px, 3.6vw, 50px) 0 clamp(30px, 3.4vw, 44px); }
/* The second line is "PaperBridge automates it." — 25 characters. A 17ch
   cap broke it across two lines regardless of viewport, which is what the
   <br> in the markup is already there to control. */
.hero h1 { max-width: none; }
.hero__h1 { font-size: clamp(30px, 4.6vw, 56px); }
.hero__sub { margin-top: 22px; max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero__note { margin-top: 18px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip {
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: rgba(255,255,255,.09); border: 1px solid var(--line-dark); color: var(--on-dark);
}

.vframe {
  margin-top: clamp(40px, 5vw, 60px);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  overflow: hidden; background: #0A1433; box-shadow: var(--sh-lg);
}
.vframe video { width: 100%; height: auto; }
.vframe__cap { padding: 13px 20px; border-top: 1px solid var(--line-dark); color: var(--on-dark-dim); font-size: 13.5px; }

/* ── module grid ─────────────────────────────────────────────────────────── */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 960px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mods { grid-template-columns: 1fr; } }

.mod {
  --c: var(--navy-bright);
  position: relative; display: flex; flex-direction: column; gap: 11px;
  padding: 24px 22px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mod:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-lg); }
.mod__icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px;
  border-radius: 13px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c);
}
.mod__icon svg { width: 22px; height: 22px; }
.mod p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.mod__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mod__list li { position: relative; padding-left: 19px; font-size: 13.5px; color: var(--muted); }
.mod__list li::before {
  content: ''; position: absolute; left: 0; top: 7.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c);
}
.mod__tag {
  align-self: flex-start; margin-top: auto; padding: 16px 0 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c);
}

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: s; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; padding: 20px 18px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); }
.step::before {
  content: counter(s, decimal-leading-zero);
  display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 8px;
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 15px; }

/* ── facts ───────────────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* Descending order matters: these carry equal specificity, so at 400px both
   match and the later rule is the one that applies. */
@media (max-width: 1000px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .facts { grid-template-columns: 1fr; } }
.fact { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); }
.fact__n { font-size: clamp(27px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.04em; }
.fact__l { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ── split ───────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.checks li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.checks .tick {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: var(--grad); color: #fff; margin-top: 2px;
}
.checks .tick svg { width: 15px; height: 15px; }
.checks strong { display: block; font-weight: 650; font-size: 16.5px; }
.checks span { font-size: 15px; color: var(--ink-soft); }
.section--deep .checks span { color: var(--on-dark-dim); }
.section--deep .checks strong { color: #fff; }

/* ── feature rows (features.html) ────────────────────────────────────────── */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.frow + .frow { margin-top: calc(var(--sect) * .8); }
.frow:nth-child(even) .frow__media { order: -1; }
@media (max-width: 900px) { .frow { grid-template-columns: 1fr; } .frow:nth-child(even) .frow__media { order: 0; } }
.frow__media {
  padding: 30px; border-radius: var(--r-lg); background: var(--bg-tint);
  border: 1px solid var(--line); box-shadow: var(--sh);
}
.kv { display: grid; gap: 11px; }
.kv__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 13px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px;
}
.kv__row b { font-weight: 650; }
.kv__row span { color: var(--muted); }
.pill {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--green-soft, #DCFCE7); color: #15803D;
}
.pill--amber { background: #FEF3C7; color: #92400E; }
.pill--blue  { background: #DBEAFE; color: #1D4ED8; }

/* ── pricing ─────────────────────────────────────────────────────────────── */
/* auto-fit, not repeat(N, 1fr): a 1fr track will not shrink past its own
   min-content, so four plans simply ran off the side between 980px and
   the full width. This reflows the row instead. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr !important; } }
.plan {
  display: flex; flex-direction: column; gap: 10px; padding: 32px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.plan--featured { border: 0; background: var(--grad-deep); color: var(--on-dark); box-shadow: var(--sh-lg); }
.plan--featured h3, .plan--featured .plan__price { color: #fff; }
.plan--featured .plan__feat li { color: var(--on-dark-dim); }
.plan__badge {
  align-self: flex-start; padding: 5px 13px; border-radius: 999px;
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.plan__price { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.04em; }
.plan__price small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan--featured .plan__price small { color: var(--on-dark-dim); }
.plan__feat { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan__feat li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink-soft); }
.plan__feat li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  color: var(--green-bright); font-weight: 800;
}
.plan .btn { margin-top: auto; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 22px; transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details[open] { border-color: var(--navy-bright); box-shadow: var(--sh); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none; font-weight: 650; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; display: grid; place-items: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 9px; background: var(--bg-tint);
  font-size: 19px; font-weight: 400; color: var(--navy-bright);
}
.faq details[open] summary::after { content: '–'; background: var(--grad); color: #fff; }
.faq details p { padding: 0 0 22px; font-size: 15px; color: var(--ink-soft); max-width: 70ch; }

/* ── forms / cards ───────────────────────────────────────────────────────── */
.card { padding: clamp(26px, 3.4vw, 38px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.demoform { display: grid; gap: 15px; }
.demoform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 560px) { .demoform__row { grid-template-columns: 1fr; } }
.demoform label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.demoform input, .demoform textarea {
  font: inherit; font-size: 15px; color: var(--ink); padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.demoform input:focus, .demoform textarea:focus { border-color: var(--navy-bright); box-shadow: 0 0 0 4px rgba(46,91,232,.13); }
.demoform textarea { resize: vertical; }
.demoform__note { font-size: 13.5px; color: var(--muted); text-align: center; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta h2 { max-width: 20ch; margin: 0 auto; }
.cta .lede { max-width: 56ch; margin: 16px auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 30px; }

/* ── legal / prose pages ─────────────────────────────────────────────────── */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { font-size: clamp(21px, 2.1vw, 26px); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17.5px; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15px; color: var(--ink-soft); line-height: 1.75; }
.prose p + p { margin-top: 12px; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 22px; display: grid; gap: 7px; }
.prose a { color: var(--navy-bright); font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose__meta {
  padding: 14px 18px; margin-bottom: 32px; border-radius: var(--r-sm);
  background: var(--bg-tint); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted);
}

/* ── page header (inner pages) ───────────────────────────────────────────── */
.phead { padding: clamp(52px, 7vw, 88px) 0 clamp(44px, 6vw, 72px); }
.phead h1 { font-size: clamp(32px, 4.6vw, 54px); max-width: 20ch; }
.phead .lede { margin-top: 18px; max-width: 62ch; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { padding: clamp(32px, 3.4vw, 46px) 0 26px; background: var(--grad-deep); color: var(--on-dark-dim); }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: var(--gap); padding-bottom: 30px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logobox { display: inline-block; padding: 10px 14px; background: #fff; border-radius: 12px; }
.footer__logobox .brand__logo { height: 46px; }
.footer__tag { margin-top: 15px; font-size: 15px; max-width: 32ch; }
.footer__col h5 { margin: 0 0 15px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.footer__col a { display: block; padding: 5px 0; font-size: 15px; color: var(--on-dark-dim); transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
/* One item now that the legal strip is gone — it repeated the Legal column
   directly above it. space-between on a single child just pins it left, which
   is what is wanted, but the rule says so rather than relying on that. */
.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px;
  padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 13.5px;
}
.footer__bar a { color: var(--on-dark-dim); }
.footer__bar a:hover { color: #fff; }

/* ── scroll reveal (visible if JS never runs) ────────────────────────────── */
[data-animate] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-animate] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .js [data-animate].in-view { opacity: 1; transform: none; }
}

/* ===========================================================================
   Legacy class map — features / pricing / about / legal pages
   ---------------------------------------------------------------------------
   These pages keep their original markup and are restyled against the tokens
   above rather than rewritten. Two reasons, and the second is the binding one:

     * their structure was already right; only the look was dated;
     * js/main.js BUILDS the pricing cards and emits .price__* and .addon__*
       itself. Renaming those classes in the HTML would leave every
       JS-generated card unstyled the moment live pricing loaded — and that is
       the one path nobody tests by eye, because it needs the API up.
   ========================================================================= */

/* page headers */
.pagehead { padding: clamp(38px, 4.4vw, 58px) 0 clamp(32px, 3.6vw, 46px); background: var(--grad-deep); color: var(--on-dark); position: relative; overflow: hidden; }
.pagehead::before {
  content: ''; position: absolute; inset: -60% -10% auto; height: 120%;
  background: radial-gradient(55% 55% at 22% 18%, rgba(46,91,232,.5), transparent 70%),
              radial-gradient(45% 45% at 82% 8%, rgba(34,197,94,.3), transparent 70%);
  pointer-events: none;
}
.pagehead__inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.pagehead h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); max-width: 20ch; }
.pagehead p { margin-top: 16px; max-width: 62ch; color: var(--on-dark-dim); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; }
.crumb { font-size: 13.5px; color: var(--on-dark-dim); margin-bottom: 14px; }
.crumb a { color: var(--on-dark-dim); } .crumb a:hover { color: #fff; }

/* the old eyebrow */
.kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.section .kicker { background: rgba(46,91,232,.1); color: var(--navy-bright); }
.spark { color: var(--green-bright); }

.section--soft { background: var(--bg-tint); }
.section__head { max-width: 700px; margin: 0 auto calc(var(--gap) * 1.1); text-align: center; }
.section__head h2 + p { margin-top: 15px; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; }
.container--narrow { max-width: 860px; } .container--wide { max-width: 1240px; }

/* features.html cards */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }
.feature {
  position: relative; padding: 28px 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-lg); }
.feature h3 { margin-bottom: 9px; }
.feature p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.feature__i {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 13px; background: rgba(46,91,232,.1); color: var(--navy-bright);
}
.feature__i svg { width: 22px; height: 22px; }

/* about.html */
.about-lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .about-lead__grid { grid-template-columns: 1fr; } }
.about-lead p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.75; }
.about-lead p + p { margin-top: 14px; }
.about-card { padding: clamp(26px, 3.4vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.value h3 { margin-bottom: 8px; }
.value p { font-size: 15px; color: var(--ink-soft); }
.value__i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 13px; border-radius: 12px; background: var(--grad); color: #fff; }
.value__i svg { width: 21px; height: 21px; }
/* Label over value, with a marker. The markup is
   .vrow > span + div > strong + small, and strong/small are both inline — so
   without an explicit block they render as "What we doDocument operations".
   The previous stylesheet evidently set that; the compat map did not carry it,
   which is what broke this page. */
.vrow { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 11px 0; }
.vrow + .vrow { border-top: 1px solid var(--line); }
.vrow > span {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 7px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700;
}
.vrow strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); margin-bottom: 2px; }
.vrow small { display: block; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.vrow small a { color: var(--navy-bright); font-weight: 600; }

/* pricing.html — markup produced by js/main.js, so these names are fixed */
.prices, #pricingGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); align-items: stretch; }
@media (max-width: 980px) { .prices, #pricingGrid { grid-template-columns: 1fr !important; } }
.price {
  display: flex; flex-direction: column; gap: 9px; padding: 32px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.price--featured { border: 0; background: var(--grad-deep); color: var(--on-dark); box-shadow: var(--sh-lg); }
.price--featured .price__name, .price--featured .price__amt b { color: #fff; }
.price--featured .price__desc, .price--featured .price__meta { color: var(--on-dark-dim); }
.price__badge {
  align-self: flex-start; padding: 5px 13px; border-radius: 999px; background: var(--grad);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.price__name { font-size: 17.5px; font-weight: 650; letter-spacing: -0.02em; }
.price__desc { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.price__amt { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; }
.price__amt b { font-size: clamp(27px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.04em; white-space: nowrap; }
.price__amt span { font-size: 15px; color: var(--muted); white-space: nowrap; }
.price--featured .price__amt span { color: var(--on-dark-dim); }
.price__meta { font-size: 12px; color: var(--muted); }
.price ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.price li { position: relative; padding-left: 25px; font-size: 15px; color: var(--ink-soft); }
.price li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--green-bright); font-weight: 800; }

/* AFTER .price li, not before it. Both selectors are one class plus one
   element, so they carry identical specificity and the later one simply wins.
   Sitting above, this override lost to the light-mode colour and left the
   plan we most want chosen rendering dark grey on dark navy. */
.price--featured li, .price--featured li b { color: #E8EEFC; }
.price--featured li::before { color: var(--green-bright); }
.price .btn { margin-top: auto; }

.addons, #addonGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .addons, #addonGrid { grid-template-columns: 1fr; } }
.addon { padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.addon__head { font-size: 16.5px; font-weight: 650; margin-bottom: 7px; }
.addon__price { font-size: 19px; font-weight: 750; letter-spacing: -0.03em; color: var(--navy-bright); margin-bottom: 7px; }
.addon p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

/* old FAQ markup (pricing.html uses .faq__item, not <details>) */
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.faq__item + .faq__item { margin-top: 12px; }
.faq__item h3 { font-size: 16.5px; margin-bottom: 7px; }
.faq__item p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; }

/* legal pages */
.prose__wrap { max-width: 820px; margin: 0 auto; }
.prose h2 { font-size: clamp(21px, 2.1vw, 26px); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17.5px; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15px; color: var(--ink-soft); line-height: 1.75; }
.prose p + p { margin-top: 12px; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 22px; display: grid; gap: 7px; }
.prose a { color: var(--navy-bright); font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 650; }
.updated {
  display: inline-block; padding: 8px 15px; margin-bottom: 30px; border-radius: 999px;
  background: var(--bg-tint); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted);
}

/* ===========================================================================
   Walkthrough + module list (2026 revamp, second pass)
   ---------------------------------------------------------------------------
   Replaces a hero video and a 3-up icon-card grid. Both were on every list of
   "this was generated" tells, and the video asked a first-time visitor to
   spend ten seconds before learning anything. Plain language and an asymmetric
   layout do the job the video was there to do.
   ========================================================================= */

/* The document's journey. Numbered rail down the left, consequence on the
   right — deliberately not four equal cards in a row. */
.walk { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .walk { grid-template-columns: 1fr; } }

.flow { display: grid; gap: 0; counter-reset: f; }
.flow__step {
  position: relative; counter-increment: f;
  padding: 0 0 22px 46px; border-left: 2px solid var(--line);
}
.flow__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow__step::before {
  content: counter(f); position: absolute; left: -15px; top: -2px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 700;
}
.flow__step b { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 3px; }
.flow__step span { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }

/* A plain-language restatement, set like a pull quote rather than body copy. */
.plain {
  padding: 26px 28px; border-radius: var(--r);
  background: var(--bg-tint); border: 1px solid var(--line);
}
.plain p { font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.6; color: var(--ink); }
.plain p + p { margin-top: 12px; }
.plain b { font-weight: 650; }
.plain__foot { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* Modules as a dense list. Six rounded icon cards in a grid is the named
   tell; this reads as a product's contents page instead. */
.mlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mrow {
  --c: var(--navy-bright);
  display: grid; grid-template-columns: 210px 1fr auto; gap: clamp(14px, 2.4vw, 32px);
  align-items: baseline; padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background .16s ease, padding-left .16s ease;
}
.mrow:hover { background: var(--bg-tint); padding-left: 10px; }
@media (max-width: 780px) { .mrow { grid-template-columns: 1fr; gap: 6px; } }
.mrow__name { font-size: 17.5px; font-weight: 650; letter-spacing: -0.02em; color: var(--c); }
.mrow__what { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.mrow__eg { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 780px) { .mrow__eg { white-space: normal; } }

/* Proof sits beside the decision, not at the foot of the page. */
.proof { display: grid; gap: 14px; margin-top: 22px; }
.proof__item { padding-left: 0; }
.proof__item b { display: block; font-size: 15px; font-weight: 650; }
.proof__item span { font-size: 15px; color: var(--ink-soft); }
.section--deep .proof__item span { color: var(--on-dark-dim); }
.section--deep .proof__item b { color: #fff; }

/* The walkthrough's right-hand column ran out of content halfway down the
   section, leaving a tall empty block beside steps 3-5. Filled with the record
   those steps produce rather than by shrinking the section: the gap was a
   missing payoff, not a spacing bug. */
.outcome { margin-top: 18px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.outcome__head { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.outcome__foot { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* "Who is this for" — stated in the hero because a visitor should not have to
   infer it. Taken from the flyer's BUILT FOR line. */
.hero__for { margin-top: 16px; color: var(--on-dark-dim); }
.hero__for b { color: #fff; font-weight: 650; }

/* ===========================================================================
   Scanner — a page being read, and the data coming off it
   ---------------------------------------------------------------------------
   Replaces describing extraction in prose. CSS only: no video to download, no
   library, and it degrades to a static document-and-fields diagram when the
   visitor has asked for reduced motion.
   ========================================================================= */
.scan { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(18px,3vw,42px); align-items: center; max-width: 1080px; margin: 0 auto; }
@media (max-width: 860px) { .scan { grid-template-columns: 1fr; } .scan__arrow { transform: rotate(90deg); justify-self: center; } }

/* the page — real text, because a stack of grey bars reads as a loading
   skeleton rather than as a document. This is the subject of the section, not
   an illustration beside the copy, so it is sized to carry it. */
.sheet {
  position: relative; width: 100%; max-width: 430px; justify-self: end;
  padding: 24px 24px 21px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--sh-lg); font-size: 13.5px; line-height: 1.5;
}
@media (max-width: 860px) { .sheet { justify-self: center; } }
.sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--navy-bright); }
.sheet__who { font-weight: 750; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.sheet__kind { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-bright); }
.sheet__meta { display: flex; justify-content: space-between; padding: 8px 0 12px; color: var(--muted); font-size: 11.5px; }
.sheet__rows { display: grid; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.sheet__row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sheet__row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__sum { display: grid; gap: 7px; padding-top: 9px; }
.sheet__row--tot { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line); font-weight: 750; color: var(--ink); }

/* The sweep. Lost when this block was rewritten for the invoice content — the
   element and the keyframes both survived, only the rule joining them did not,
   so the page kept a beam that was never drawn. */
.sheet__beam {
  position: absolute; left: 0; right: 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    rgba(46,91,232,.10) 38%,
    rgba(34,197,94,.22) 50%,
    rgba(46,91,232,.10) 62%,
    transparent);
  border-bottom: 1.5px solid rgba(34,197,94,.9);
  box-shadow: 0 2px 14px rgba(34,197,94,.45);
  animation: beam 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes beam { 0% { top: -42%; } 50%,100% { top: 104%; } }

.scan__arrow { color: var(--navy-bright); opacity: .5; }
.scan__arrow svg { width: 44px; height: 44px; }

/* the fields that come off it */
.fields { display: grid; gap: 10px; max-width: 430px; }
.field {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-radius: 11px;
  font-size: 16.5px; box-shadow: 0 1px 2px rgba(10,16,38,.04);
  animation: catch 3.6s ease infinite both;
}
.field b { font-weight: 650; }
.field span { color: var(--navy-bright); font-weight: 650; font-variant-numeric: tabular-nums; }
.field:nth-child(1) { animation-delay: .35s; }
.field:nth-child(2) { animation-delay: .70s; }
.field:nth-child(3) { animation-delay: 1.05s; }
.field:nth-child(4) { animation-delay: 1.40s; }
.field:nth-child(5) { animation-delay: 1.75s; }

/* Each field LIGHTS UP as the beam reaches its line — it does not fade in from
   nothing. Staggered opacity meant the column was empty for the first two
   seconds after load, and empty in every screenshot, which is a worse first
   impression than no animation at all. */
@keyframes catch {
  0%, 6%    { border-color: var(--line); background: #fff; transform: none; }
  12%       { border-color: var(--green-bright); background: #F2FDF6; transform: translateX(-2px); }
  26%, 100% { border-color: var(--line); background: #fff; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet__beam { display: none; }
  .field { animation: none; }
}

/* ── header that gets out of the way on scroll ───────────────────────────── */
/* The logo carries a strapline under the wordmark that is unreadable below
   about 46px, so it starts large. It shrinks once the visitor has scrolled,
   because by then they have read it and want the page back. */
.nav__inner { transition: height .22s ease; }
.brand__logo { transition: height .22s ease; }
.nav.is-scrolled .nav__inner { height: 62px; }
.nav.is-scrolled .brand__logo { height: 38px; }

/* The one picture of the whole product. Full-bleed within the container, no
   card chrome — the diagram already has its own frame and border. */
.flow { margin: 0; }
.flow img { width: 100%; height: auto; border-radius: var(--r); }

/* ===========================================================================
   Product tour — the actual screens, so the site can demo itself
   ---------------------------------------------------------------------------
   Built in HTML rather than screenshotted: it stays crisp at any width, reflows
   on a phone, and does not go stale the next time the app's padding changes.
   Driven by the .segtab / #segShow / .segslide machinery already in main.js,
   which auto-advances, pauses on hover and stops for reduced-motion.
   ========================================================================= */
.segtabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.segtab {
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .16s ease; white-space: nowrap;
}
.segtab:hover { border-color: var(--navy-bright); color: var(--navy-bright); }
.segtab.is-active { background: var(--grad); color: #fff; border-color: transparent; }

#segShow { position: relative; }
.segslide { display: none; }
.segslide.is-active { display: block; animation: slidein .35s ease both; }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .segslide.is-active { animation: none; } }

/* the app window */
.app {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-lg);
}
.app__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #F1F5FB; border-bottom: 1px solid var(--line); }
.app__dot { width: 9px; height: 9px; border-radius: 50%; background: #CFD8E8; }
.app__url { margin-left: 10px; padding: 3px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.app__body { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; }
@media (max-width: 700px) { .app__body { grid-template-columns: 1fr; } .app__side { display: none; } }

.app__side { background: #142A63; padding: 14px 10px; color: #C7D3F2; }
.app__brand { display: flex; align-items: center; gap: 7px; padding: 0 8px 14px; font-size: 12px; font-weight: 700; color: #fff; }
.app__brand i { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--grad); }
.app__navitem { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; font-size: 11.5px; margin-bottom: 1px; }
.app__navitem b { width: 13px; height: 13px; border-radius: 3px; background: rgba(255,255,255,.17); flex: 0 0 auto; }
.app__navitem.is-on { background: rgba(255,255,255,.14); color: #fff; font-weight: 650; }
.app__navitem.is-on b { background: var(--green-bright); }
.app__navsec { padding: 12px 9px 5px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(199,211,242,.55); }

.app__main { padding: 0; background: #fff; min-width: 0; }
.app__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.app__title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.app__who { font-size: 10.5px; color: var(--muted); text-align: right; line-height: 1.35; }
.app__pane { padding: 14px 16px 18px; }

/* stat row */
.app__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 13px; }
.app__stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.app__stat u { display: block; font-size: 10.5px; text-decoration: none; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.app__stat strong { display: block; font-size: 17.5px; font-weight: 750; letter-spacing: -0.03em; margin-top: 2px; }

/* table */
.app__tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.app__tbl thead th {
  background: #1E3A8A; color: #fff; text-align: left; padding: 7px 10px; font-weight: 650;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
}
.app__tbl thead th:first-child { border-radius: 7px 0 0 0; }
.app__tbl thead th:last-child { border-radius: 0 7px 0 0; }
.app__tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.app__tbl td b { color: var(--ink); font-weight: 650; }
.app__tbl tr:last-child td { border-bottom: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.tag--ok { background: #DCFCE7; color: #166534; }
.tag--warn { background: #FEF3C7; color: #92400E; }
.tag--info { background: #DBEAFE; color: #1D4ED8; }
.tag--dim { background: #EEF2F8; color: #52607A; }

/* two-pane screens (a document and its extracted fields) */
.app__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .app__split { grid-template-columns: 1fr; } }
.app__doc { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #FBFCFE; font-size: 10.5px; line-height: 1.6; }
.app__doc h6 { margin: 0 0 2px; font-size: 11.5px; font-weight: 750; }
.app__doc .r { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-soft); }
.app__doc .hr { height: 1px; background: var(--line); margin: 7px 0; }
.app__fld { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; font-size: 11.5px; }
.app__fld em { font-style: normal; color: var(--muted); }
.app__fld span { font-weight: 650; color: var(--navy-bright); }

/* ===========================================================================
   Pipeline — the flyer's flow diagram, rebuilt so people can poke at it
   ---------------------------------------------------------------------------
   One bounded panel, not three loose rows: a tinted card holds the channels,
   the hub and the five stages, and the curves between them are drawn by
   main.js from measured positions. Picking a stage rewrites the panel below
   and lights the wire feeding it.
   ========================================================================= */
.pipe {
  position: relative; isolation: isolate;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: calc(var(--r) + 6px);
  border: 1px solid var(--line);
  background:
    radial-gradient(760px 280px at 50% 48%, rgba(46,91,232,.09), transparent 72%),
    #F2F6FD;
}
.pipe > *:not(.pipe__wires) { position: relative; z-index: 1; }

.pipe__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.pipe__wire { fill: none; stroke-linecap: round; }
.pipe__wire--base { stroke-width: 2; opacity: .45; transition: opacity .2s ease, stroke-width .2s ease; }
.pipe__wire--pulse { stroke-width: 2.5; }
.pipe__wire.is-lit { opacity: 1; stroke-width: 2.5; }

.pipe__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 24px);
}
.pipe__title {
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 650;
  letter-spacing: -0.02em; color: var(--ink);
}
.pipe__hint {
  padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  transition: opacity .3s ease;
}
.pipe.is-touched .pipe__hint { opacity: 0; }

/* channels in */
.pipe__ways { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.way {
  --c: var(--navy-bright);
  display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 650; color: var(--ink);
  box-shadow: 0 1px 2px rgba(10,16,38,.04), 0 10px 24px -20px rgba(10,16,38,.5);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.way:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--c); }
.way i {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--c); color: #fff;
}
.way i svg { width: 16px; height: 16px; }
.way span { line-height: 1.25; min-width: 0; }
.way em { display: block; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted); }

/* the hub, with room above and below for the wires to fan */
.pipe__mid { display: grid; place-items: center; padding-block: clamp(42px, 5vw, 66px); }
.pipe__hub {
  position: relative; display: grid; justify-items: center; gap: 7px;
  padding: 16px 30px 14px; border-radius: 18px;
  background: #fff; border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 4px 10px rgba(10,16,38,.05), 0 26px 50px -28px rgba(30,58,138,.55);
}
.pipe__hub::before {
  content: ''; position: absolute; inset: -22px; z-index: -1; border-radius: 34px;
  background: radial-gradient(closest-side, rgba(46,91,232,.18), transparent 75%);
}
.pipe__hub img { height: clamp(34px, 3.4vw, 44px); width: auto; }
.pipe__hubt { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); }

/* stages out */
.pipe__stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stage {
  --c: var(--navy-bright);
  display: grid; gap: 3px; padding: 13px 14px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(10,16,38,.04), 0 10px 24px -20px rgba(10,16,38,.5);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.stage:hover { transform: translateY(-3px); border-color: var(--c); }
.stage.is-on {
  border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff);
  box-shadow: 0 10px 26px -14px var(--c);
}
.stage__n {
  display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 4px;
  border-radius: 50%; background: var(--c); color: #fff;
  font-size: 11.5px; font-weight: 750; line-height: 1;
}
.stage__t { font-size: 13.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--c); }
.stage__s { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* what the chosen stage does */
.pipe__detail {
  margin-top: 14px; padding: 15px 20px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(10,16,38,.05);
}
.pipe__detail h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pipe__detail p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.pipe__detail ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.pipe__detail li {
  padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
  font-size: 12px; font-weight: 550; color: var(--ink-soft);
}

/* On a phone the fan makes no sense — the wires switch off and it reads as a
   plain top-to-bottom list, which is the same story in less space. */
@media (max-width: 820px) {
  .pipe__ways, .pipe__stages { grid-template-columns: repeat(2, 1fr); }
  .pipe__mid { padding-block: 26px; }
  .pipe__wires { display: none; }
}
@media (max-width: 440px) {
  .pipe__ways, .pipe__stages { grid-template-columns: 1fr; }
  .pipe__hubt { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .way:hover, .stage:hover { transform: none; }
}

/* Caption above each tour screen. The tabs name the module; this says what it
   does, so the tour can carry a demo on its own. */
.segcap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: 16px; padding: 0 2px;
}
.segcap__say { flex: 1 1 440px; min-width: 0; }
.segcap h3 {
  font-size: clamp(19px, 2vw, 24px); font-weight: 700;
  letter-spacing: -0.025em; margin-bottom: 5px;
}
.segcap p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.segcap ul {
  flex: 0 1 auto; list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end;
}
.segcap li {
  padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12px; font-weight: 550; color: var(--ink-soft); white-space: nowrap;
}
@media (max-width: 860px) {
  .segcap ul { justify-content: flex-start; }
}

/* The scan is the point of this section — the heading only introduces it, so
   it drops off the global h2 scale and gets out of the way. */
#processing .head { max-width: 620px; margin-bottom: clamp(18px, 2.2vw, 26px); }
#processing .head .eyebrow { margin-bottom: 11px; }
#processing .head h2 { font-size: clamp(20px, 2.1vw, 27px); letter-spacing: -0.025em; }
#processing .head .small { margin-top: 8px; text-wrap: balance; }

/* ===========================================================================
   Hero — two columns, because one column of prose read as a wall
   ---------------------------------------------------------------------------
   The paragraph that used to sit here listed six document types and two
   sentences of mechanism before anyone had reason to care. It is replaced by
   four words that light in turn, and by the automation actually running
   beside them.
   ========================================================================= */
.hero__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.78fr);
  gap: clamp(26px, 4vw, 58px); align-items: start; margin-top: 22px;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

/* the four verbs */
.hero__beat {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px;
  font-size: clamp(17.5px, 1.9vw, 23px); font-weight: 650; letter-spacing: -0.02em;
}
.hero__beat span { color: rgba(255,255,255,.42); animation: beat 4.4s ease-in-out infinite both; }
.hero__beat span:nth-child(1) { animation-delay: 0s; }
.hero__beat span:nth-child(2) { animation-delay: .5s; }
.hero__beat span:nth-child(3) { animation-delay: 1s; }
.hero__beat span:nth-child(4) { animation-delay: 1.5s; }
@keyframes beat {
  0%, 46%, 100% { color: rgba(255,255,255,.42); }
  8%, 30%       { color: #fff; }
}

/* the automation, running */
.hero__run { display: grid; gap: 9px; }
@media (max-width: 940px) { .hero__run { max-width: 420px; } }
.hrow {
  position: relative; display: grid; align-items: center; gap: 11px;
  grid-template-columns: 38px 1fr auto;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
}
.hrow i {
  display: grid; place-items: center; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.1); color: var(--on-dark-dim);
  font-size: 10.5px; font-weight: 750; letter-spacing: .08em; font-style: normal;
}
.hrow b { font-size: 13.5px; font-weight: 600; color: var(--on-dark); }
.hrow em {
  font-style: normal; font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  color: var(--green-bright); opacity: 0;
  animation: hdone 4.4s ease-in-out var(--d) infinite both;
}
/* the fill, left to right, then the outcome lands */
.hrow u {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--grad); border-radius: 2px;
  animation: hfill 4.4s ease-in-out var(--d) infinite both;
}
@keyframes hfill { 0% { width: 0; } 18%, 86% { width: 100%; } 100% { width: 100%; opacity: 0; } }
@keyframes hdone { 0%, 14% { opacity: 0; } 22%, 86% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero__beat span { animation: none; color: #fff; }
  .hrow u { animation: none; width: 100%; }
  .hrow em { animation: none; opacity: 1; }
}

/* A hyphen is a break opportunity, so "re-typing it" split across two lines
   and left "re-" hanging at the end of the first. */
.nowrap { white-space: nowrap; }

/* Four of something in a three-up grid leaves one card stranded on its own
   row. Used where the count is even. */
.mods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mods--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mods--4 { grid-template-columns: 1fr; } }

/* The headline shares a row with the running panel now, so the panel sits
   beside it instead of below — the space to its right was simply empty. */
.hero__grid { align-items: center; margin-top: 0; }

/* Product cards in the family section carry their own link. The pseudo-element
   stretches over the whole card so the card itself is the hit area, while the
   visible text still says where it goes. */
.mod__link {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--c); text-decoration: none;
}
.mod__link::after { content: '→'; transition: transform .18s ease; }
.mod__link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.mod:hover .mod__link::after { transform: translateX(3px); }
.mod:has(.mod__link) { cursor: pointer; }
.mod__link:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 4px; }

/* "Custom flows" is two words where the other three are a single token. At the
   full size it wrapped, making that card a line taller than its neighbours and
   dropping its caption out of line with theirs. Sized to hold one line. */
.fact__n--long { font-size: clamp(20px, 2.1vw, 27px); white-space: nowrap; }

/* The 3-4px coloured bar down one edge or across the top of a card was on six
   components here. It is a stock generated-template tell, so it is gone; the
   per-component colour survives where it still carries meaning — module names,
   list bullets, product links, the selected stage. */