/* ============================================================
   ScopeDiff — shared brand tokens (warm Intercom editorial)
   Cream canvas · white cards · charcoal ink · one warm accent.
   ============================================================ */

/* ── Self-hosted Geist ───────────────────────────────────────
   Was three <link>s to fonts.googleapis.com / fonts.gstatic.com in
   index.html: a RENDER-BLOCKING third-party stylesheet, which then pointed at
   a second third-party origin for the files themselves — two extra DNS+TLS
   round trips ahead of first paint on the page that has to convert.

   It was also an undisclosed data flow. Google Fonts receives every visitor's
   IP and User-Agent, and Google is not on /subprocessors, which lists every
   third party that processes data on our behalf. Self-hosting makes that page
   true by construction rather than by omission.

   TWO files, not six. Google serves ONE variable font per family and points
   every weight at it, which is why `font-weight` here is the range `100 900`
   rather than six separate faces — the browser interpolates. (Verified: all
   four Geist weights and both Mono weights resolved to the same URL.)

   `unicode-range` is copied verbatim from what Google served, so the set of
   glyphs Geist covers is UNCHANGED. Anything outside it (the → in .btn-arrow,
   the ⟐ in the browser-bar mock) fell through to a system font before and
   still does — this is deliberately not the moment to change that.

   Geist is OFL-1.1, which permits redistribution. Files are the `latin`
   subset only, 52KB for the pair.

   NOTE: index.html preloads both files. Adding a weight or a subset means
   updating that preload and bumping the ?v= on this file's <link>, or
   returning visitors keep a cached copy of the previous version.
   ──────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/lander/fonts/geist-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:'Geist Mono';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/lander/fonts/geist-mono-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;
}

:root{
  --canvas:#f6f7f8;        /* cloud ground (baked default) — never pure white */
  --card:#ffffff;
  --surface-2:#eef0f2;     /* alt cloud */
  --surface-3:#e7e9ec;

  --ink:#111111;
  --ink-2:#5d5c59;
  --ink-3:#7b7b78;
  --ink-4:#9c9fa5;

  --hairline:#e7e9ec;
  --hairline-2:#dadde1;
  --hairline-soft:#eef0f2;

  /* the one confident accent — warm orange */
  --orange:#ff5600;
  --orange-2:#e84d00;
  --orange-ink:#d6440a;
  --orange-soft:#ffe9df;
  --orange-line:#ffceb8;

  /* supporting status hues (borrowed from the report) */
  --emerald:#1f9156; --em-soft:#e7f1ea; --em-ink:#157040;
  --indigo:#3f63d4;  --in-soft:#e9edfb; --in-ink:#2f4cc0;
  --violet:#7c5ad6;  --vi-soft:#ece7fa; --vi-ink:#5e3fbf;
  --red:#c41c1c;     --red-soft:#f8e4e1; --red-ink:#a31616;

  --ink-inverse:#ffffff;
  --black:#0e0d0c;

  --shadow-sm:0 1px 2px rgba(60,48,36,.05);
  --shadow:0 10px 30px -16px rgba(60,48,36,.22);
  --shadow-lg:0 36px 80px -34px rgba(40,30,22,.42);
  --shadow-float:0 30px 60px -28px rgba(40,30,22,.34);

  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.55;background:var(--canvas);overflow-x:hidden}
::selection{background:var(--orange-soft);color:var(--orange-ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}

/* ---- shared button system ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  letter-spacing:-.1px;border-radius:var(--r-xs);padding:12px 20px;transition:transform .14s ease, background .14s, box-shadow .14s;white-space:nowrap}
.btn:active{transform:translateY(0)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-2);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(255,86,0,.6)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--hairline-2)}
.btn-ghost:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.btn-lg{font-size:16px;padding:15px 26px}
.btn-arrow{transition:transform .18s ease}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ---- shared nav ---- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s, background .2s}
.nav.scrolled{border-bottom-color:var(--hairline);background:color-mix(in srgb, var(--canvas) 94%, transparent)}
.nav-in{max-width:var(--maxw);margin:0 auto;height:64px;display:flex;align-items:center;gap:28px;padding:0 28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.4px}
/* The ink tile the logomark sits in. `.bmark .logo` (the footer) matched NO
   rule at all until the mark changed — it inherited the page background, and
   the old glyph got away with it because its orange node still read against
   cream while its white rule silently didn't. The stack's S is white, so on
   #f6f7f8 it disappeared entirely and left three floating corners. The footer
   overrides width/height inline to 24px; everything else it needs is here. */
.brand .logo,
.bmark .logo{width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;flex-shrink:0;position:relative}
.brand .logo svg{width:16px;height:16px}
/* 57% of the tile, matching the nav's 16-in-28. Without this the footer's svg
   fills its box edge to edge and the corners crop against the tile's radius. */
.bmark .logo svg{width:14px;height:14px}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:8px}
.nav-links a{font-size:14.5px;color:var(--ink-2);font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .login{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-cta .login:hover{color:var(--ink)}
@media(max-width:760px){.nav-links{display:none}}

/* brand logomark — "N·c, the stack": an S with three receding folded corners.
   The markup lives inline in index.html (nav + footer) and in
   components/brand-mark.tsx for the app; keep the three in sync. */
.logo-glyph{display:inline-grid;place-items:center}

/* ---- the brand logomark used at large sizes ---- */
.bmark{display:inline-flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.5px}

/* footer (shared) */
.foot{border-top:1px solid var(--hairline);margin-top:0;background:var(--canvas)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:56px 28px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-brand .bmark{font-size:18px;margin-bottom:14px}
.foot-brand p{font-size:13.5px;color:var(--ink-3);max-width:30ch;line-height:1.6}
.foot-col h4{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-base{max-width:var(--maxw);margin:0 auto;padding:20px 28px 40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--hairline-soft);font-size:12.5px;color:var(--ink-4)}
.foot-base .sp{flex:1}
@media(max-width:760px){.foot-in{grid-template-columns:1fr 1fr;gap:28px}}

/* reveal-on-scroll — transition-based so the END STATE is always visible
   (a throttled/scaled iframe that never animates still lands at opacity:1).
   no-JS = visible (rules gated on html.js). */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ============================================================
   Embedded live report — scaled iframe inside browser chrome
   ============================================================ */
.browser{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:14px;padding:0 16px;height:44px;border-bottom:1px solid var(--hairline-soft);
  background:linear-gradient(180deg,#fbfaf8,#f6f3ee)}
.browser-dots{display:flex;gap:7px}
.browser-dots i{width:11px;height:11px;border-radius:50%;display:block}
.browser-dots i:nth-child(1){background:#f0584e} .browser-dots i:nth-child(2){background:#f4bf4f} .browser-dots i:nth-child(3){background:#5ec45e}
.browser-url{flex:1;max-width:360px;margin:0 auto;height:26px;border-radius:7px;background:var(--canvas);border:1px solid var(--hairline-soft);
  display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.browser-url .lock{color:var(--emerald);font-size:11px}
.browser-share{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.browser-frame{position:relative;overflow:hidden;background:var(--canvas)}
.browser-frame iframe{border:0;position:absolute;top:0;left:0;transform-origin:top left}
/* A guard layer so a still-image iframe doesn't steal scroll or clicks. No
   pointer cursor: it isn't a control any more — the hero's frame is the live,
   interactive one and carries no guard at all. */
.browser-frame .guard{position:absolute;inset:0;z-index:2}