/* SWISS SNIP — shared visual world.
   One family, two axes, three donations. See the direction contract in index.html. */

/* ---------------------------------------------------------------- font ---
   Self-hosted variable Archivo. No CDN, no fonts.googleapis.com: the site
   obeys the same rule the product sells. wdth and wght both do real work. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- tokens --- */
:root {
  /* Ground: bone, not white. Paper under Zurich daylight, which is the scene
     this is read in — an auditor at a desk, mid-morning, document in hand. */
  --bone: #edebe6;
  --bone-deep: #e3e0d8;
  --paper: #fdfdfc;
  --ink: #0b0b0b;
  --ink-2: #56534d;
  --ink-3: #666158;   /* >=4.7:1 on --bone AND --bone-deep */
  --rule: #c9c5bc;
  --rule-soft: #dcd8d0;

  /* The single accent. It is the snip rectangle's own colour, so red on this
     page always means "this is the mark the tool makes". Never decoration. */
  --red: #d8232a;
  --red-deep: #a5151b;
  --red-on-ink: #ea4a52;  /* 5.2:1 on --ink; --red is only 3.9:1 there */

  /* Cell fills, lifted verbatim from addin/src/excel/office.ts. The swatches
     on this page are the product's actual colours. */
  --snip-text: #fff3c4;
  --snip-validation: #d7f2dd;
  --snip-exception: #fbd9d9;
  --snip-validation-ink: #1b7f3b;
  --snip-exception-ink: #b3261e;

  --shell: min(1440px, 100% - 3rem);
  --seam: 34%;

  --step: clamp(0.9rem, 0.82rem + 0.4vw, 1.0625rem);
  --lede: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  --h2: clamp(2rem, 1.3rem + 3.2vw, 4.25rem);
  --h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--step);
  font-variation-settings: "wght" 420, "wdth" 100;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No overflow-x:hidden. The wide diagram and the sheets scroll inside their
     own containers instead, and an ancestor clip would break the sticky
     topbar, toolbar and working paper. */
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--red); color: #fff; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
html { scrollbar-color: var(--rule) var(--bone); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bone); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--bone); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

img, svg { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ typography --- */
h1, h2, h3, h4 {
  margin: 0;
  font-variation-settings: "wght" 700, "wdth" 96;
  /* 0.96, not tighter: at display size a descender in "boundary" or
     "engagement" lands in the line below. */
  line-height: 0.96;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h2 { font-size: var(--h2); }
h3 {
  font-size: var(--h3);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-variation-settings: "wght" 640, "wdth" 98;
}

p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--lede);
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-variation-settings: "wght" 440, "wdth" 100;
  max-width: 30ch;
}

.muted { color: var(--ink-2); }

/* The micro-label with its rule — taken from the reference and used as the
   page's only recurring ornament. */
.label {
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings: "wght" 560, "wdth" 100;
  color: var(--ink-2);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 1.6rem;
}

.marker {
  position: absolute;
  /* Lifted into the section's own top padding: a mark in the margin, clear of
     the content box, so it can never land on a heading or a table. */
  top: -3.25rem;
  right: 0;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings: "wght" 560, "wdth" 100;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  pointer-events: none;
}
.band--ink .marker { color: #8a847a; border-bottom-color: #3a372f; }
@media (max-width: 900px) { .marker { display: none; } }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; }

