/* ===================================================================
   WESTEM CRM — "Steep" style reference.

   Editorial analytics on warm paper. A serif display face at 400 does
   every headline; a sans covers everything functional. The canvas is
   white, the accent is a single warm peach, and colour is rationed to
   emphasis. Cards are large and soft-cornered with no shadow — only the
   floating product artifacts earn elevation, and only faintly.

   Scoped to the marketing landing page (body.steep). The app and the
   /demo pages keep main.css untouched.
   =================================================================== */

/* ---------------------------------------------------------------
   Faces. Self-hosted under /fonts — the CSP allows 'self' only, so a
   font CDN was never available.

   Signifier -> Source Serif 4  (display, 400 roman + 400 italic)
   Sohne     -> Inter           (interface, 400-500)

   Source Serif 4 is SIL Open Font License 1.1.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ===================================================================
   TOKENS
   =================================================================== */
:root {
  /* Colours */
  --color-ink-black:    #17191c;
  --color-paper-white:  #ffffff;
  --color-mist-gray:    #f2f2f3;
  --color-fog-white:    #fafafb;
  --color-slate-gray:   #777b86;
  --color-ash-gray:     #979799;
  --color-smoke-gray:   #a3a6af;
  --color-blush-peach:  #fbe1d1;
  --color-sienna-brown: #5d2a1a;

  --color-hairline:     #ececec;

  /* Scrollbar. Ink at low opacity rather than a flat grey, so the thumb
     belongs to the same monochrome family as the rest of the page and
     darkens on hover instead of changing colour. */
  --scrollbar-thumb:       rgba(23, 25, 28, 0.20);
  --scrollbar-thumb-hover: rgba(23, 25, 28, 0.42);
  --scrollbar-track:       transparent;

  /* Typography — families */
  --font-signifier: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sohne:     'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — scale. The reference sizes are the ceiling; the three
     display steps clamp down so a 90px headline survives a phone. */
  --text-caption:      15px;  --leading-caption:    1.5;
  --text-body:         17px;  --leading-body:       1.35;
  --text-body-lg:      20px;  --leading-body-lg:    1.35;
  --text-subheading:   22px;  --leading-subheading: 1.5;
  --text-heading-sm:   26px;  --leading-heading-sm: 1.18;  --tracking-heading-sm: -0.009em;
  --text-heading:      clamp(30px, 3.6vw, 44px);  --leading-heading:    1.3;  --tracking-heading:    -0.015em;
  --text-heading-lg:   clamp(36px, 5.2vw, 64px);  --leading-heading-lg: 1.3;  --tracking-heading-lg: -0.015em;
  --text-display:      clamp(40px, 5vw, 90px);    --leading-display:    1.3;  --tracking-display:    -0.025em;

  /* Typography — weights. The half steps are the point: hierarchy moves
     in 30-unit increments instead of jumping to bold. */
  --font-weight-regular: 400;
  --font-weight-w430:    430;
  --font-weight-w450:    450;
  --font-weight-w480:    480;
  --font-weight-medium:  500;

  /* Spacing — base unit 4px */
  --spacing-4: 4px;     --spacing-8: 8px;     --spacing-12: 12px;
  --spacing-16: 16px;   --spacing-20: 20px;   --spacing-24: 24px;
  --spacing-28: 28px;   --spacing-32: 32px;   --spacing-40: 40px;
  --spacing-64: 64px;   --spacing-80: 80px;   --spacing-96: 96px;
  --spacing-124: 124px; --spacing-128: 128px; --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap:    var(--spacing-80);
  --card-padding:   var(--spacing-20);
  --element-gap:    var(--spacing-8);
  --nav-height:     72px;

  /* Radii */
  --radius-images:        12px;
  --radius-smallcards:    16px;
  --radius-inputs:        16px;
  --radius-elevatedcards: 20px;
  --radius-cards:         24px;
  --radius-buttons:       9999px;

  /* Elevation — floating product artifacts only */
  --shadow-subtle:   rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 4px 24px 0;
  --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.10) 0 8px 40px 0;
  --shadow-subtle-3: rgba(4, 23, 43, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.10) 0 20px 25px -5px, rgba(0, 0, 0, 0.10) 0 8px 10px -6px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The page is light in every browser, whatever the OS is set to — this
     keeps native form controls and the fallback scrollbar from rendering
     dark on a white page. */
  color-scheme: light;
  /* The nav is sticky, so an anchor jump has to stop short of it or the
     heading it lands on sits underneath the bar. */
  scroll-padding-top: calc(var(--nav-height) + var(--spacing-24));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Scrollbars.

   Two engines, two mechanisms, and they are mutually exclusive: from
   Chromium 121 onwards, setting scrollbar-width or scrollbar-color on an
   element makes it *ignore* the ::-webkit-scrollbar pseudo-elements for
   that element. Applying both unconditionally therefore switches off the
   custom thumb in the very browser most people use.

   So the standard properties are fenced behind engines that have no
   ::-webkit-scrollbar — Firefox — and Chromium and Safari get the pill.
   macOS overlay scrollbars ignore both and stay native, which is right. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  /* Transparent border read as padding: the thumb becomes a slim pill with
     air around it rather than a bar filling the gutter. */
  border: 4px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}
