/* FileHero v2
   A paper-and-ink marketing page. Cream ground, one display sans set tight,
   a monospace for everything that reads like data, and colour applied as
   whole fields (cards and panels), never as scattered accents. */

@layer tokens, base, components, sections, utilities;

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-grotesk-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono-var.woff2") format("woff2"); }

@layer tokens {
  :root {
    /* ground */
    --cream: #faf8f1;
    --paper: #fdfcf8;
    --sunken: #f1efe6;
    --ink: #0f1214;
    --ink-2: #2b3033;
    --ink-60: rgba(15, 18, 20, .62);
    --ink-40: rgba(15, 18, 20, .42);
    --ink-10: rgba(15, 18, 20, .10);
    --ink-20: rgba(15, 18, 20, .20);
    --cream-12: rgba(250, 248, 241, .12);

    /* fields */
    --moss: #b3bb9c;
    --glacier: #c4d4cf;
    --pine: #17201e;
    --ember: #d9714b;
    --dune: #d8d1c2;
    --fjord: #1b4f58;
    --rust: #c53a17;
    --shell: #f6dccb;
    --heather: #b69aa0;
    /* deep variants: the field hue where cream text has to sit on it */
    --moss-deep: #5a6347;
    --dune-deep: #6b6253;

    /* signals */
    --ok: #35804c;
    --warn: #a85713;
    --bad: #b8372b;

    /* type */
    --display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --track-display: -.055em;
    --track-tight: -.03em;
    --track-wide: .06em;

    /* geometry */
    --r-md: 0;
    --r-xl: 0;
    --r-2xl: 0;

    --max: 1240px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --measure: 46rem;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur: .45s;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  /* the header is sticky, so an anchor has to stop clear of it */
  html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--display);
    font-size: .875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  code { font-family: var(--mono); font-size: .92em; background: var(--ink-10); padding: .05em .35em; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  ::selection { background: var(--ember); color: var(--cream); }
  .skip {
    position: absolute; left: var(--gutter); top: .5rem; z-index: 60;
    transform: translateY(-200%);
    padding: .7rem 1.1rem;
    background: var(--ink); color: var(--cream);
    font-weight: 600; font-size: .85rem; letter-spacing: var(--track-tight);
  }
  .skip:focus { transform: none; }
}

@layer components {
  .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

  /* type roles */
  .h-display {
    hanging-punctuation: first;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: .92;
    letter-spacing: var(--track-display);
    text-wrap: balance;
  }
  .h-display em, .h-section em { font-style: normal; display: block; }
  .h-section {
    hanging-punctuation: first;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.9vw, 2.3rem);
    line-height: 1.02;
    letter-spacing: var(--track-tight);
    text-wrap: balance;
    max-width: 22ch;
  }
  /* reading copy is the sans. The mono is the data voice: labels, tags,
     chips, facts, mock values, footer meta. */
  .lede {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: var(--measure);
  }
  .mono { font-family: var(--mono); }
  .tag {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1rem;
    background: var(--ink-10);
    font-family: var(--mono);
    font-size: .72rem; font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* buttons: a filled ink slab with a thicker bottom edge, like a key */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .9rem 1.35rem;
    background: var(--ink); color: var(--cream);
    border: 1px solid var(--ink);
    font-weight: 600; font-size: .9rem; line-height: 1.2;
    letter-spacing: var(--track-tight);
    transition: background var(--dur) var(--ease-out), transform .15s var(--ease-out), border-color var(--dur) var(--ease-out);
    white-space: nowrap;
  }
  .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
  .btn svg { width: 18px; height: 18px; }
  .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn--outline:hover { background: var(--ink-10); border-color: var(--ink-20); }
  .btn--sm { padding: .5rem .9rem; font-size: .85rem; }
  .btn--lg { padding: .85rem 1.35rem; font-size: .95rem; }
  .btn--cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .btn--cream:hover { background: #fff; border-color: #fff; }
  .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

  /* themed fields: whole regions in one colour, foreground derived from it */
  .field { --f-bg: var(--glacier); --f-ink: var(--ink); --f-sub: rgba(15,18,20,.66); --f-line: rgba(15,18,20,.12); --f-tint: rgba(15,18,20,.06); --f-ok: var(--ok); --f-bad: var(--bad);
    background: var(--f-bg); color: var(--f-ink); }
  .field--glacier { --f-bg: var(--glacier); }
  .field--shell { --f-bg: var(--shell); }
  .field--heather { --f-bg: var(--heather); }
  .field--moss { --f-bg: var(--moss); }
  .field--dune { --f-bg: var(--dune); }
  .field--ember { --f-bg: var(--ember); --f-ok: #1f5a33; --f-bad: #4a1208; --f-sub: rgba(15,18,20,.72); --f-line: rgba(15,18,20,.16); --f-tint: rgba(15,18,20,.09); }
  .field--pine { --f-bg: var(--pine); --f-ink: var(--cream); --f-ok: #8fd3a3; --f-bad: #f2a48d; --f-sub: rgba(250,248,241,.74); --f-line: rgba(250,248,241,.14); --f-tint: rgba(250,248,241,.07); }
  .field--fjord { --f-bg: var(--fjord); --f-ink: var(--cream); --f-ok: #a8dcbc; --f-bad: #f5b3a0; --f-sub: rgba(250,248,241,.66); --f-line: rgba(250,248,241,.16); --f-tint: rgba(250,248,241,.08); }
  .field .tag { background: var(--f-tint); color: var(--f-ink); }
  .field .sub { color: var(--f-sub); }
  .field code { background: var(--f-tint); }
  .field .btn--outline { color: var(--f-ink); border-color: var(--f-ink); }
  .field .btn--outline:hover { background: var(--f-tint); }

  /* stagger entrance, only on load, only near the top */
  .rise { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .is-ready .rise { opacity: 1; transform: none; }
  .d1 { transition-delay: .05s } .d2 { transition-delay: .15s } .d3 { transition-delay: .25s } .d4 { transition-delay: .35s }
  /* scroll reveal for later sections */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .rise, .reveal { opacity: 1; transform: none; transition: none; }
  }
}

@layer sections {
  /* ---------- header ---------- */
  .site-head {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    min-height: 68px;
    padding: 0 var(--gutter);
    background: var(--cream);
    border-bottom: 1px solid var(--ink-10);
  }
  .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.1rem; letter-spacing: var(--track-tight); }
  .brand-mark { width: 30px; height: 30px; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 1.15rem; line-height: 1; padding-bottom: 2px; }
  .site-nav { display: flex; align-items: center; gap: .25rem; }
  .site-nav a { padding: .4rem .7rem; border-radius: var(--r-md); font-weight: 500; font-size: .84rem; letter-spacing: var(--track-tight); color: var(--ink-2); transition: background .2s var(--ease-out), color .2s var(--ease-out); }
  .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ink-40); }
  .site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ink-40); }
  .head-cta { display: flex; align-items: center; gap: .75rem; }
  .nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-md); place-items: center; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle .x { display: none; }
  @media (max-width: 900px) {
    .site-nav { display: none; }
    .nav-toggle { display: grid; }
    .site-head.nav-open .site-nav {
      display: flex; flex-direction: column; align-items: stretch;
      position: absolute; top: 100%; left: 0; right: 0;
      padding: .75rem var(--gutter) 1.25rem;
      background: var(--cream); border-bottom: 1px solid var(--ink-10);
    }
    .site-head.nav-open .site-nav a { font-size: 1.15rem; padding: .7rem .5rem; }
    .site-head.nav-open .nav-toggle .bars { display: none; }
    .site-head.nav-open .nav-toggle .x { display: block; }
    .head-cta .btn { display: none; }
  }

  /* ---------- hero ---------- */
  .hero { padding: clamp(6.5rem, 20vh, 13rem) 0 clamp(3.5rem, 7vw, 6rem); }
  /* a phone has no room to spend on a deep opening margin */
  @media (max-width: 720px) { .hero { padding-top: clamp(3rem, 8vh, 5rem); } }
  .hero-copy { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.4vw, 3rem); }
  .hero .lede { max-width: 44rem; font-size: .95rem; color: var(--ink); }
  .hero-foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: .5rem; }

  /* statement: headline left, paragraph right, both hung from the same top */
  .statement { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
  .statement .h-section { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 18ch; }
  .statement p { font-size: .95rem; line-height: 1.65; color: var(--ink-2); max-width: 36rem; }
  .field .statement p { color: var(--f-sub); }
  @media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

  /* product carousel: scroll-snap track, square controls */
  #product { margin-top: clamp(3.5rem, 7vw, 6rem); }
  .shots-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-bottom: 1rem; }
  .shots-caption { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .8rem; color: var(--ink-2); }
  .shots-nav { display: flex; align-items: center; gap: .5rem; }
  .shots-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--cream); color: var(--ink); transition: background .2s var(--ease-out), color .2s var(--ease-out); }
  .shots-btn:hover { background: var(--ink); color: var(--cream); }
  .shots-btn svg { width: 18px; height: 18px; }
  .shots-count { font-size: .74rem; color: var(--ink-60); min-width: 3.5rem; text-align: center; }
  .shots-count b { color: var(--ink); font-weight: 500; }
  .shots-track { display: flex; gap: 1.25rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; transition: height .45s var(--ease-out); }
  .shots-track::-webkit-scrollbar { display: none; }
  .shots-track::after { content: ""; flex: 0 0 calc(100% - min(100%, 880px)); }
  .shots-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
  .shot { flex: 0 0 min(100%, 880px); min-width: 0; scroll-snap-align: start; margin: 0; display: flex; align-items: flex-start; padding: clamp(1rem, 2.5vw, 1.75rem); }
  .shots-tag { background: var(--hue, var(--ink-10)); color: var(--hue-ink, var(--ink)); transition: background .3s var(--ease-out), color .3s var(--ease-out); }
  .shots-dots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
  /* the bar stays 4px; the button around it is 24px so it can be tapped */
  .shots-dots button { width: 28px; height: 24px; flex: none; padding: 10px 0; background: none; }
  .shots-dots button::after { content: ""; display: block; height: 4px; background: var(--ink-20); transition: background .2s var(--ease-out); }
  .shots-dots button[aria-selected="true"]::after { background: var(--ink); }
  @media (prefers-reduced-motion: reduce) { .shots-track { scroll-behavior: auto; transition: none; } }
  @media (max-width: 720px) { .shots-caption { font-size: .74rem; } }

  /* product screens: the dashboard's own layouts (breadcrumb bar, cards on a
     sunken ground, filter bar, tables, the finding panel) in the site's
     materials: square, paper, ink, the page's signal colours */
  .app {
    --app-bg: var(--sunken); --app-card: var(--paper); --app-line: var(--ink-10); --app-ink: var(--ink); --app-muted: var(--ink-60);
    --app-red: var(--bad); --app-amber: var(--warn); --app-green: var(--ok);
    /* every screen is the same height, so the strip does not resize as it
       pages. Each one is filled to it with content, not with padding; the
       residue shows as the sunken ground a short list would leave anyway.
       min- rather than a fixed height, so a narrow viewport grows instead
       of cropping. */
    min-height: 640px;
    display: flex; flex-direction: column; width: 100%; min-width: 0;
    background: var(--app-bg); color: var(--app-ink); font-family: var(--display); font-size: .72rem; line-height: 1.4;
    border: 1px solid rgba(0,0,0,.12); overflow: hidden;
  }
  .app-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .9rem; background: var(--app-card); border-bottom: 1px solid var(--app-line); }
  .crumb { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); }
  .app-actions { display: flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .58rem; color: var(--app-muted); flex-wrap: wrap; }
  .app-seg { display: inline-flex; background: var(--app-bg); padding: 2px; }
  .app-seg > * { padding: .15rem .45rem; }
  .app-seg b { background: var(--app-ink); color: var(--cream); font-weight: 500; }
  /* the product's own buttons: one ink primary per screen, ghosts in a row */
  .app-btn { font-family: var(--mono); font-size: .58rem; font-weight: 500; padding: .3rem .55rem; background: var(--app-ink); color: var(--cream); white-space: nowrap; }
  .app-btn--ghost { background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-line); padding: .18rem .26rem; font-size: .54rem; }
  .app-btn--danger { color: var(--app-red); border-color: rgba(184,55,43,.3); }
  .app-acts { display: inline-flex; gap: .15rem; justify-content: flex-end; }
  .app-link { font-family: var(--mono); font-size: .58rem; color: var(--app-ink); white-space: nowrap; }
  .app-body { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
  .app-card { background: var(--app-card); border: 1px solid var(--app-line); overflow: hidden; }
  .app-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .8rem; border-bottom: 1px solid var(--app-line); }
  .app-title { font-weight: 600; font-size: .88rem; letter-spacing: var(--track-tight); }
  .app-meta { font-family: var(--mono); font-size: .58rem; color: var(--app-muted); line-height: 1.5; }
  .app-label { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); }
  .app-label--dot::before { content: "■"; margin-right: .35rem; font-size: .45rem; vertical-align: 1px; }
  .app-file { font-family: var(--mono); font-size: .66rem; font-weight: 500; color: var(--app-ink); overflow-wrap: anywhere; }
  .app-file--lg { font-size: .8rem; }
  .app-num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; line-height: 1; letter-spacing: var(--track-tight); color: var(--app-ink); }
  .app-num--lg { font-size: 1.9rem; }
  .app-num small { font-family: var(--mono); font-size: .55rem; font-weight: 400; color: var(--app-muted); margin-left: .2rem; }
  .app-num--red, .app-red { color: var(--app-red); }
  .app-num--amber, .app-amber { color: var(--app-amber); }
  .app-num--green, .app-green { color: var(--app-green); }
  .app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .app-stat { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; }
  .app-stat .app-num { font-size: 1.5rem; }
  .app-pill { display: inline-block; font-family: var(--mono); font-size: .52rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .4rem; vertical-align: 1px; white-space: nowrap; }
  .app-pill--red { background: rgba(184,55,43,.12); color: var(--app-red); }
  .app-pill--amber { background: rgba(168,87,19,.14); color: var(--app-amber); }
  .app-pill--green { background: rgba(53,128,76,.14); color: var(--app-green); }
  .app-pill--blue { background: var(--ink-10); color: var(--app-ink); }
  .app-dot { display: inline-block; width: 6px; height: 6px; margin-right: .35rem; vertical-align: 1px; flex: none; }
  .app-dot--green { background: var(--app-green); }
  .app-dot--amber { background: var(--app-amber); }
  .app-dot--red { background: var(--app-red); }
  .app-dot--grey { background: var(--app-muted); }
  .app-status { font-family: var(--mono); font-size: .58rem; color: var(--app-ink); white-space: nowrap; }
  .app-status .app-pill, .app-meta .app-pill { margin-left: .35rem; }
  .app-bar { display: inline-block; width: 40px; height: 3px; background: var(--app-line); position: relative; vertical-align: middle; }
  .app-bar i { position: absolute; inset: 0; width: var(--w); background: var(--c, var(--app-red)); }
  /* mock values carried as classes so the page needs no inline styles */
  .app-bar .w44 { --w: 44% } .app-bar .w52 { --w: 52% } .app-bar .w69 { --w: 69% } .app-bar .w85 { --w: 85% } .app-bar .w72 { --w: 72% } .app-bar .w74 { --w: 74% }
  .app-bar .w78 { --w: 78% } .app-bar .w88 { --w: 88% } .app-bar .w91 { --w: 91% }
  .app-bar .w94 { --w: 94% } .app-bar .w98 { --w: 98% } .app-bar .w99 { --w: 99% }
  .app-bar .w100 { --w: 100% }
  .app-bar .amber { --c: var(--app-amber) } .app-bar .green { --c: var(--app-green) }
  .app-bar--row { display: block; width: 90px; margin-top: .3rem; }
  .app-hr { border-top: 1px solid var(--app-line); margin: .7rem 0; }

  .app-posture { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: stretch; padding: .8rem .9rem; }
  .app-posture-score { display: flex; flex-direction: column; gap: .3rem; padding-right: 1.25rem; border-right: 1px solid var(--app-line); }
  .app-posture-trend { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
  .app-posture-trend svg { width: 100%; height: 44px; fill: none; stroke: var(--app-red); stroke-width: 1.5; }
  .app-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .52rem; color: var(--app-muted); }
  .app-posture-open { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding-left: 1.25rem; border-left: 1px solid var(--app-line); }
  .app-alert { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .8rem; background: rgba(184,55,43,.08); border: 1px solid rgba(184,55,43,.25); color: var(--app-red); font-size: .68rem; }
  .app-alert span:last-child { font-family: var(--mono); font-size: .58rem; white-space: nowrap; }
  .app-todo { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: start; padding: .55rem .8rem; border-bottom: 1px solid var(--app-line); font-size: .68rem; }
  .app-todo > .app-dot { margin-top: .32rem; }
  .app-todo > .app-link { align-self: center; }
  .app-todo:last-child { border-bottom: 0; }
  .app-todo b { display: block; font-weight: 600; }

  /* filter bar */
  .app-filters { display: flex; flex-wrap: wrap; gap: .6rem; padding: .6rem .8rem; }
  .app-field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 0; min-width: 6rem; }
  .app-field--grow { flex: 2 1 0; }
  .app-input { display: flex; align-items: center; justify-content: space-between; gap: .5rem; overflow: hidden; padding: .3rem .5rem; border: 1px solid var(--app-line); background: var(--app-card); font-family: var(--mono); font-size: .58rem; color: var(--app-muted); white-space: nowrap; }
  .app-select > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .app-select::after { content: "▾"; flex: none; }

  /* tables, as the product draws them */
  /* a product table keeps its columns and crops at the card edge, the way a
     screenshot of one would, instead of rewrapping into uneven rows */
  .app-scroll { overflow-x: auto; scrollbar-width: none; }
  .app-scroll::-webkit-scrollbar { display: none; }
  .app-tbl { width: 100%; min-width: max-content; border-collapse: collapse; font-size: .66rem; font-variant-numeric: tabular-nums; }
  .app-tbl th { font-family: var(--mono); font-size: .52rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--app-muted); text-align: left; padding: .5rem; border-bottom: 1px solid var(--app-line); white-space: nowrap; }
  .app-tbl td { padding: .5rem; border-bottom: 1px solid var(--app-line); vertical-align: middle; white-space: nowrap; }
  .app-tbl tr:last-child td { border-bottom: 0; }
  .app-tbl td:first-child, .app-th-check { color: var(--app-muted); width: 1.4rem; }
  .app-right { text-align: right !important; }
  .app-tbl td.app-right { white-space: nowrap; }
  .app-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .45rem .12rem .15rem; border: 1px solid var(--app-line); background: var(--app-bg); font-family: var(--mono); font-size: .56rem; white-space: nowrap; }
  .app-chip--bare { border: 0; background: none; padding: 0; gap: .5rem; }
  .app-src-ico { width: 20px; height: 20px; display: inline-grid; place-items: center; font-family: var(--mono); font-style: normal; font-size: .46rem; font-weight: 600; color: var(--cream); flex: none; }
  .app-src-ico--fjord { background: var(--fjord) }
  .app-src-ico--ember { background: var(--ember) }
  .app-src-ico--ink { background: var(--ink) }
  .app-src-ico--moss { background: var(--moss-deep) }
  .app-src-ico--dune { background: var(--dune-deep) }
  .app-chip--bare .app-src-ico { width: 24px; height: 24px; }
  .app-tags { display: inline-flex; flex-wrap: nowrap; gap: .25rem; }
  .app-mt { font-family: var(--mono); font-size: .52rem; letter-spacing: .03em; text-transform: uppercase; padding: .1rem .4rem; background: rgba(27,79,88,.1); color: var(--fjord); border: 1px solid rgba(27,79,88,.2); white-space: nowrap; }
  .app-mt--more { background: var(--app-bg); color: var(--app-muted); border-color: var(--app-line); }
  .app-mt--ocr { background: rgba(168,87,19,.12); color: var(--app-amber); border-color: rgba(168,87,19,.3); }
  .app-badge { display: inline-block; font-family: var(--mono); font-size: .52rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .45rem; border: 1px solid transparent; white-space: nowrap; }
  .app-badge--critical { background: rgba(184,55,43,.12); color: var(--app-red); border-color: rgba(184,55,43,.3); }
  .app-badge--high { background: rgba(168,87,19,.14); color: var(--app-amber); border-color: rgba(168,87,19,.3); }
  .app-badge--medium { background: var(--ink-10); color: var(--app-ink); border-color: var(--ink-20); }
  .app-badge--public { background: rgba(184,55,43,.12); color: var(--app-red); border-color: rgba(184,55,43,.3); }
  .app-badge--external { background: rgba(168,87,19,.14); color: var(--app-amber); border-color: rgba(168,87,19,.3); }
  .app-badge--internal { background: var(--ink-10); color: var(--app-ink); border-color: var(--ink-20); }
  .app-badge--src { background: var(--app-card); color: var(--app-muted); border-color: var(--app-line); }
  .app-badge--critical::before { content: "▲ "; } .app-badge--public::before { content: "⊙ "; }
  .app-risk { display: inline-grid; grid-template-columns: 40px 1.5rem 1.6rem; gap: .35rem; align-items: center; }
  .app-risk b { font-weight: 600; font-size: .78rem; text-align: right; }
  .app-risk .app-delta { justify-self: start; }
  .app-delta { font-family: var(--mono); font-size: .5rem; font-weight: 600; padding: .05rem .25rem; border: 1px solid; }
  .app-delta--up { color: var(--app-red); background: rgba(184,55,43,.08); border-color: rgba(184,55,43,.3); }
  .app-delta--down { color: var(--app-green); background: rgba(53,128,76,.08); border-color: rgba(53,128,76,.3); }
  .app-pager { display: flex; justify-content: space-between; align-items: center; padding: .45rem .7rem; border-top: 1px solid var(--app-line); }

  /* the access graph: grants on the right, the file on the left, one edge each.
     Drawn in the page's materials, so squares where the product rounds and the
     signal colours instead of the product's own. */
  .ag { padding: .9rem .8rem; }
  .ag svg { width: 100%; height: 190px; overflow: visible; }
  .ag-edge { fill: none; stroke-width: 1; opacity: .5; }
  .ag-edge--public { stroke: var(--app-red); stroke-width: 1.5; stroke-dasharray: 5 3; }
  .ag-edge--external { stroke: var(--app-amber); }
  .ag-edge--internal { stroke: var(--app-muted); }
  .ag-file rect { fill: rgba(184,55,43,.06); stroke: var(--app-red); stroke-width: 1.5; }
  .ag-file-sev { fill: var(--app-red); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-anchor: middle; }
  .ag-file-name { fill: var(--app-ink); font-family: var(--mono); font-size: 10px; text-anchor: middle; }
  .ag-node rect { fill: var(--app-card); stroke: var(--app-line); stroke-width: 1; }
  .ag-node--public rect { fill: rgba(184,55,43,.06); stroke: var(--app-red); stroke-dasharray: 4 2; }
  .ag-node--external rect { stroke: rgba(168,87,19,.45); }
  .ag-ico-bg { fill: rgba(15,18,20,.06); stroke: var(--app-muted); stroke-width: .7; }
  .ag-node--public .ag-ico-bg { fill: rgba(184,55,43,.1); stroke: var(--app-red); }
  .ag-node--external .ag-ico-bg { fill: rgba(168,87,19,.12); stroke: var(--app-amber); }
  .ag-ico-line { fill: none; stroke: var(--app-muted); stroke-width: .9; }
  .ag-node--public .ag-ico-line { stroke: var(--app-red); }
  .ag-node--external .ag-ico-line { stroke: var(--app-amber); }
  .ag-label { fill: var(--app-muted); font-family: var(--mono); font-size: 10px; }
  .ag-label--public { fill: var(--app-red); font-weight: 600; }
  .ag-label--more { fill: var(--app-muted); opacity: .7; }

  /* who those grants resolve to, as the product's collapsible tree */
  .app-tree { padding: .35rem 0; }
  .app-tw { display: flex; align-items: center; gap: .45rem; padding: .28rem .8rem; font-size: .68rem; white-space: nowrap; }
  .app-tw--d1 { padding-left: 2rem; }
  .app-tw b { font-weight: 600; }
  .app-tw-c { width: .6rem; flex: none; color: var(--app-muted); font-size: .55rem; }
  .app-tw-i { width: 11px; height: 11px; flex: none; border: 1px solid var(--app-muted); border-radius: 50%; }
  .app-tw-i--g { border-radius: 0; border-color: var(--fjord); background: rgba(27,79,88,.12); }
  .app-tw .app-meta { margin-left: .1rem; }
  .app-tw .app-pill { margin-left: auto; }
  .app-warnflag { margin-left: auto; font-family: var(--mono); font-size: .56rem; color: var(--app-amber); }

  /* the finding panel, as a modal over the findings page */
  .app--modal { background: rgba(15,18,20,.55); padding: 1rem; justify-content: center; }
  .app-modal { background: var(--app-card); border: 1px solid rgba(0,0,0,.2); display: flex; flex-direction: column; max-height: 100%; }
  /* the detection page: switches, budgets, and the rule sets behind them */
  .app-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  .app-sets { padding: .2rem .8rem .5rem; }
  .app-set { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .26rem 0; border-bottom: 1px solid var(--app-line); }
  .app-set:last-child { border-bottom: 0; }
  .app-set-l b { display: block; font-weight: 500; font-size: .66rem; }
  .app-sw { width: 26px; height: 14px; background: var(--app-line); position: relative; flex: none; }
  .app-sw i { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--app-muted); }
  .app-sw--on { background: rgba(53,128,76,.22); }
  .app-sw--on i { left: 14px; background: var(--app-green); }
  .app-val { font-family: var(--mono); font-size: .58rem; border: 1px solid var(--app-line); background: var(--app-card); padding: .18rem .45rem; min-width: 3.4rem; text-align: right; white-space: nowrap; }
  .app-secs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--app-line); border-top: 1px solid var(--app-line); }
  .app-sec-row { background: var(--app-card); display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .8rem; font-size: .66rem; }
  .app-sec-row b { font-weight: 500; }

  /* the new-scan modal: how hard to look */
  .app-filters--bare { padding: 0; border: 0; background: none; }
  .app-policy { display: flex; flex-direction: column; gap: .4rem; }
  .app-policy-card { border: 1px solid var(--app-line); background: var(--app-card); padding: .5rem .6rem; display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; }
  .app-policy-card--on { border-color: var(--app-ink); }
  .app-mark { width: 11px; height: 11px; border: 1px solid var(--app-muted); margin-top: 2px; flex: none; }
  .app-policy-card--on .app-mark { border-color: var(--app-ink); background: var(--app-ink); }
  .app-policy-card b { display: block; font-weight: 600; font-size: .72rem; }
  .app-policy-card .app-meta { display: block; }
  .app-policy-expect, .app-policy-eff { margin-top: .2rem; color: var(--ink-60); }

  /* the add-connector wizard, step one: pick a source */
  .app-modal--wide { width: 100%; }
  .app-pick { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .8rem; }
  .pick-lede { max-width: 46rem; }
  .pick-group { display: flex; flex-direction: column; gap: .4rem; }
  .pick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
  .pick-card { background: var(--app-card); border: 1px solid var(--app-line); padding: .5rem .55rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
  .pick-card b { font-weight: 500; font-size: .62rem; line-height: 1.2; overflow-wrap: anywhere; }
  .pick-auth { font-family: var(--mono); font-size: .48rem; color: var(--app-muted); background: var(--app-bg); border: 1px solid var(--app-line); padding: .05rem .25rem; width: fit-content; white-space: nowrap; }
  .app-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .6rem; border-top: 1px solid var(--app-line); }
  @media (max-width: 720px) { .pick-grid { grid-template-columns: repeat(3, 1fr); } }

  .app-modal-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .8rem; border-bottom: 1px solid var(--app-line); }
  .app-modal-head { display: flex; gap: 1rem; align-items: flex-start; padding: .8rem .9rem; border-bottom: 1px solid var(--app-line); }
  .app-riskbox { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .7rem; border: 1px solid var(--app-line); background: var(--app-bg); flex: none; }
  .app-modal-title { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
  .app-modal-title .app-meta { overflow-wrap: anywhere; }
  .app-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
  .app-modal-cols { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
  .app-modal-left, .app-modal-right { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; }
  .app-modal-right { background: var(--app-bg); border-left: 1px solid var(--app-line); }
  .app-section { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); margin-bottom: .2rem; }
  .app-section--fold { color: var(--app-ink); text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: .7rem; font-weight: 600; padding: .3rem 0; }
  .app-ent { display: grid; grid-template-columns: 6.6rem 1fr 40px; gap: .5rem; align-items: center; }
  .app-ent .app-mt { justify-self: start; }
  .app-ent .app-bar { width: 40px; }
  .app-kvrow { display: flex; justify-content: space-between; gap: 1rem; font-size: .64rem; padding: .18rem 0; }
  .app-kvrow span { color: var(--app-muted); flex: none; }
  .app-kvrow b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
  .app-acc { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .5rem; border: 1px solid var(--app-line); background: var(--app-card); font-family: var(--mono); font-size: .6rem; }
  .app-acc--owner { border-style: dashed; }

  /* compliance framework cards */
  .app-fwgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .app-fwcard { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
  .app-fwcard .app-num { font-size: 1.4rem; }
  .app-fwcard .app-meta { display: block; margin-top: .25rem; }
  .app-fwname { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 600; font-size: .8rem; padding-top: .5rem; border-top: 1px solid var(--app-line); }

  /* Below the point where a seven-column table can crop and still look like a
     screenshot rather than a bug, the whole screen is scaled to fit instead.
     The container query gives the factor; site.js reads the post-transform
     height so the strip still sizes itself. */
  /* A screen narrower than its design width cannot crop to two columns and
     still read as a screenshot, so it is scaled down whole instead. site.js
     adds the class and the factor, because CSS cannot derive one: scale()
     needs a unitless number and a container width divided by a number is a
     length. Above the design width nothing is scaled. */
  .shot--scaled .app { width: 824px; flex: none; transform-origin: top left;
    transform: scale(var(--app-scale, 1)); }
  @media (max-width: 860px) { .shot { padding: .5rem; } }
  /* On a phone the gutter is worth more to the screen than to the margin,
     so the strip runs edge to edge and the screen scales up by that much. */
  @media (max-width: 720px) {
    .shots-track { margin-inline: calc(-1 * var(--gutter)); }
    .shot { padding: .35rem; }
  }
  /* No narrow-viewport reflow of a screen: it is scaled whole, so a phone
     sees the same layout a desktop does, smaller. Reflowing it here would
     show a screen the product never renders. */

  /* generic section spacing */
  .section { padding-block: clamp(2.5rem, 6vw, 5rem); }

  /* ---------- problem: the chain ---------- */
  .chain-panel { padding: clamp(2rem, 5vw, 4.5rem); }
  .chain-panel .h-section { max-width: 18ch; }
  .chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--f-line); border: 1px solid var(--f-line); border-radius: var(--r-xl); overflow: hidden; }
  .chain-step { background: var(--f-bg); padding: 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
  .chain-step .who { font-family: var(--mono); font-size: .72rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--f-sub); }
  .chain-step h3 { font-weight: 600; font-size: 1.05rem; line-height: 1.05; letter-spacing: var(--track-tight); }
  .chain-step code { background: none; padding: 0; color: var(--ember); font-size: .95em; font-weight: 500; }
  .chain-step--impact { background: var(--rust); color: var(--cream); }
  .chain-step--impact .who { color: rgba(250,248,241,.75); }
  @media (max-width: 900px) { .chain { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .chain { grid-template-columns: 1fr; } .chain-step { min-height: 0; } }

  /* the three the platform headline names, as a hairline-gapped row */
  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-10); border: 1px solid var(--ink-10); }
  .trio-step { background: var(--cream); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
  .trio-step .who { font-family: var(--mono); font-size: .68rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-60); }
  .trio-step h3 { font-weight: 600; font-size: 1.05rem; line-height: 1.2; letter-spacing: var(--track-tight); text-wrap: balance; }
  @media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

  /* ---------- security: dark field ---------- */
  .sec-panel { padding: clamp(2rem, 5vw, 4.5rem); }
  .sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--f-line); border: 1px solid var(--f-line); border-radius: var(--r-xl); overflow: hidden; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
  .sec-item { background: var(--f-bg); padding: 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
  .sec-item svg { width: 28px; height: 28px; }
  .sec-item h3 { font-weight: 600; font-size: 1.05rem; line-height: 1.05; letter-spacing: var(--track-tight); }
  .sec-item p { font-size: .875rem; line-height: 1.6; color: var(--f-sub); }
  .field-note { margin-top: 1.75rem; font-family: var(--mono); font-size: .82rem; color: var(--f-sub); }
  .field-note a { color: var(--f-ink); text-decoration: underline; text-underline-offset: 3px; }
  .facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-60); }
  .facts b { color: var(--ink); font-weight: 500; }
  @media (max-width: 720px) { .sec-grid { grid-template-columns: 1fr; } }

  /* ---------- connectors ---------- */
  .conn-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; }
  .conn-group h3 { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-60); padding-bottom: .75rem; border-bottom: 1px solid var(--ink-10); margin-bottom: .9rem; }
  .conn-group ul { display: flex; flex-wrap: wrap; gap: .45rem; }
  .conn-group li { font-family: var(--mono); font-size: .68rem; padding: .28rem .6rem; box-shadow: inset 0 0 0 1px var(--ink-20); white-space: nowrap; }
  .conn-group li.soon { color: var(--ink-60); box-shadow: inset 0 0 0 1px var(--ink-10); }
  @media (max-width: 900px) { .conn-groups { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .conn-groups { grid-template-columns: 1fr; } }

  /* ---------- file types: a definition table ---------- */
  .fmt { border-top: 1px solid var(--ink-10); }
  .fmt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: .75rem 3rem; padding: .9rem 0; border-bottom: 1px solid var(--ink-10); align-items: center; }
  .fmt-row h3 { font-weight: 600; font-size: .95rem; line-height: 1.1; letter-spacing: var(--track-tight); }
  .fmt-row p { font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--ink-2); }
  .fmt-row .exts { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
  .fmt-row .exts span { font-family: var(--mono); font-size: .7rem; padding: .2rem .5rem; border-radius: 0; background: var(--ink-10); }
  .fmt-row .exts span.more { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-20); color: var(--ink-60); }
  @media (max-width: 860px) { .fmt-row { grid-template-columns: 1fr; gap: .75rem; } .fmt-row .exts { justify-content: flex-start; } }

  /* ---------- compliance ---------- */
  .fw-row { display: flex; flex-wrap: wrap; gap: .5rem; }
  .fw-row span { font-family: var(--mono); font-size: .8rem; padding: .45rem .8rem; box-shadow: inset 0 0 0 1px var(--ink-20); }

  /* ---------- team ---------- */
  .team { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .person { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-2xl); align-items: start; }
  .person .avatar { width: 108px; height: 144px; flex: none; }
  .person img.avatar { object-fit: cover; }
  .person h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: var(--track-tight); line-height: 1.05; }
  .person .role { font-family: var(--mono); font-size: .68rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--f-sub); margin-top: .35rem; }
  .person p { font-size: .875rem; line-height: 1.6; color: var(--f-sub); margin-top: 1rem; }
  .person a { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
  .person a svg { width: 16px; height: 16px; }
  @media (max-width: 720px) { .team { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .person { grid-template-columns: 1fr; } }

  /* ---------- demo ---------- */
  .demo-panel { border-radius: var(--r-2xl); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.4fr auto; gap: 2rem 3rem; align-items: center; }
  .demo-panel .h-section { max-width: 14ch; }
  .demo-copy { display: flex; flex-direction: column; gap: 1.5rem; }
  .demo-copy p { font-size: .95rem; line-height: 1.65; color: var(--f-sub); max-width: 34rem; }
  .demo-copy p strong { color: var(--f-ink); font-weight: 500; }
  .demo-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
  .demo-side ul { display: flex; flex-direction: column; gap: .5rem; font-family: var(--mono); font-size: .78rem; color: var(--f-sub); }
  .demo-side li { display: flex; gap: .6rem; align-items: center; }
  .demo-side li svg { width: 16px; height: 16px; flex: none; }
  .demo-side .btn { min-width: 220px; }
  @media (max-width: 800px) {
    .demo-panel { grid-template-columns: 1fr; }
    /* stacked, the button has the card's width to fill and no reason not to */
    .demo-side { align-self: stretch; }
    .demo-side .btn { width: 100%; }
  }

  .contact-note { font-size: .875rem; color: var(--ink-60); }
  .contact-note a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

  /* ---------- document pages: privacy, one column of reading copy ---------- */
  .doc { padding-top: clamp(3rem, 8vw, 6rem); }
  .doc-title { max-width: 20ch; }
  .doc-meta { margin-top: 1rem; font-size: .72rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-60); }
  .prose { max-width: var(--measure); margin-top: clamp(2rem, 4vw, 3rem); }
  .prose .lede { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ink-10); }
  .prose .lede b { font-weight: 600; color: var(--ink); }
  .prose h2 { font-weight: 600; font-size: 1.15rem; letter-spacing: var(--track-tight); margin-top: 2.5rem; }
  .prose p { font-size: .9rem; line-height: 1.7; color: var(--ink-2); margin-top: .9rem; }
  .prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
  .prose .mono { font-size: .84em; }

  /* ---------- footer ---------- */
  .site-foot { padding: clamp(2.5rem, 6vw, 5rem) 0 2rem; border-top: 1px solid var(--ink-10); }
  .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
  .foot-brand p { font-size: .875rem; line-height: 1.6; color: var(--ink-60); max-width: 26rem; margin-top: 1rem; }
  .foot-brand a.mail { font-family: var(--mono); font-size: .85rem; display: inline-block; margin-top: .75rem; text-decoration: underline; text-underline-offset: 3px; }
  .foot-col h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-60); margin-bottom: .9rem; }
  .foot-col a { display: block; padding: .2rem 0; font-size: .82rem; letter-spacing: var(--track-tight); color: var(--ink-2); }
  .foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .foot-bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-10); font-family: var(--mono); font-size: .76rem; color: var(--ink-60); }
  @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
}

