/*
 * Prototype C - "Essence", extended.
 * Restraint is the aesthetic: one idea per section, large centred statements,
 * generous whitespace, navy only where it must land. Every product visual on
 * this page is a real screenshot of the running application (static/img/
 * product/), captured against a seeded demo tenant - no invented UI.
 *
 * Motion rule: nothing is driven by scroll position. What little movement
 * exists (the live dot) is a local, autonomous loop.
 */
:root{
  --navy:#0B2545; --navy-2:#123a6b; --navy-ink:#0a1727;
  --ink:#1b2430; --ink-60:#5a6675; --ink-40:#8b95a3; --ink-25:#b9c1cc;
  --paper:#ffffff; --tint:#f5f8fc; --tint-2:#eef3f9; --line:#e4eaf2;
  --green:#1a8f5a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 40px 80px -40px rgba(11,37,69,.4), 0 8px 24px -12px rgba(11,37,69,.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px;margin:0 auto;padding:0 28px}

/* ── Type scale ───────────────────────────────────────────────────────── */
h1{font-size:clamp(38px,6.1vw,68px);line-height:1.03;letter-spacing:-.033em;
  font-weight:600;color:var(--navy-ink)}
h2{font-size:clamp(29px,4.1vw,46px);line-height:1.1;letter-spacing:-.028em;
  font-weight:600;color:var(--navy-ink)}
h3{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--navy-ink)}
.kicker{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40)}
.lead{font-size:19.5px;color:var(--ink-60);line-height:1.62}
.small{font-size:14.5px;color:var(--ink-40)}

/* Phone: the desktop type scale reads as shouting on a 360px screen, so the
   headline floor drops below the clamp minimum and the lead comes back to
   body size. Side padding shrinks with it - 28px of gutter on each side eats
   a sixth of the viewport. */
@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:31px;line-height:1.1}
  h2{font-size:25px}
  h3{font-size:18px}
  .lead{font-size:16.5px}
  .wrap,.narrow{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}