/* No stepper arrows — the default Windows scrollbar draws them and they
   have no place in this system. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

body.steep {
  margin: 0;
  background: var(--color-paper-white);
  color: var(--color-ink-black);
  font-family: var(--font-sohne);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Reset in :where() so it carries no specificity and never outranks a
   component rule. */
:where(body.steep img, body.steep svg) { max-width: 100%; display: block; }
:where(body.steep h1, body.steep h2, body.steep h3, body.steep h4,
       body.steep p, body.steep ul, body.steep ol, body.steep figure) { margin: 0; padding: 0; }
:where(body.steep ul, body.steep ol) { list-style: none; }
:where(body.steep a) { color: inherit; text-decoration: none; }

body.steep :focus-visible {
  outline: 2px solid var(--color-ink-black);
  outline-offset: 3px;
  border-radius: var(--radius-images);
}

.skip {
  position: absolute; left: var(--spacing-16); top: -60px; z-index: 60;
  background: var(--color-ink-black); color: var(--color-paper-white);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-buttons);
  font-size: var(--text-caption);
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--spacing-16); }

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}
.container-narrow { max-width: 820px; }

/* ===================================================================
   TYPE
   =================================================================== */
.serif {
  font-family: var(--font-signifier);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-black);
  text-wrap: balance;
}
.serif em { font-style: italic; }

.t-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.t-heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.t-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-slate-gray);
  text-wrap: pretty;
}
.lead-sm {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-slate-gray);
}

/* Eyebrow — a ghost-weight category marker, not a badge. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-4);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-ash-gray);
}
.eyebrow::after { content: "›"; opacity: .7; }

/* --- word reveal -------------------------------------------------
   The reference brings its serif headlines in a word at a time as the
   line crosses the viewport. Each word starts at ash and settles to
   ink; without JS (or with reduced motion) every word is simply ink. */
.reveal-words .w {
  /* Slate, not ash: an unlit word is still a word someone might stop
     and read, so the "before" state has to clear 4.5:1 on its own. */
  color: var(--color-slate-gray);
  transition: color .5s var(--ease);
}
.reveal-words .w.lit { color: inherit; }
html:not(.js) .reveal-words .w { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .reveal-words .w { color: inherit; transition: none; }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--element-gap);
  font-family: var(--font-sohne);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  padding: 14px var(--spacing-20);
  border-radius: var(--radius-buttons);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-filled {
  background: var(--color-ink-black);
  border-color: var(--color-ink-black);
  color: var(--color-paper-white);
}
.btn-filled:hover { background: #000; border-color: #000; }

.btn-ghost {
  background: transparent;
  border-color: var(--color-ink-black);
  color: var(--color-ink-black);
}
.btn-ghost:hover { background: var(--color-mist-gray); }

/* The quiet third state: a pill with no outline, just a mist fill. */
.btn-mist {
  background: var(--color-mist-gray);
  border-color: var(--color-mist-gray);
  color: var(--color-ink-black);
}
.btn-mist:hover { background: #e8e8ea; border-color: #e8e8ea; }

.btn-sm { padding: 9px var(--spacing-16); font-size: 15px; }

.btn-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-12) var(--spacing-16);
}

/* Text link — the arrow carries the affordance, the underline waits
   for hover. */