@layer utilities {
  .mt-l { margin-top: 2.5rem; }
  .mt-m { margin-top: 1.5rem; }
  .mt-0 { margin-top: 0; }
  .mb-l { margin-bottom: 2.5rem; }
  .mb-m { margin-bottom: 2rem; }
}

/* Paper. A security questionnaire gets printed and attached to an email, so the
   page has to survive leaving the browser: no carousel, no sticky chrome, no
   button that cannot be pressed, and every link's destination spelled out. */
@media print {
  @page { margin: 18mm; }
  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip, .site-head, .nav-toggle, .shots-head, .shots-dots, .btn, .demo-side { display: none !important; }
  .shots-track { display: block; height: auto !important; overflow: visible; }
  .shot { display: none; }
  .shot:first-child { display: block; width: 100%; break-inside: avoid; }
  .section { padding-block: 0 14mm; break-inside: avoid; }
  .field, .app { background: #fff !important; color: #000 !important; }
  .field { border: 1px solid #000; }
  .h-display { font-size: 24pt; }
  .h-section { font-size: 15pt; }
  .lede, .statement p, .sec-item p, .person p { color: #000; }
  .rise, .reveal { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
  /* a printed link is useless without its address */
  main a[href^="http"]::after, main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .foot-grid { display: none; }
  .site-foot { border-top: 1px solid #000; }
}