/* Underlined text link with the arrow, from the reference. */
.tlink {
  /* Explicit rather than inherited: currentColor on the underline should
     resolve to a named token, not to whatever happens to cascade. */
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 580, "wdth" 100;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.tlink:hover { color: var(--red-deep); gap: 0.85rem; }
.band--ink .tlink { color: var(--bone); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 600, "wdth" 100;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

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

.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* ----------------------------------------------------------------- shell --- */
.shell {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
}

/* Donation, Brodovitch: a seam the page composes across, rather than a stack
   of centred blocks. One element per section deliberately steps over it. */
.seamed { position: relative; }
.seamed::before {
  content: "";
  position: absolute;
  /* Only meaningful while the section is actually two columns. */
  display: none;
  left: var(--seam);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-soft);
  pointer-events: none;
}
@media (min-width: 901px) {
  .seamed::before { display: block; }
}

section { position: relative; }

.band {
  padding-block: clamp(4.5rem, 9vw, 9rem);
  border-top: 1px solid var(--rule);
}

.band--ink {
  background: var(--ink);
  color: var(--bone);
  border-top: none;
}
.band--ink .label { color: #a09a90; border-bottom-color: #4a463f; }
.band--ink .muted { color: #a09a90; }
.band--ink .seamed::before { background: #2a2823; }

.band--deep { background: var(--bone-deep); }

/* ------------------------------------------------------------------- nav --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 62px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-variation-settings: "wght" 640, "wdth" 100;
}
.mark { width: 17px; height: 17px; flex: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 540, "wdth" 100;
}
.nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }

.nav__cta { color: var(--ink) !important; }

@media (max-width: 720px) {
  .nav { gap: 1rem; }
  .nav__hide { display: none; }
}

/* --------------------------------------------------------------- reveals --- */
.rise {
  opacity: 1;
  transform: none;
}
body.js .rise.rise--wait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
body.js .rise.rise--wait.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.js .rise { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- footer --- */
.foot {
  background: var(--ink);
  color: #a09a90;
  padding-block: 3.5rem 2.5rem;
  font-size: 0.8125rem;
}
.foot a { color: var(--bone); text-decoration: none; border-bottom: 1px solid #3a372f; }
.foot a:hover { border-bottom-color: var(--red); }
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid #2a2823;
}
.foot__grid h3 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings: "wght" 600, "wdth" 100;
  color: #8a847a;
  margin-bottom: 1rem;
  letter-spacing: 0.2em;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font-size: 0.75rem;
  color: #8a847a;
}
.foot__base p { margin: 0; max-width: none; }
.foot__entity { margin-top: 0.75rem; font-size: 0.75rem; color: #8a847a; }
@media (max-width: 720px) {
  .foot__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* -------------------------------------------------- shared: document view ---
   Used by the hero animation and the demo. The page image is a real render
   from the extraction pipeline; the boxes are real word coordinates. */
.docframe {
  position: relative;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 14px 28px -14px rgba(11, 11, 11, 0.28);
}
.docframe img { width: 100%; height: auto; }

.snipbox {
  position: absolute;
  border: 1.5px solid var(--red);
  background: rgba(216, 35, 42, 0.13);
  pointer-events: none;
}
.snipbox--drawing { border-style: dashed; }

/* --------------------------------------------------- shared: sheet mimic ---
   Deliberately NOT in Archivo. This is a simulation of another application's
   chrome, so it uses the host platform's UI stack the way Excel would.
   Donation, seven-segment: the empty cells are drawn as carefully as the
   filled ones — the grid is a fixed mask where place never moves. */
.sheet {
  --cell-h: 26px;
  background: #fff;
  border: 1px solid #b9b6ae;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: #1b1b1f;
  user-select: none;
  overflow-x: auto;
  overflow-y: hidden;
}
.sheet table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.sheet--live table { min-width: 430px; }
.sheet th, .sheet td {
  height: var(--cell-h);
  border-right: 1px solid #e2e0dc;
  border-bottom: 1px solid #e2e0dc;
  padding: 0 6px;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet thead th, .sheet tbody th {
  background: #f2f1ee;
  color: #61646b;
  font-size: 11px;
  text-align: center;
  font-weight: 400;
  border-color: #d5d2cc;
}
.sheet tbody th { width: 34px; }
.sheet td.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================ hero === */
.hero {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
}

/* Donation, BLAST: the type mass carries every value. No photograph, no
   gradient — the letters are the field the demonstration sits on. */
.hero__type {
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  /* Sized from the face's own metrics, not guessed: "SWISS" measures 2.889em
     at this weight and width, so 20.7vw puts the longer line at ~62% of the
     shell and leaves the last S standing behind the statement. */
  font-size: clamp(2.9rem, 16.8vw, 15.6rem);
  line-height: 0.82;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  font-variation-settings: "wght" 820, "wdth" 88;
  color: var(--ink);
}
.hero__type span { display: block; }

.hero__demo {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(46%, 680px);
  margin: 0;
}

.hero__cap {
  position: absolute;
  right: 0;
  bottom: -2.2rem;
  margin: 0;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

/* ------------------------------------------------------ the Excel window ---
   A depiction of the host application, so it is drawn in the host platform's
   UI stack and Excel's own greys, never in the brand face. Everything inside
   is sized in cqw so the whole window scales as one object. */
.xl {
  container-type: inline-size;
  aspect-ratio: 1.62;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #b9b6ae;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1b1b1f;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08), 0 18px 32px -16px rgba(11, 11, 11, 0.36);
}

.xl__bar {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: 3.4cqw;
  padding: 0 1.6cqw;
  background: #f2f1ee;
  border-bottom: 1px solid #d5d2cc;
  flex: none;
}
.xl__dots { display: flex; gap: 0.7cqw; }
.xl__dots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #d5d2cc; }
.xl__title {
  font-size: 1.4cqw;
  color: #61646b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xl__tabs {
  display: flex;
  align-items: flex-end;
  gap: 2.2cqw;
  height: 3.4cqw;
  padding: 0 1.6cqw;
  background: #f7f6f3;
  border-bottom: 1px solid #d5d2cc;
  font-size: 1.4cqw;
  color: #61646b;
  flex: none;
}
.xl__tabs .is-on {
  color: var(--red);
  font-weight: 600;
  border-bottom: 0.35cqw solid var(--red);
  padding-bottom: 0.5cqw;
}

.xl__ribbon {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  height: 5.4cqw;
  padding: 0 1.6cqw;
  border-bottom: 1px solid #d5d2cc;
  flex: none;
}
.xl__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  font-size: 1.35cqw;
  color: #3f4147;
  border: 1px solid #dcdad5;
  padding: 0.7cqw 1cqw;
  white-space: nowrap;
}
.xl__tool i { width: 1.6cqw; height: 1.1cqw; border: 1px solid #c9c5bc; }
.xl__tool.is-on { border-color: #8f8b83; background: #f2f1ee; font-weight: 600; }
.xl__rule { width: 1px; height: 3cqw; background: #dcdad5; }

.xl__body { flex: 1; display: flex; min-height: 0; }

.xl__grid {
  flex: 1;
  border-collapse: collapse;
  table-layout: fixed;
  align-self: flex-start;
  width: 100%;
  font-size: 1.5cqw;
}
.xl__grid th, .xl__grid td {
  height: 3.2cqw;
  border-right: 1px solid #e6e4e0;
  border-bottom: 1px solid #e6e4e0;
  padding: 0 0.9cqw;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xl__grid thead th, .xl__grid tbody th {
  background: #f2f1ee;
  color: #61646b;
  text-align: center;
  font-size: 1.3cqw;
  border-color: #d5d2cc;
}
.xl__grid tbody th { width: 4cqw; }
.xl__grid td.b { font-weight: 600; }
.xl__grid td.r { text-align: right; font-variant-numeric: tabular-nums; }
.xl__grid td.c { text-align: center; }
.xl__grid td.fill { background: var(--snip-text); }
.xl__grid td.ok { background: var(--snip-validation); color: var(--snip-validation-ink); font-weight: 700; }
#xlCell { transition: background-color 0.35s var(--ease); }
#xlCell.is-sel { outline: 0.28cqw solid #1f6feb; outline-offset: -0.28cqw; }
#xlCell.is-filled { background: var(--snip-text); }

/* The pane arrives from the right edge, the way it does in Excel. */
.xl__pane {
  flex: none;
  width: 40cqw;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #d5d2cc;
  background: #faf9f7;
  transform: translateX(101%);
  transition: transform 0.62s var(--ease);
}
.xl.is-open .xl__pane { transform: none; }
.xl__panehead {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  height: 3.6cqw;
  padding: 0 1.2cqw;
  border-bottom: 1px solid #e2e0dc;
  background: #f2f1ee;
  font-size: 1.35cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}
.xl__panehead svg { width: 1.7cqw; height: 1.7cqw; flex: none; }
.xl__panedoc {
  position: relative;
  margin: 1.2cqw;
  background: #fff;
  border: 1px solid #e2e0dc;
  /* Crop window on the page render: x 4–96%, y 3–62%. site.js holds the same
     four numbers and maps the snip rectangle through them. */
  aspect-ratio: 1.1019;
  overflow: hidden;
  flex: none;
}
.xl__panedoc img {
  position: absolute;
  width: 108.696%;
  left: -4.348%;
  top: -5.086%;
  height: auto;
  max-width: none;
}
.xl__box { border-width: 0.2cqw; }
.xl__panefoot {
  margin: 0 1.2cqw 1.2cqw;
  font-size: 1.3cqw;
  color: #61646b;
  font-variant-numeric: tabular-nums;
}

.hero__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__lede { margin: 0; max-width: 34ch; }
.hero__place { margin: 0; align-self: end; }

@media (max-width: 1000px) {
  .hero__foot { grid-template-columns: 1fr; }
  .hero__place { display: none; }
  .hero__demo {
    position: static;
    transform: none;
    width: 100%;
    max-width: 620px;
    margin: 3rem auto 3.5rem;
  }
  .hero__cap { position: static; margin-top: 1.25rem; text-align: left; }
}

/* Below this the two panels cannot sit side by side and stay legible, so the
   pane moves under the grid and the whole window gets taller. */
@media (max-width: 760px) {
  .xl { aspect-ratio: auto; }
  .xl__bar { height: 7cqw; gap: 2.4cqw; padding: 0 2.4cqw; }
  .xl__dots i { width: 1.8cqw; height: 1.8cqw; }
  .xl__title { font-size: 2.7cqw; }
  .xl__tabs { height: 7cqw; gap: 3.2cqw; padding: 0 2.4cqw; font-size: 2.7cqw; }
  .xl__tabs span:nth-child(3), .xl__tabs span:nth-child(4) { display: none; }
  .xl__ribbon { display: none; }
  .xl__body { display: block; }
  .xl__grid { font-size: 2.9cqw; }
  .xl__grid th, .xl__grid td { height: 6.4cqw; padding: 0 1.6cqw; }
  .xl__grid thead th, .xl__grid tbody th { font-size: 2.6cqw; }
  .xl__grid tbody th { width: 7cqw; }
  .xl__grid td:nth-child(3) { display: none; }
  .xl__grid th:nth-child(3) { display: none; }
  .xl__pane {
    width: auto;
    border-left: none;
    border-top: 1px solid #d5d2cc;
    transform: translateY(6%);
    opacity: 0;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  }
  .xl.is-open .xl__pane { transform: none; opacity: 1; }
  .xl__panehead { height: 7.4cqw; font-size: 2.7cqw; padding: 0 2.4cqw; gap: 1.8cqw; }
  .xl__panehead svg { width: 3.4cqw; height: 3.4cqw; }
  .xl__panedoc { margin: 2.4cqw; }
  .xl__panefoot { margin: 0 2.4cqw 2.4cqw; font-size: 2.6cqw; }
}

/* ============================================================== thesis === */
.thesis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
}
.thesis__item {
  padding: 2.5rem 2.25rem 0 0;
  border-top: 1px solid #2a2823;
  margin-right: 2.25rem;
}
.thesis__item:last-child { margin-right: 0; padding-right: 0; }
.thesis__more {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  max-width: none;
}
.band--ink .tlink { color: var(--bone); }
.band--ink .tlink:hover { color: var(--red-on-ink); }
.thesis__item h3 { margin-bottom: 1rem; max-width: 15ch; }
@media (max-width: 900px) {
  .thesis { grid-template-columns: 1fr; }
  .thesis__item { margin-right: 0; padding-right: 0; padding-block: 2rem 0; }
}

/* ================================================================= how === */
.how {
  display: grid;
  grid-template-columns: var(--seam) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.how__head h2 { margin-top: 0.5rem; }
.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.how__steps li {
  padding: 2.25rem 2rem 2.25rem 0;
  border-top: 1px solid var(--rule);
}
.how__n {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--red);
  font-variation-settings: "wght" 600, "wdth" 100;
  margin-bottom: 1.1rem;
}
.how__steps h3 { margin-bottom: 0.75rem; max-width: 16ch; }
.how__steps p { font-size: 0.9375rem; }
@media (max-width: 900px) {
  .how, .how__steps { grid-template-columns: 1fr; }
  .how__steps li { padding-right: 0; }
}

/* =============================================================== kinds === */
.kinds {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.kinds__copy h2 { margin-bottom: 1.25rem; max-width: 14ch; }
.kinds__sheet { grid-row: span 2; box-shadow: 0 1px 2px rgba(11,11,11,.07), 0 16px 28px -16px rgba(11,11,11,.3); }
.kinds__sheet td:nth-child(2) { width: 44%; }
.kinds__sheet .k-text { background: var(--snip-text); }
.kinds__sheet .k-val {
  background: var(--snip-validation);
  color: var(--snip-validation-ink);
  text-align: center;
  font-weight: 700;
}
.kinds__sheet .k-exc {
  background: var(--snip-exception);
  color: var(--snip-exception-ink);
  text-align: center;
  font-weight: 700;
}
.kinds__legend {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.kinds__legend li { display: flex; align-items: center; gap: 0.7rem; }
.chip { width: 22px; height: 14px; flex: none; border: 1px solid var(--rule); }
.chip--text { background: var(--snip-text); }
.chip--val { background: var(--snip-validation); }
.chip--exc { background: var(--snip-exception); }
@media (max-width: 900px) {
  .kinds { grid-template-columns: 1fr; }
  .kinds__sheet { grid-row: auto; }
}

/* ================================================================ flow === */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.flow__head h2 { margin: 0.5rem 0 1.25rem; }
.flow__head .tlink { margin-top: 0.75rem; }
.flow > * { min-width: 0; }
.flow__fig { margin: 0; min-width: 0; }
/* The diagram has a legible minimum. Below it the figure scrolls rather than
   shrinking the labels into illegibility — this is the artefact the copy tells
   a reviewer to file, so it may not be the least readable thing on the page. */
.flow__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.flow__fig svg { width: 100%; min-width: 620px; height: auto; overflow: visible; }
.flow__hint {
  display: none;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-3);
}
@media (max-width: 667px) { .flow__hint { display: block; } }
.flow__fig figcaption {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  max-width: 62ch;
}
.f-box { fill: none; stroke: var(--ink); stroke-width: 1; }
.f-box--dash { stroke: var(--rule); stroke-dasharray: 3 3; }
.f-box--solid { fill: rgba(11, 11, 11, 0.035); }
.f-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-3);
  font-variation-settings: "wght" 600, "wdth" 100;
}
.f-h {
  font-size: 15px;
  fill: var(--ink);
  font-variation-settings: "wght" 650, "wdth" 98;
  letter-spacing: -0.01em;
}
.f-t { font-size: 12.5px; fill: var(--ink-2); }
.f-small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.f-dim { fill: var(--ink-3); }
.f-rule { stroke: var(--rule); stroke-width: 1; }
.f-border { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 5; }
.f-arrow line { stroke: var(--ink); stroke-width: 1; }
.f-arrow polygon { fill: var(--ink); }
.f-out line { stroke: var(--red); stroke-width: 1.5; }
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================== regulation === */
.reg__h { margin: 0.75rem 0 clamp(2.5rem, 5vw, 4rem); }
.reg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.reg li {
  padding: 2.25rem 3rem 2.25rem 0;
  border-top: 1px solid #2a2823;
}
.reg li .chipst { justify-self: start; align-self: start; margin-bottom: 1.3rem; }
.reg li h3 { margin-bottom: 0.55rem; }
.reg__sub {
  font-size: 0.8125rem;
  color: #a09a90;
  margin: 0 0 0.9rem;
}
.reg li .tlink { margin-top: 1.1rem; color: var(--bone); }
.reg li .tlink:hover { color: var(--red-on-ink); }

.reg__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 1.5rem;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.reg__icon .dash { stroke-dasharray: 3 2.5; stroke: #8a847a; }
.reg li h3 { margin-bottom: 0.85rem; }
.reg li p { font-size: 0.9375rem; }
.reg strong { color: var(--bone); font-variation-settings: "wght" 600, "wdth" 100; }
.reg__note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2823;
  font-size: 0.875rem;
  max-width: 74ch;
}
@media (max-width: 860px) {
  .reg { grid-template-columns: 1fr; }
  .reg li { padding-right: 0; }
}

/* ============================================================== deploy === */
.deploy {
  display: grid;
  grid-template-columns: var(--seam) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.deploy__head h2 { margin: 0.5rem 0 1.25rem; }
.deploy__list { display: grid; }
.deploy__list article {
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.deploy__list h3 { margin-bottom: 0.7rem; }
.deploy__list p { font-size: 0.9375rem; }
@media (max-width: 900px) { .deploy { grid-template-columns: 1fr; } }

/* ================================================================ demo === */
.demoIntro {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem);
}
.demoIntro__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.demoIntro__h {
  font-size: clamp(2.4rem, 6.4vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.036em;
  font-variation-settings: "wght" 780, "wdth" 94;
  margin-top: 0.5rem;
}
.demoIntro__copy p { font-size: 0.9375rem; }
.demoIntro__note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.875rem;
}
@media (max-width: 900px) {
  .demoIntro__in { grid-template-columns: 1fr; align-items: start; }
}

/* --- square list markers, filled for present, hollow for absent --- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ticks li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 0.9375rem;
}
.ticks li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 0.42em;
  background: var(--ink);
}

/* --- toolbar --- */
.workbench { padding-bottom: clamp(3rem, 6vw, 5rem); }
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding-block: 0.9rem;
  border-block: 1px solid var(--ink);
  position: sticky;
  top: 62px;
  z-index: 30;
  background: var(--bone);
}
.tools__group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tools__group--end { margin-left: auto; }

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variation-settings: "wght" 560, "wdth" 100;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.tool:hover { color: var(--ink); border-color: var(--ink-3); }
.tool.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: #fff;
  font-variation-settings: "wght" 640, "wdth" 100;
}
.tool__swatch {
  width: 15px;
  height: 11px;
  border: 1px solid var(--rule);
  flex: none;
}
.tool--plain { letter-spacing: 0.12em; }

/* --- bench --- */
.bench {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.bench > * { min-width: 0; }
.bench__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-bottom: 0.85rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.bench__file { font-variation-settings: "wght" 620, "wdth" 100; }
.bench__cap .muted { margin-left: auto; }

.bench__doc { margin: 0; }
.docstage { position: relative; touch-action: none; }
.docstage.is-ready { cursor: crosshair; }
.docstage img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.docstage__layer { position: absolute; inset: 0; pointer-events: none; }
.snipbox.is-lit {
  border-color: #1f6feb;
  background: rgba(31, 111, 235, 0.18);
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.3);
}

.bench__sheet { position: sticky; top: 128px; }

/* Live sheet: the target cells read as places before anything is in them. */
.sheet--live { box-shadow: 0 1px 2px rgba(11,11,11,.07), 0 16px 28px -16px rgba(11,11,11,.28); }
.sheet--live td { transition: background-color 0.35s var(--ease); }
.sheet--live td:first-of-type { width: 32%; }
.sheet--live .is-head { font-weight: 700; background: #f7f6f3; }
.sheet--live .is-title { font-weight: 700; }
.sheet--live .is-muted { color: #767369; }
.sheet--live .is-centre { text-align: center; }
.sheet--live .is-target { cursor: pointer; }
.sheet--live .is-target:not(.is-snipped) { background: repeating-linear-gradient(
  -45deg, transparent, transparent 5px, #faf9f7 5px, #faf9f7 10px); }
.sheet--live .is-target:hover { outline: 1px solid #b9b6ae; outline-offset: -1px; }
.sheet--live .is-active {
  outline: 2px solid #1f6feb;
  outline-offset: -2px;
}
.sheet--live .is-target:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* --- hidden sheet inspector --- */
.meta {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--ink);
  background: #fff;
}
.meta__h {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-variation-settings: "wght" 640, "wdth" 100;
  margin-bottom: 0.6rem;
}
.meta__lead { font-size: 0.8125rem; margin-bottom: 1rem; max-width: 52ch; }
.meta__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.meta__table { min-width: 560px; }
.meta__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meta__table th, .meta__table td {
  text-align: left;
  padding: 5px 9px 5px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.meta__table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-variation-settings: "wght" 600, "wdth" 100;
  border-bottom-color: var(--ink);
}
.meta__table .is-num { text-align: right; padding-right: 14px; }
.meta__empty { color: var(--ink-3); padding-block: 12px; }

/* --- quick pick (no-mouse path) --- */
.quickpick {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.quickpick__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-right: 0.25rem;
}
.quickpick__btn {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.quickpick__btn:hover { color: var(--ink); border-color: var(--ink); }

/* --- status --- */
.statusline {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: #fff;
  font-size: 0.875rem;
  color: var(--ink-2);
  max-width: none;
  min-height: 3rem;
  display: flex;
  align-items: center;
}
.statusline.is-ok { border-color: var(--ink); color: var(--ink); }
.statusline.is-preview {
  border-color: var(--red);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.statusline.is-link { border-color: #1f6feb; color: var(--ink); }
.statusline.is-err { border-color: var(--red); background: #fdf3f3; color: var(--red-deep); }

@media (max-width: 1000px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bench__sheet { position: static; }
  .tools { position: static; }
}

/* --- closing notes --- */
.demoNotes__in { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.demoNotes__in h2 { margin-top: 0.5rem; max-width: 20ch; }
.demoNotes__one { max-width: 62ch; font-size: 0.9375rem; margin-top: 1.25rem; }
.demoNotes__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.demoNotes__cols article {
  padding: 2rem 2.25rem 0 0;
  border-top: 1px solid var(--rule);
  margin-right: 2.25rem;
}
.demoNotes__cols article:last-child { margin-right: 0; padding-right: 0; }
.demoNotes__cols h3 { margin-bottom: 0.8rem; max-width: 18ch; }
.demoNotes__cols p { font-size: 0.9375rem; }
.demoNotes__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .demoNotes__cols { grid-template-columns: 1fr; }
  .demoNotes__cols article { margin-right: 0; padding-right: 0; }
}

/* =============================================================== trust === */
.trustHead { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.trustHead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
/* The title is capped by its own column: --title-em is the measured width of
   the longest line, in ems, at this weight and width. A ten-letter word and a
   five-letter one cannot share a font size and both fit. */
.trustHead__title { container-type: inline-size; }
.trustHead__h {
  font-size: min(clamp(2.6rem, 11vw, 10rem), calc(100cqw / var(--title-em, 4)));
  line-height: 0.9;
  letter-spacing: -0.036em;
  text-transform: uppercase;
  font-variation-settings: "wght" 800, "wdth" 90;
}
.trustHead__copy .lede { margin-bottom: 1rem; max-width: 34ch; }
.trustHead__copy p.muted { font-size: 0.9375rem; margin-bottom: 1.25rem; }

/* The four facts that answer most of a questionnaire's first page. */
.factrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  border-top: 1px solid var(--ink);
}
.factrow > div { padding: 1.5rem 1.5rem 0 0; }
.factrow > div:last-child { padding-right: 0; }
.factrow dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 560, "wdth" 100;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.factrow dd {
  margin: 0;
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-variation-settings: "wght" 640, "wdth" 98;
}
@media (max-width: 900px) {
  .trustHead__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .factrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factrow > div { padding-bottom: 1.25rem; }
}

/* --- section sub-navigation --- */
.subnav {
  position: sticky;
  top: 62px;
  z-index: 30;
  background: var(--bone);
  border-block: 1px solid var(--ink);
}
.subnav__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-block: 0.9rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 560, "wdth" 100;
}
.subnav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.subnav a:hover { color: var(--red-deep); border-bottom-color: var(--red); }

/* --- generic trust section --- */
.trustSec { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.trustSec__head h2 { margin-bottom: 1.25rem; }
.trustSec__head p { max-width: 56ch; }
.trustSec__note { font-size: 0.875rem; margin-bottom: 1.25rem; max-width: 60ch; }
.seamed.trustSec {
  grid-template-columns: var(--seam) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.seamed.trustSec .marker { grid-column: 1 / -1; }
@media (max-width: 900px) { .seamed.trustSec { grid-template-columns: minmax(0, 1fr); } }

.trustSplit {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.trustSplit__body p { font-size: 0.9375rem; margin-bottom: 1em; }
.trustSplit strong { font-variation-settings: "wght" 640, "wdth" 100; }
@media (max-width: 900px) { .trustSplit { grid-template-columns: minmax(0, 1fr); } }

/* --- definition list, used for "what we hold" --- */
.deflist { margin: 0; display: grid; }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.deflist dt { font-variation-settings: "wght" 640, "wdth" 98; letter-spacing: -0.01em; }
.deflist dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.deflist dd.is-caveat { color: var(--ink); }
@media (max-width: 760px) {
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* --- the empty subprocessor table: the page's whole argument --- */
.subp { border-top: 1px solid var(--ink); }
.subp__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 560, "wdth" 100;
  color: var(--ink-3);
}
.subp__empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0;
  max-width: none;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
/* Absence drawn as deliberately as presence. */
.subp__zero {
  font-size: clamp(7rem, 23vw, 21rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  font-variation-settings: "wght" 800, "wdth" 88;
  color: var(--red);
}
.subp__empty > span:last-child { font-size: 0.9375rem; color: var(--ink-2); max-width: 62ch; }

.subp__note { margin-top: clamp(2rem, 4vw, 3rem); max-width: 74ch; }
.subp__note h3 { margin: 2rem 0 0.8rem; }
.subp__note h3:first-child { margin-top: 0; }
.subp__note p { font-size: 0.9375rem; }
@media (max-width: 700px) {
  .subp__head { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .subp__empty { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* --- status list --- */
.statuslist { list-style: none; margin: 0; padding: 0; }
.statuslist li {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid #2a2823;
}
.statuslist__name { font-variation-settings: "wght" 620, "wdth" 98; }
.statuslist__note { color: #a09a90; font-size: 0.875rem; }
.chipst {
  justify-self: end;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variation-settings: "wght" 600, "wdth" 100;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chipst.is-live { color: #7fd39b; }
.chipst.is-planned { color: #a09a90; }
.chipst .todo {
  font-style: normal;
  color: var(--red-on-ink);
  margin-left: 0.4rem;
  letter-spacing: 0.1em;
}
.statuslist__foot { margin-top: 1.75rem; font-size: 0.875rem; max-width: 62ch; }
@media (max-width: 820px) {
  .statuslist li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; }
  .statuslist__note { grid-column: 1 / -1; }
}

/* --- documents --- */
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.doclist h3 { margin-bottom: 0.6rem; }
.doclist p { font-size: 0.9375rem; }
.doclist a { color: var(--ink); text-underline-offset: 3px; }
.doclist__cta { margin-top: 2rem; }

/* --- questionnaire --- */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-variation-settings: "wght" 620, "wdth" 98;
  letter-spacing: -0.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--ink);
}
.qa summary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: calc(50% - 6px);
  width: 1px;
  height: 13px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.qa details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.qa summary:hover { color: var(--red-deep); }
.qa details > p {
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 74ch;
}

/* --- placeholders the author must complete --- */
.callout {
  border: 1px solid var(--red);
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: #fdf3f3;
}
.callout__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 620, "wdth" 100;
  color: var(--red-deep);
  margin-bottom: 0.6rem;
}
.callout p:last-child { margin-bottom: 0; font-size: 0.9375rem; }
.todo-inline { color: var(--red-deep) !important; }

/* --- end-of-page hand-off row --- */
.nextrow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.nextrow h2 { margin: 0.5rem 0 1rem; max-width: 14ch; }
.nextrow p { font-size: 0.9375rem; margin-bottom: 1.75rem; }
.nextrow .btn { justify-self: start; }
.nextrow__aside { padding-bottom: 0.5rem; }
.nextrow__aside p { max-width: 34ch; margin-bottom: 1rem; }
@media (max-width: 860px) { .nextrow { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* =============================================================== tiers === */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.tier {
  padding: 2.25rem 2.25rem 2.25rem 0;
  margin-right: 2.25rem;
  border-top: 1px solid #2a2823;
  display: flex;
  flex-direction: column;
}
.tier:last-child { margin-right: 0; padding-right: 0; }
.tier__n {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--red-on-ink);
  font-variation-settings: "wght" 600, "wdth" 100;
  margin: 0 0 1rem;
}
.tier h2 { margin-bottom: 0.9rem; font-size: var(--h3); line-height: 1.06; letter-spacing: -0.022em; font-variation-settings: "wght" 640, "wdth" 98; }
.tier__line { font-size: 0.9375rem; color: #a09a90; margin-bottom: 1.5rem; }
.ticks--ink li { color: var(--bone); }
.ticks--ink li::before { background: var(--bone); }
@media (max-width: 900px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier { margin-right: 0; padding-right: 0; }
}

/* --- tiers page additions --- */
.factrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier__for {
  margin: auto 0 0;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: #a09a90;
  border-top: 1px solid #2a2823;
}
.matrix__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.matrix th, .matrix td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.matrix thead th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variation-settings: "wght" 600, "wdth" 100;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
}
.matrix tbody th { font-variation-settings: "wght" 460, "wdth" 100; color: var(--ink); }
.matrix .matrix__group {
  padding-top: 2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-variation-settings: "wght" 600, "wdth" 100;
  border-bottom: 1px solid var(--rule-soft);
}
.matrix td { color: var(--ink-2); font-size: 0.875rem; }
.matrix td.y { color: var(--ink); font-size: 0.75rem; }
.matrix td.num { color: var(--ink); }
.matrix__foot { margin-top: 1.5rem; font-size: 0.875rem; }
.matrix__foot a { color: var(--ink); text-underline-offset: 3px; }

.how__steps--stack { grid-template-columns: minmax(0, 1fr); }
.how__steps--stack li { padding-right: 0; }
.how__steps--stack h3 { max-width: 24ch; }
@media (max-width: 760px) { .factrow--3 { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================== the add-in, running ===
   Excel's frame is simulated so the demo is read as the product rather than as
   a web page about it. Everything inside the grid and the task pane is the
   product's own extraction code. Host-UI greys deliberately stay out of the
   brand palette; red remains the snip rectangle's colour alone. */

.app {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,11,11,.06), 0 28px 50px -28px rgba(11,11,11,.3);
  font-size: 0.9375rem;
}

.app__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  background: #f2f1ee; border-bottom: 1px solid #e2e0da;
}
.app__dots { display: flex; gap: 0.35rem; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d5d2cc; }
.app__fileName { font-size: 0.8125rem; color: #3d3a35; font-variation-settings: "wght" 560; }
.app__save {
  margin-left: auto; font-size: 0.6875rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: #767369;
}

.app__tabs {
  display: flex; gap: 0.15rem; padding: 0 0.6rem;
  background: #f7f6f3; border-bottom: 1px solid #e2e0da;
  font-size: 0.8125rem; color: #5d5a53; overflow-x: auto; scrollbar-width: none;
}
.app__tabs::-webkit-scrollbar { display: none; }
.app__tabs span {
  padding: 0.5rem 0.75rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.app__tabs .is-on {
  color: var(--ink); background: #fff;
  border-bottom-color: var(--red);
  font-variation-settings: "wght" 640;
}

.app__ribbon {
  display: flex; align-items: stretch; gap: 0;
  padding: 0.55rem 0.4rem 0.3rem;
  background: #fff; border-bottom: 1px solid #e2e0da;
  overflow-x: auto; scrollbar-width: none;
}
.app__ribbon::-webkit-scrollbar { display: none; }
.rgroup {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0 0.85rem; border-right: 1px solid #ebe9e4;
}
.rgroup--end { border-right: 0; margin-left: auto; }
.rgroup__row { display: flex; gap: 0.4rem; }
.rgroup__cap {
  margin: 0; text-align: center; font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8b877e;
}
.app__ribbon .tool { white-space: nowrap; }

.app__formula {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  background: #fff; border-bottom: 1px solid #e2e0da;
  font-size: 0.8125rem;
}
.app__name {
  min-width: 10ch; padding: 0.25rem 0.5rem;
  border: 1px solid #dcdad5; border-radius: 3px;
  font-variant-numeric: tabular-nums; color: #3d3a35;
}
.app__fx { color: #8b877e; font-style: italic; padding: 0 0.1rem; }
.app__value {
  flex: 1; min-width: 0; padding: 0.25rem 0.55rem;
  border: 1px solid #ebe9e4; border-radius: 3px;
  font-variant-numeric: tabular-nums; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app__body { display: grid; grid-template-columns: 1fr 44%; min-height: 0; }
.app__gridwrap { overflow: auto; background: #fff; padding: 0.75rem; min-width: 0; }
.app__body > * { height: clamp(380px, 46vh, 560px); }

.app__pane {
  display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid #e2e0da; background: #faf9f7;
}
.app__panehead {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid #e8e6e1; background: #fff;
  font-size: 0.8125rem;
}
.app__panehead svg { width: 16px; height: 16px; flex: none; }
.app__panehead b { font-variation-settings: "wght" 660; letter-spacing: 0.02em; }
.app__paneDoc { margin-left: auto; color: #767369; font-size: 0.75rem; }
.app__panescroll { flex: 1; overflow: auto; padding: 0.6rem; scroll-behavior: smooth; }
.app__panefoot {
  margin: 0; padding: 0.45rem 0.75rem; border-top: 1px solid #e8e6e1;
  background: #fff; font-size: 0.6875rem; color: #767369;
}

.app__sheets {
  display: flex; gap: 0.3rem; padding: 0.3rem 0.6rem;
  background: #f7f6f3; border-top: 1px solid #e2e0da; font-size: 0.75rem;
}
.app__sheets span { padding: 0.25rem 0.7rem; border-radius: 3px 3px 0 0; color: #5d5a53; }
.app__sheets .is-on { background: #fff; color: var(--ink); font-variation-settings: "wght" 620; }
.app__ghosttab { color: #a8a49a !important; font-style: italic; }

.app__status {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.45rem 0.85rem;
  background: #f2f1ee; border-top: 1px solid #e2e0da;
}
.app__status .statusline { margin: 0; font-size: 0.8125rem; }
.app__ready {
  margin-left: auto; font-size: 0.6875rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: #8b877e;
}

/* ------------------------------------------------- walkthrough overlays --- */
.ghost {
  position: fixed; z-index: 60; width: 22px; height: 22px;
  margin: -3px 0 0 -3px; pointer-events: none;
  transition: transform 0.6s var(--ease);
}
.ghost::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 0 72%, 26% 56%, 44% 94%, 62% 85%, 44% 48%, 72% 44%);
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
}
.ghost.is-down::after {
  content: ""; position: absolute; left: -9px; top: -9px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--red); opacity: 0.55;
}

.coach {
  position: fixed; z-index: 61; max-width: 30ch;
  padding: 0.6rem 0.8rem;
  background: var(--ink); color: var(--bone);
  border-radius: 6px; font-size: 0.8125rem; line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 10px 26px -12px rgba(11,11,11,.6);
  transition: opacity 0.3s var(--ease);
}
.coach b { color: #fff; font-variation-settings: "wght" 680; }

.app.is-touring .sheet--live td.is-target { cursor: default; }
.app.is-touring .docstage { cursor: default; }

/* -------------------------------------------------------- walkthrough UI --- */
.tour { margin-bottom: 1.25rem; }
.tour__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tour__play {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.1rem; border: 0; border-radius: 4px;
  background: var(--red); color: #fff; cursor: pointer;
  font: inherit; font-size: var(--step);
  font-variation-settings: "wght" 620;
  transition: background 0.2s var(--ease);
}
.tour__play:hover { background: var(--red-deep); }
.tour__icon {
  width: 0; height: 0; flex: none;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.tour__play.is-playing .tour__icon {
  width: 9px; height: 11px; border: 0;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.tour__track {
  flex: 1; min-width: 140px; height: 3px;
  background: var(--rule-soft); border-radius: 2px; overflow: hidden;
}
.tour__track span {
  display: block; height: 100%; width: 0;
  background: var(--ink); transition: width 0.4s linear;
}
.tour__now { margin: 0; flex-basis: 100%; color: var(--ink-3); font-size: 0.875rem; }

.tour__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none;
  counter-reset: tstep;
}
.tour__steps li { margin: 0; }
.tour__steps button {
  width: 100%; height: 100%; text-align: left; cursor: pointer;
  padding: 0.6rem 0.7rem; border: 1px solid var(--rule-soft); border-radius: 4px;
  background: transparent; color: var(--ink-3); font: inherit; font-size: 0.8125rem;
  line-height: 1.35; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tour__steps button:hover { border-color: var(--ink-3); color: var(--ink); }
.tour__steps .is-on button {
  border-color: var(--ink); background: #fff; color: var(--ink);
  font-variation-settings: "wght" 600;
}
.tour__steps .is-done button { color: var(--ink-2); }
.tour__n {
  display: block; font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8b877e; margin-bottom: 0.2rem;
}

@media (max-width: 900px) {
  .app__body { grid-template-columns: 1fr; }
  .app__body > * { height: auto; }
  .app__pane { border-left: 0; border-top: 1px solid #e2e0da; }
  .app__panescroll { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost { transition: none; }
  .app__panescroll { scroll-behavior: auto; }
}

/* ------------------------------------------- the working paper, three bands ---
   Client schedule, what the contract says, and the comparison. The bands are
   tinted only enough to be read as three blocks; the snip colours have to stay
   the loudest thing on the sheet. */
.sheet--live table { min-width: 0; table-layout: fixed; }
.sheet--live td, .sheet--live th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet--live td:first-of-type { width: auto; }
.sheet--live .is-gap { background: #f4f3f0; border-top: 0; border-bottom: 0; }
.sheet--live thead th.is-gap { color: transparent; }
.sheet--live .band-snip { background: #fcfcfb; }
.sheet--live .band-check { background: #faf9f7; }
.sheet--live .is-band {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); font-variation-settings: "wght" 640;
  border-bottom: 1.5px solid var(--ink);
}
.sheet--live .is-band.band-snip { color: var(--red-deep); border-bottom-color: var(--red); }
.sheet--live .is-ref { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sheet--live .is-judge { font-variation-settings: "wght" 700; text-align: center; }
.sheet--live .is-check { font-variation-settings: "wght" 700; }
.sheet--live td.is-target:not(.is-active):hover { outline: 1px solid var(--rule); }

/* ------------------------------------------------- documents in the pane --- */
.doclist {
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin;
  padding: 0.4rem 0.5rem; background: #fff; border-bottom: 1px solid #e8e6e1;
}
.doclist__item {
  display: flex; align-items: baseline; gap: 0.35rem; flex: none;
  padding: 0.3rem 0.5rem; border: 1px solid var(--rule-soft); border-radius: 3px;
  background: #fff; color: var(--ink-3); font: inherit; font-size: 0.6875rem;
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              opacity .3s var(--ease), transform .3s var(--ease);
}
.doclist__item:hover { border-color: var(--ink-3); color: var(--ink); }
.doclist__item.is-on {
  border-color: var(--ink); background: var(--ink); color: var(--bone);
  font-variation-settings: "wght" 600;
}
.doclist__n { font-variant-numeric: tabular-nums; opacity: 0.65; }
.doclist__f { font-variation-settings: "wght" 560; }
/* The import step deals them in one at a time. */
.doclist.is-dealing .doclist__item { opacity: 0; transform: translateY(6px); }
.doclist.is-dealing .doclist__item.is-in { opacity: 1; transform: none; }

/* The sheet is wide now; let it scroll under the frame like a real one. */
.app__gridwrap { overflow: auto; }
.app__body { grid-template-columns: 1fr 40%; }

/* While the tour drives, scrolling must be instant: a pane still easing
   to its target moves the document out from under a synthetic drag. */
.app.is-touring .app__panescroll,
.app.is-touring .app__gridwrap { scroll-behavior: auto; }

/* The working paper is sixteen columns wide, and all three bands have to be
   readable at once or the comparison stops being the point. It is set smaller
   than the rest of the frame for that reason, and still scrolls on a narrow
   screen the way a real one does. */
.app .sheet--live { font-size: 0.75rem; }
.app .sheet--live th, .app .sheet--live td { padding: 0.22rem 0.38rem; }
.app .sheet--live tbody th { width: 30px; font-size: 0.6875rem; }
.app .sheet--live .is-band { font-size: 0.5625rem; letter-spacing: 0.08em; }
.app__body { grid-template-columns: 1fr minmax(240px, 25%); }
.app__gridwrap { padding: 0.5rem; }
.workbench .shell { width: min(1680px, 100% - 2rem); }

/* ------------------------------------------- the prompt bar over the sheet ---
   The agentic layer acts on the workbook, so it sits across the top of it as
   one line, between the formula bar and the grid. Its working-out drops onto
   a strip below and folds away; the add-in column is then paper and nothing
   else. */
.panebody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panebody[hidden] { display: none; }

.cmd { border-bottom: 1px solid var(--rule); background: #f4f3f0; }
.cmd__row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; }
.cmd__badge { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.cmd__badge svg { width: 13px; height: 13px; display: block; border-radius: 2px; }
.cmd__badge b { font-size: 0.75rem; font-variation-settings: "wght" 660; letter-spacing: 0.01em; }
.chat__tag {
  padding: 0.05rem 0.35rem; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.5rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); cursor: help;
}
.chat__fold {
  flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px;
  background: none; color: var(--ink-3); font-size: 0.6875rem; line-height: 1; cursor: pointer;
}
.chat__fold:hover { background: #e9e7e2; color: var(--ink); }

.chat__form { flex: 1; min-width: 0; display: flex; gap: 0.3rem; }
.chat__form input {
  flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; font: inherit; font-size: 0.6875rem; color: var(--ink);
}
.chat__form input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.chat__send {
  flex: none; padding: 0.3rem 0.8rem; border: 0; border-radius: 4px;
  background: var(--ink); color: var(--bone); font: inherit; font-size: 0.6875rem; cursor: pointer;
}
.chat__send:hover { background: #000; }

.cmd__out {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0 0.6rem 0.4rem; border-top: 1px solid #eceae5;
  padding-top: 0.4rem;
}
.cmd.is-folded .cmd__out { display: none; }
.cmd.is-folded .chat__fold { transform: rotate(180deg); }

.chat__picks { flex: none; display: flex; gap: 0.25rem; max-width: 46%; overflow-x: auto; scrollbar-width: none; }
.chat__picks::-webkit-scrollbar { display: none; }
.chat__pick {
  flex: none; padding: 0.2rem 0.5rem; border: 1px solid var(--rule-soft); border-radius: 999px;
  background: #fff; color: var(--ink-2); font: inherit; font-size: 0.625rem; cursor: pointer;
  white-space: nowrap;
}
.chat__pick:hover { border-color: var(--ink-3); color: var(--ink); }

.chat__log {
  flex: 1; min-width: 0; max-height: 52px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}
.chat__log:empty::before {
  content: "Name the fields to pull off these contracts, or pick one of these.";
  color: var(--ink-3); font-size: 0.625rem; padding-top: 0.15rem;
}
.chat__msg {
  max-width: 100%; padding: 0.25rem 0.45rem; border-radius: 5px;
  font-size: 0.625rem; line-height: 1.45; white-space: pre-wrap;
}
.chat__msg--you { background: var(--ink); color: var(--bone); }
.chat__msg--ai { background: #fff; border: 1px solid var(--rule-soft); }
.chat__think { display: inline-flex; gap: 3px; }
.chat__think i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); animation: chatdot 1s infinite; }
.chat__think i:nth-child(2) { animation-delay: .15s; }
.chat__think i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }

/* ------------------------------------------------- before anything is in ---
   The add-in's empty state. An engagement starts with a blank workbook, so
   the demo does too: no chips, no paper, just somewhere to drop the file. */
.panebody.is-empty .doclist,
.panebody.is-empty .app__panescroll,
.panebody.is-empty .app__panefoot { display: none; }
.panebody .dropzone { display: none; }
.panebody.is-empty .dropzone { display: flex; }

.dropzone {
  flex: 1; margin: 0.5rem; padding: 1.2rem;
  flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  border: 1.5px dashed var(--rule); border-radius: 8px; background: #fbfaf8;
  text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.dropzone svg {
  width: 26px; height: 26px; fill: none; stroke: var(--ink-3); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.dropzone b { font-size: 0.75rem; font-variation-settings: "wght" 620; }
.dropzone span { max-width: 22ch; font-size: 0.625rem; line-height: 1.5; color: var(--ink-3); }
.dropzone.is-over, .dropzone:hover {
  border-color: var(--red); background: #fdf5f5;
}
.dropzone.is-over { transform: scale(1.01); }
.dropzone.is-over svg { stroke: var(--red); }

/* --------------------------------------------------- the tour's two props ---
   A file dialog the page cannot really open, and the card that flies out of
   it. Both exist only so the step can show where the contracts come from. */
.opendlg {
  position: absolute; left: 7%; top: 30%; z-index: 18; width: min(290px, 42%);
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 18px 44px rgba(26, 23, 20, 0.22);
  overflow: hidden; animation: dlgIn 0.22s ease-out both;
}
.opendlg[hidden] { display: none; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(-6px) scale(0.985) } }
.opendlg__bar {
  display: flex; align-items: center; gap: 5px;
  padding: 0.4rem 0.6rem; background: #f4f3f0; border-bottom: 1px solid var(--rule);
}
.opendlg__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d6cf; }
.opendlg__bar b {
  margin-left: 0.4rem; font-size: 0.6875rem; font-variation-settings: "wght" 620;
}
.opendlg__path {
  padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.5625rem; letter-spacing: 0.04em; color: var(--ink-3);
}
.opendlg__list { list-style: none; margin: 0; padding: 0.25rem; }
.opendlg__file {
  display: flex; align-items: center; gap: 0.45rem; width: 100%;
  padding: 0.33rem 0.4rem; border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 0.6875rem; color: var(--ink); text-align: left; cursor: pointer;
}
.opendlg__file:hover, .opendlg__file.is-lift { background: #f1f0ec; }
.opendlg__file.is-gone { opacity: 0.3; }
.opendlg__ico {
  flex: none; padding: 1px 3px; border-radius: 2px; background: var(--red); color: #fff;
  font-size: 0.4375rem; letter-spacing: 0.06em; font-variation-settings: "wght" 700;
}
.opendlg__sz { margin-left: auto; font-size: 0.5625rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.filedrag {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 5px;
  background: #fff; box-shadow: 0 8px 20px rgba(26, 23, 20, 0.18);
  font-size: 0.625rem; white-space: nowrap;
  transform-origin: 0 0; margin: 10px 0 0 12px;
}
.filedrag[hidden] { display: none; }
.filedrag__ico {
  padding: 1px 3px; border-radius: 2px; background: var(--red); color: #fff;
  font-size: 0.4375rem; letter-spacing: 0.06em; font-variation-settings: "wght" 700;
}

/* The prompt being typed. The box is the thing to watch, so it is lit while
   the sentence goes in and the caret sits at the end of it. */
.chat__form.is-typing input {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 35, 42, 0.15);
  color: var(--ink);
}
.chat__form.is-typing { animation: promptPulse 1.6s ease-in-out infinite; }
@keyframes promptPulse { 50% { opacity: 0.97 } }

/* The workbook is the point of the page, so it keeps the width and the
   height; the add-in is the narrow column it always is in Excel. */
.app__body > * { height: clamp(540px, 72vh, 820px); }
.app__value.is-formula { font-variation-settings: "wght" 520; color: var(--ink-2); }
/* .panebody sets display:flex, which beats the UA rule for [hidden]. Without
   this the pane shows both of its faces at once. */
.panebody[hidden] { display: none; }