.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-black);
  border-bottom: 1px solid transparent;
  padding-block: 2px;
  transition: border-color .2s var(--ease);
}
.link::after { content: "→"; transition: transform .2s var(--ease); }
.link:hover { border-bottom-color: currentColor; }
.link:hover::after { transform: translateX(3px); }

/* ===================================================================
   NAV
   =================================================================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-height);
  display: flex; align-items: center;
  gap: var(--spacing-24);
  padding-inline: var(--spacing-24);
  background: transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-hairline);
}

.brand {
  display: flex; align-items: center; gap: var(--spacing-8);
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: var(--font-weight-w480);
  letter-spacing: -0.012em;
  color: var(--color-ink-black);
}
.brand img { width: 38px; height: 31px; }

.nav-links {
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-32);
  flex: 1 1 auto;
}
.nav-links a {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-black);
  padding-block: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.nav-links a:hover { border-bottom-color: currentColor; }

.nav-actions {
  display: flex; align-items: center; gap: var(--spacing-12);
  flex: 0 0 auto;
}
.nav-demo { font-size: 16px; color: var(--color-ink-black); }

/* --- language pill ------------------------------------------------ */
.lang {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border-radius: var(--radius-buttons);
  background: var(--color-mist-gray);
}
.lang button {
  font: inherit; font-size: 14px; font-weight: var(--font-weight-w450);
  color: var(--color-slate-gray);
  background: none; border: 0; cursor: pointer;
  padding: 4px var(--spacing-8);
  border-radius: var(--radius-buttons);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang button:hover { color: var(--color-ink-black); }
.lang button.active { background: var(--color-paper-white); color: var(--color-ink-black); }
.lang-in-menu { display: none; }
.nav-in-menu { display: none; }

/* --- burger ------------------------------------------------------- */
.burger {
  display: none;
  width: 40px; height: 40px; position: relative;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-buttons);
  background: var(--color-paper-white);
  cursor: pointer; padding: 0;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--color-ink-black); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ===================================================================
   SECTIONS
   =================================================================== */
.section { padding-block: var(--spacing-96); }
.section-tight { padding-block: var(--spacing-64); }
.section-fog { background: var(--color-fog-white); }
.section-mist { background: var(--color-mist-gray); }

.section-head {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-20);
  text-align: center;
  margin-bottom: var(--spacing-64);
}
.section-head .lead { max-width: 60ch; }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  padding-top: var(--spacing-96);
  /* The collage lives in this padding — the copy keeps the middle, the
     artifacts get the margins above and below it. */
  padding-bottom: var(--spacing-160);
  text-align: center;
  overflow: hidden;
}

/* The warm wash. Peach-dominant with a whisper of rose and lilac, all
   heavily blurred so it reads as light on paper rather than as colour
   in its own right. */
.hero-wash {
  position: absolute;
  left: 50%; top: -8%;
  transform: translateX(-50%);
  width: min(1500px, 130vw);
  height: 780px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 46% at 52% 44%, rgba(251, 190, 150, 0.55), transparent 68%),
    radial-gradient(30% 38% at 34% 58%, rgba(232, 178, 205, 0.42), transparent 70%),
    radial-gradient(34% 40% at 68% 62%, rgba(206, 190, 236, 0.34), transparent 72%),
    radial-gradient(46% 50% at 50% 30%, rgba(251, 225, 209, 0.60), transparent 74%);
  filter: blur(52px);
}
.hero-inner { position: relative; z-index: 2; }

.hero-title { margin-inline: auto; max-width: 22ch; }
.hero-sub {
  margin: var(--spacing-24) auto 0;
  max-width: 54ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-ink-black);
}
.hero-actions { margin-top: var(--spacing-32); justify-content: center; }
.hero-note {
  margin-top: var(--spacing-20);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate-gray);
}

/* ===================================================================
   FLOATING PRODUCT ARTIFACTS

   The only elements in the system that carry a shadow. They sit on
   white, overlap the hero copy at varied offsets, and are built from
   markup rather than screenshots so they stay crisp and translate.
   =================================================================== */
.artifact {
  background: var(--color-paper-white);
  border-radius: var(--radius-elevatedcards);
  box-shadow: var(--shadow-subtle-3);
  padding: var(--spacing-16) var(--spacing-20) var(--spacing-12);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-ink-black);
}
.artifact-title {
  font-size: 14px;
  font-weight: var(--font-weight-w480);
  letter-spacing: -0.006em;
  margin-bottom: var(--spacing-12);
}
.artifact-metric {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.artifact-delta {
  font-size: 14px;
  color: var(--color-slate-gray);
}
.artifact-delta b {
  font-weight: var(--font-weight-w450);
  color: var(--color-sienna-brown);
}

/* rows table */
.artifact-rows { display: flex; flex-direction: column; }
.artifact-rows li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-24);
  padding-block: 7px;
  border-top: 1px solid var(--color-hairline);
  font-size: 13px;
}
.artifact-rows li:first-child { border-top: 0; }
.artifact-rows span { color: var(--color-slate-gray); }
.artifact-rows b { font-weight: var(--font-weight-w450); }

/* the peach-tinted stat artifact */
.artifact-warm { background: #fefaf7; }
.artifact-warm .artifact-title { color: var(--color-sienna-brown); }

/* composer */
.composer {
  display: flex; flex-direction: column; gap: var(--spacing-12);
  padding: var(--spacing-16);
  border-radius: var(--radius-inputs);
  width: min(420px, 78vw);
}
.composer-placeholder {
  font-size: 16px;
  color: var(--color-smoke-gray);
}
.composer-row { display: flex; align-items: center; justify-content: space-between; }
.composer-icons { display: flex; gap: var(--spacing-12); color: var(--color-smoke-gray); font-size: 15px; }
.composer-send {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-buttons);
  background: var(--color-ink-black);
  color: var(--color-paper-white);
  display: grid; place-items: center;
  font-size: 15px;
}

/* avatar bubble with its cursor tail */
.avatar {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: var(--radius-buttons);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  border: 2px solid var(--color-paper-white);
}
.avatar::before {
  content: "";
  position: absolute; left: 24px; top: -8px;
  width: 0; height: 0;
  border-left: 7px solid var(--color-ink-black);
  border-bottom: 10px solid transparent;
  transform: rotate(-18deg);
}
.avatar-green { background: #d8ecd9; }
.avatar-blue  { background: #d7e3fb; }

/* --- placement (desktop only; the collage collapses below 1100px) -- */
.hero-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-collage > * { position: absolute; pointer-events: auto; }

.art-table    { left: 0;    top: 132px;  width: 280px; }
.art-stat     { right: 0;   top: 200px;  width: 272px; }
.art-chart    { left: 3%;   bottom: 72px; width: 288px; }
.art-composer { left: 50%;  bottom: 40px; transform: translateX(-42%); }

.art-chart .avatar { left: -26px; bottom: 52px; }
.art-composer .avatar { left: 118px; bottom: -14px; }

/* ===================================================================
   PRODUCT SHOT — the app itself, in an elevated frame
   =================================================================== */
.shot {
  position: relative;
  border-radius: var(--radius-elevatedcards);
  overflow: hidden;
  background: var(--color-paper-white);
  box-shadow: var(--shadow-subtle-3);
}
.shot img { width: 100%; height: auto; }

.shot-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}
.shot-tab {
  font: inherit; font-size: 15px; font-weight: var(--font-weight-w450);
  color: var(--color-slate-gray);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  padding: 9px var(--spacing-16);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.shot-tab:hover { background: var(--color-mist-gray); color: var(--color-ink-black); }
.shot-tab[aria-selected="true"] {
  background: var(--color-ink-black);
  border-color: var(--color-ink-black);
  color: var(--color-paper-white);
}
.shot-panel { display: none; }
.shot-panel.is-active { display: block; }
.shot-caption {
  margin-top: var(--spacing-20);
  text-align: center;
  font-size: var(--text-body);
  color: var(--color-slate-gray);
}

/* ===================================================================
   CARDS
   =================================================================== */
.card {
  background: var(--color-mist-gray);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32) var(--spacing-28);
  display: flex; flex-direction: column;
  gap: var(--spacing-16);
}
.card-peach {
  background: var(--color-blush-peach);
  color: var(--color-sienna-brown);
}
.card h3 {
  font-size: var(--text-body-lg);
  line-height: 1.25;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.012em;
}
.card p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-slate-gray);
}
.card-peach h3, .card-peach p { color: var(--color-sienna-brown); }
.card-art {
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding-block: var(--spacing-24);
  color: currentColor;
}
.card-art svg { width: min(190px, 70%); height: auto; }

.card-label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-ash-gray);
}

/* The lead card takes the wider column and stands taller — the peach
   is meant to be the thing your eye lands on first. */
.trio {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap: var(--spacing-24);
  align-items: stretch;
}
.trio > :first-child { min-height: 500px; }
.trio > :not(:first-child) { margin-top: var(--spacing-64); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-40) var(--spacing-32); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-64); align-items: center; }

/* ===================================================================
   FEATURE BLOCK — copy beside a floating product artifact
   =================================================================== */
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-20); }
.feature-copy .lead { max-width: 46ch; }
.feature-media { position: relative; }

/* annotation bubbles that overlap the artifact, as in the reference */
.note {
  position: absolute;
  max-width: 250px;
  background: var(--color-paper-white);
  border-radius: var(--radius-smallcards);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: 14px;
  line-height: 1.4;
}
.note-who {
  display: flex; align-items: center; gap: var(--spacing-8);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-w480);
}
.note-who span { font-weight: var(--font-weight-regular); color: var(--color-ash-gray); }
.note-dot { width: 20px; height: 20px; border-radius: var(--radius-buttons); flex: none; }
.note-a { left: -28px;  top: 22%; }
.note-b { right: -28px; bottom: 16%; }

/* ===================================================================
   PROOF ROW
   =================================================================== */
.proof { text-align: center; }
.proof-title {
  font-size: var(--text-body);
  color: var(--color-slate-gray);
  margin-bottom: var(--spacing-40);
}
.proof-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-32);
}
.proof-n {
  font-family: var(--font-signifier);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink-black);
}
.proof-l {
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate-gray);
}

/* ===================================================================
   STORY — a quiet mist band with a serif pull-quote
   =================================================================== */
.quote {
  font-family: var(--font-signifier);
  font-size: var(--text-heading);
  line-height: 1.28;
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink-black);
  text-wrap: balance;
}
.quote em { font-style: italic; }
.quote-by {
  margin-top: var(--spacing-24);
  font-size: var(--text-body);
  color: var(--color-slate-gray);
}
.story-photo {
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--color-paper-white);
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
   DARK BAND — the one inverted section
   =================================================================== */
.band-dark {
  background: var(--color-ink-black);
  color: var(--color-paper-white);
}
.band-dark .serif,
.band-dark .quote { color: var(--color-paper-white); }
.band-dark .lead { color: #9ea2ab; }
.band-dark .eyebrow { color: #8b8f98; }
.band-dark .reveal-words .w { color: #8b8f98; }
.band-dark .btn-ghost { border-color: var(--color-paper-white); color: var(--color-paper-white); }
.band-dark .btn-ghost:hover { background: rgba(255,255,255,0.08); }
.band-dark .link { color: var(--color-paper-white); }

.band-dark .step {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--spacing-20);
}
.band-dark .step h3 { color: var(--color-paper-white); }
.band-dark .step p { color: #9ea2ab; }

.step h3 {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.012em;
  margin-bottom: var(--spacing-8);
}
.step p { font-size: 16px; line-height: 1.5; color: var(--color-slate-gray); }
.step-n {
  font-family: var(--font-signifier);
  font-size: 15px;
  color: var(--color-ash-gray);
  display: block;
  margin-bottom: var(--spacing-12);
}

/* ===================================================================
   MINI FEATURES — screenshot above, copy below
   =================================================================== */
.mini-shot {
  border-radius: var(--radius-images);
  overflow: hidden;
  background: var(--color-paper-white);
  box-shadow: var(--shadow-subtle);
  aspect-ratio: 16 / 10;
  margin-bottom: var(--spacing-20);
}
.mini-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mini h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.012em;
  margin-bottom: var(--spacing-8);
}
.mini p { font-size: 16px; line-height: 1.5; color: var(--color-slate-gray); }

/* ===================================================================
   FAQ
   =================================================================== */
.faq { border-top: 1px solid var(--color-hairline); }
.faq-item { border-bottom: 1px solid var(--color-hairline); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-24);
  font: inherit;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  font-weight: var(--font-weight-w450);
  color: var(--color-ink-black);
  text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: var(--spacing-24) 0;
}
.faq-x { flex: none; position: relative; width: 16px; height: 16px; color: var(--color-slate-gray); }
.faq-x::before, .faq-x::after {
  content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.5px;
  background: currentColor; transition: transform .28s var(--ease);
}
.faq-x::after { transform: rotate(90deg); }
.faq-item.open .faq-x::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p {
  padding-bottom: var(--spacing-24);
  max-width: 70ch;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-slate-gray);
}
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ===================================================================
   CLOSING CTA
   =================================================================== */
.cta { padding-block: var(--spacing-128); }
.cta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
}
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); }
.cta-copy .lead { max-width: 40ch; }
.cta-art { display: grid; place-items: center; }
.cta-art svg { width: min(320px, 80%); height: auto; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--spacing-64) var(--spacing-32);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--spacing-40) var(--spacing-32);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
.footer-brand p { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-slate-gray); max-width: 34ch; }
.footer h4 {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-w480);
  color: var(--color-ink-black);
  margin-bottom: var(--spacing-16);
}
.footer-col a,
.footer-col li {
  display: block;
  font-size: var(--text-caption);
  line-height: 2.1;
  color: var(--color-slate-gray);
}
.footer-col a:hover { color: var(--color-ink-black); }
.footer-bottom {
  margin-top: var(--spacing-64);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-hairline);
  display: flex; flex-wrap: wrap; gap: var(--spacing-16) var(--spacing-32);
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-slate-gray);
}

/* ===================================================================
   MOTION
   =================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].shown { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* The hero collage needs real room either side of a 15ch headline;
   below this it stacks into a plain row under the copy instead. */
/* Below this the two columns are narrow enough that a note hanging off
   the edge would push the page sideways. */
@media (max-width: 1280px) {
  .note-a { left: 12px; }
  .note-b { right: 12px; }

  /* The artifacts are in normal flow from here down, so the hero no
     longer needs the deep well that held them. */
  .hero { padding-bottom: var(--spacing-64); }

  .hero-collage {
    position: static;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--spacing-20);
    margin-top: var(--spacing-64);
    padding-inline: var(--spacing-24);
  }
  .hero-collage > * { position: relative; }
  .art-table, .art-stat, .art-chart, .art-composer {
    left: auto; right: auto; top: auto; bottom: auto; transform: none;
    width: min(300px, 100%);
  }
  .art-composer { width: min(360px, 100%); }
  .avatar { display: none; }
}

@media (max-width: 1060px) {
  :root { --nav-height: 64px; }

  .nav { gap: var(--spacing-12); }
  .burger { display: block; order: 3; }
  .nav-links {
    position: fixed; left: 0; right: 0; top: var(--nav-height);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: var(--spacing-8) var(--spacing-24) var(--spacing-24);
    background: var(--color-paper-white);
    border-bottom: 1px solid var(--color-hairline);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  body.nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding-block: var(--spacing-16); border-bottom: 1px solid var(--color-hairline); }
  .nav-in-menu { display: block; }
  .lang-in-menu { display: flex; align-self: flex-start; margin-top: var(--spacing-20); }

  .brand { margin-right: auto; }
  .nav-demo, .nav-actions .lang { display: none; }

  .trio { grid-template-columns: 1fr 1fr; }
  .trio > :first-child { grid-column: 1 / -1; min-height: 0; }
  .trio > :not(:first-child) { margin-top: 0; }
}

@media (max-width: 860px) {
  .section { padding-block: var(--spacing-64); }
  .cta { padding-block: var(--spacing-96); }
  .grid-2, .cta-grid { grid-template-columns: 1fr; gap: var(--spacing-40); }
  .grid-3 { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32) var(--spacing-24); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .note { position: static; max-width: none; margin-top: var(--spacing-12); box-shadow: none; border: 1px solid var(--color-hairline); }
  .cta-art { display: none; }
  .section-head { margin-bottom: var(--spacing-40); }
}

@media (max-width: 560px) {
  .container { padding-inline: var(--spacing-20); }
  .hero { padding-top: var(--spacing-64); }
  .hero-title { max-width: none; }
  .hero-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .card { padding: var(--spacing-24) var(--spacing-20); }
}