/* ==========================================================================
   Curiosity — the brand system on the web
   --------------------------------------------------------------------------
   design-system/BRAND.md is the source of truth; this file is its website.
   The idea: one pixel leaves the box. Industrial data is a dense, ordered
   grid, and Curiosity is the one element that steps outside it. The rules
   that govern every page:

     1. Monochrome plus at most one Signal. Paper, stone, line, slate, ash
        and ink carry everything; --signal appears at most once per layout,
        and only as the escaped pixel of the mark, the signal pixel of a
        field, a text cursor, the marker on the one step a diagram is about,
        or Sudo's eyes. Never a background, a button, a word of prose, or a
        second element.
     2. Two families. Schibsted Grotesk 400/500 argues and reads (600 is
        the wordmark only); Geist Mono, small and uppercase, names the
        parts, counts and measures. No serif, no italic, no third face.
     3. Structure is a 1px hairline. No shadows, no gradients, no glow, no
        blur, no rounded cards: a card is a cell in a hairline grid.
     4. Radius is 0, except pill buttons and single line inputs.
     5. Tone, not hue. Categories are ink, slate, ash, and stone with a 1px
        ink outline, four at most. Squares, never circles, as data marks.
   ========================================================================== */

/* --- tokens (BRAND.md §2) ------------------------------------------------ */
:root {
  --paper:   #F4F4F2;   /* default light canvas */
  --stone:   #E6E8E8;   /* panels, secondary canvas */
  --line-c:  #DEE0DF;   /* hairlines on paper */
  --ink:     #111418;   /* text on paper, dark canvas */
  --slate:   #2A2F38;   /* secondary text, dashes on paper, hairlines on ink */
  --ash:     #8A9099;   /* dashes on ink, muted text on ink */
  --mute:    #6B7280;   /* muted on paper: marks and large type only */
  /* The brand's --mute is 4.39:1 on paper and 3.93:1 on stone, under the
     4.5:1 floor for body text, so muted *text* uses this: the same gray,
     darkened until it clears 4.6:1 on stone (5.15:1 on paper). Derived, not
     chosen, the way the poster system derived its -ink variants. */
  --mute-ink: #616774;
  --ink-2:   #C5C9CE;   /* secondary text on ink */
  --signal:  #2F6BFF;   /* the one pixel */
  --call-blue: #0029E7; /* the closing call's ground only, from the earlier versions (CLAUDE.md §7.2) */

  /* Names the page modules already use, resolved onto the brand. The old
     accent slots are tones now, never hues, so a module that asks for "the
     red" gets ink and cannot put a second color on the page. */
  --paper-deep: var(--stone);
  --ink-soft:   var(--slate);
  --ink-mute:   var(--ink-2);
  --night:      var(--ink);
  --red:        var(--ink);
  --blue:       var(--slate);
  --yellow:     var(--ash);
  --red-ink:    var(--ink);
  --blue-ink:   var(--slate);
  --yellow-ink: var(--slate);

  --hair:  1px solid var(--line-c);
  --line:  1px solid var(--line-c);
  --frame: 1px solid var(--ink);
  --canvas: var(--paper);              /* the ground an icon knocks out of */

  --gut:   clamp(16px, 4vw, 48px);
  --inset: 0px;                        /* padding inside a framed column */
  --max:   calc(1152px + 2 * var(--gut));   /* the 12 column container */

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-display: var(--sans);
  --f-body:    var(--sans);
  --f-label:   var(--mono);

  /* The small open chevron of a text link — the connector head of the
     diagrams, as a mask so it takes the link's own color. */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* --- reset ---------------------------------------------------------------- */
*, *::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: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 56px;            /* Sudo's rail */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* Signal cannot be spent on a control state, so a focus ring is tone:
   ink on paper, paper on ink (CLAUDE.md §5.8). */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- layout ----------------------------------------------------------------
   A section is a framed column: the wrap carries a hairline down each side,
   and the content sits an inset inside it. Below 900px the frame goes, so a
   figure keeps the full 280px phone column. Section rhythm 56 to 112px. */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 900px) { :root { --inset: clamp(1.25rem, 2.4vw, 2rem); } }
.section { position: relative; border-top: var(--hair); }
.section > .wrap {
  padding: clamp(3.5rem, 8vw, 7rem) calc(var(--gut) + var(--inset));
  background:
    linear-gradient(var(--line-c), var(--line-c)) left var(--gut) top / 1px 100% no-repeat,
    linear-gradient(var(--line-c), var(--line-c)) right var(--gut) top / 1px 100% no-repeat;
}
/* The frame is for paper. The dark surfaces are boxes already, so they
   carry no side rules; the inset stays so their content lines up. */
.section.section--dark > .wrap, .section.sec > .wrap { background: none; }
@media (max-width: 899px) { .section > .wrap { background: none; } }
.section--ruled { border-top: var(--hair); }

/* --- type (BRAND.md §3) ---------------------------------------------------- */
.display {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(2.6rem, 5.4vw, 4.5rem); line-height: 1.02; }   /* display, 72 */
.display--lg { font-size: clamp(2.3rem, 4.4vw, 4rem); }                         /* h1, 64 */
.display--md { font-size: clamp(1.875rem, 3.1vw, 3rem); line-height: 1.06; }    /* h2, 48 */
.display--sm { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -.015em; }

/* A second tone in a headline — never a hue. */
.red, .blue, .yellow { color: var(--mute); }

.label {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0;
}
.label--soft { color: var(--mute-ink); }

/* An eyebrow is a mono label, top left of its section: SECTION / 04. */
.eyebrow { display: block; margin: 0 0 1.5rem; color: var(--mute-ink); }

.lede {
  font-size: clamp(1.125rem, 1.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--slate);
  max-width: 40ch;
  margin: 0;
}
.body { color: var(--slate); margin: 0; font-size: 1rem; max-width: 65ch; }

/* --- buttons (BRAND.md §9) --------------------------------------------------
   Pills. Primary is ink with paper text; secondary is a 1px ink outline. Hover
   shifts one tone; press scales to 0.97. No Signal buttons, ever. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s linear, color .15s linear, border-color .15s linear, transform .1s ease;
}
.btn:hover { background: var(--stone); }
.btn:active { transform: scale(.97); }
.btn .arrow { display: none; }
.btn--sm { padding: .6rem 1.15rem; font-size: .94rem; }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--slate); border-color: var(--slate); }
.btn--paper, .btn--yellow { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover, .btn--yellow:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn--ghost:hover { background: var(--slate); }

/* A text link is a mono label with the open chevron. */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.tlink::after {
  content: ""; width: 6px; height: 10px; background: currentColor;
  -webkit-mask: var(--chev) center / 6px 10px no-repeat; mask: var(--chev) center / 6px 10px no-repeat;
  transition: transform .15s ease;
}
.tlink .arrow { display: none; }
a:hover > .tlink::after, .tlink:hover::after { transform: translateX(3px); }
.tlink:hover { color: var(--slate); }

/* --- icons ------------------------------------------------------------------ */
.px { width: 100%; height: auto; }

/* --- the wordmark (BRAND.md §5) ----------------------------------------------
   Schibsted Grotesk 600, −0.03em, both i's dotless with a square where the
   dot would be: the stem's width, 172 units above the x-height, measured
   from the glyph at 600 (CLAUDE.md §5.3). The line box is 1 so the offsets
   land where they were measured. */
.wm { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.wm__i { position: relative; display: inline-block; }
.wm__i > i { position: absolute; left: .073em; top: .126em; width: .122em; height: .122em; background: currentColor; }
.wm__i--sig > i { background: var(--signal); }

/* ==========================================================================
   Masthead — the brand's website board
   ========================================================================== */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: var(--hair);
}
/* A row of cells: brand, each nav link and each call to action is its own
   cell, split by hairlines, running the full width of the window. */
.masthead__in { display: flex; align-items: stretch; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.masthead .brand { padding: 0 1.25rem 0 var(--gut); border-right: var(--hair); }
.brand__mark { width: 24px; height: 24px; flex: none; }
.brand__name { font-size: 20px; line-height: 1; }
.brand__tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--mute-ink); line-height: 1; }
.brand__dot { font-style: normal; margin: 0 .35em; }

.nav { display: flex; align-items: stretch; }
.nav a {
  display: flex; align-items: center; padding: 0 1.1rem;
  border-right: var(--hair);
  font-size: .94rem; font-weight: 500; text-decoration: none; color: var(--ink);
  transition: background-color .15s linear;
}
.nav a:hover { background: var(--stone); }
.nav a[aria-current="page"] { background: var(--stone); box-shadow: inset 0 -2px 0 var(--ink); }
/* A link with a drop-down is a group (site/layout.js). The brand has no
   drop-downs, so the group lays out as if it were not there and its toggle
   and panel stay hidden; a style that wants them (Blend) turns them on. */
.nav__group { display: contents; }
.nav__more[hidden], .nav__fall[hidden], .mega[hidden] { display: none !important; }

.masthead__cta { display: flex; align-items: stretch; margin-left: auto; }
.btn--cell { border: 0; border-left: var(--hair); border-radius: 0; padding: 0 1.25rem; background: transparent; }
.btn--cell:hover { background: var(--stone); }
.btn--cell:active { transform: none; }
.btn--cell .chev { width: 6px; height: 10px; flex: none; }
.btn--cell.btn--solid { background: var(--ink); color: var(--paper); border-left-color: var(--ink); }
.btn--cell.btn--solid:hover { background: var(--slate); border-left-color: var(--slate); }

.burger {
  display: none; width: 56px; margin-left: auto; border: 0; border-left: var(--hair);
  background: transparent; cursor: pointer; padding: 0; place-items: center;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }

@media (max-width: 1040px) {
  .nav, .masthead__cta { display: none; }
  .burger { display: grid; }
  .masthead__in { flex-wrap: wrap; }
  .masthead .brand { min-height: 56px; border-right: 0; }
  .nav.is-open, .masthead__cta.is-open { flex: 0 0 100%; }
  .nav.is-open { order: 3; display: flex; flex-direction: column; border-top: var(--hair); }
  .nav.is-open a { padding: 1rem var(--gut); border-right: 0; border-bottom: var(--hair); font-size: 1.1rem; }
  .masthead__cta.is-open { order: 4; display: flex; padding: 1rem var(--gut) 1.4rem; gap: 12px; }
  .masthead__cta.is-open .btn--cell { border: 1px solid var(--ink); border-radius: 999px; padding: .6rem 1.15rem; }
  .masthead:has(.nav.is-open) { max-height: 100dvh; overflow-y: auto; }
}

/* ==========================================================================
   The field, live (fig.liveField, js/field.js) — every field on the site.
   It fills its parent, which gives it its size and a position. The static
   drawing gives way only once the canvas has drawn (is-live), and the mouse
   cursor goes only once the pixel is following it (is-follow): no script,
   or reduced motion, and the pointer keeps its cursor. The pixel is the
   one square cursor, so nothing inside a field is clickable on its own.
   ========================================================================== */
.lfield { position: absolute; inset: 0; overflow: hidden; background: var(--paper); --dash: var(--slate); --field-dot: var(--ink); }
.lfield--stone { background: var(--stone); }
.lfield--ink { background: var(--ink); --dash: var(--ash); --field-dot: var(--paper); }
.lfield > svg, .lfield > .field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lfield.is-live > svg { display: none; }
.lfield.is-follow { cursor: none; }

/* ==========================================================================
   Hero — copy beside the field, then the Studio diagram
   ========================================================================== */
.hero { position: relative; overflow: hidden; border-bottom: var(--hair); }
/* Copy and field share one 12 column grid: the copy takes seven, the field
   five, with no rule between them. The field fades out toward the copy and
   bleeds a gutter into it, so the two read as one composition. */
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; min-height: 560px; }
.hero__copy {
  grid-column: 1 / span 7; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 1.75rem;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero__copy .eyebrow { margin: 0; }
.hero__copy .lede { max-width: 32em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__field { grid-column: 8 / span 5; position: relative; margin-left: -24px; }
/* The strip under the hero: what it runs on, in mono, labels muted. */
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding-block: 1.25rem; border-top: var(--hair); }
.hero__meta span { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); }
.hero__meta b { font-weight: 500; color: var(--ink); margin-left: .35em; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .hero__copy { grid-column: 1; padding-bottom: 1.5rem; }
  .hero__field { grid-column: 1; height: 260px; margin-inline: calc(-1 * var(--gut)); }
}

/* The Studio diagram, directly under the hero, with its three steps. */
.hero-build { border-bottom: var(--hair); }
.hero__bottom { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
/* Inside .wrap, so the diagram and its notes share the hero's container
   edges rather than running to the viewport. */
.plate { background: var(--paper); min-width: 0; padding: clamp(1.5rem, 3vw, 3rem) var(--gut) clamp(1.5rem, 3vw, 3rem) 0; }
.plate svg { width: 100%; height: auto; }
/* The Studio diagram is held under its drawn size (800 units), so it sits
   in the plate as a figure rather than filling it. */
.hero-build .plate { display: flex; align-items: center; justify-content: center; }
.hero-build .figure--pair { width: 100%; max-width: 680px; }
.hero__notes {
  border-left: var(--hair);
  padding: 2rem 0 2rem var(--gut);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.plate__note { color: var(--ink); }
.hero__steps { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.hero__steps li {
  display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: var(--hair);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.015em;
}
.hero__steps .label { color: var(--mute-ink); }
/* --------------------------------------------------------------------------
   Ask: the Studio diagram's prompt, as a real form (js/ask.js)
   The bar stands where the drawn one did, over the figure's arrow, at the
   drawn one's inset (40 of 800 units wide, 24 of 360 in the phone drawing).
   Its cursor is the prompt's Signal, one of the diagram's agreed two
   (CLAUDE.md §7.2); the answer node is the other. Every hidden state is
   behind `data-ask`, which the script sets only when motion is allowed:
   with no script, or with reduced motion, the figure stands whole, and
   with one, nothing under the bar shows until the reader presses Enter.
   -------------------------------------------------------------------------- */
.ask { width: 100%; max-width: 680px; --ask-in: 5%; }
.ask .figure--pair { max-width: none; }
.ask__bar { display: flex; align-items: stretch; height: 52px; margin: 0 var(--ask-in); background: #FFFFFF; border: 1px solid var(--ink); }
.ask__bar:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.ask__cursor { flex: none; align-self: center; width: 9px; height: 15px; margin: 0 12px 0 16px; background: var(--signal); }
.ask__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font: 400 16px/1 var(--sans); color: var(--ink); }
.ask__input::placeholder { color: var(--mute-ink); opacity: 1; }
.ask__input:focus { outline: none; }
.ask__send { flex: none; width: 52px; display: grid; place-items: center; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
.ask__send:hover { background: var(--slate); }
.ask__send:focus-visible { outline: 3px solid var(--paper); outline-offset: -7px; }
/* The examples: shipped hidden, since they need the script; they fold
   away when a build starts and come back on Reset. */
.ask__eg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px var(--ask-in) 0; max-height: 160px; overflow: hidden; transition: max-height .35s ease, margin .35s ease, opacity .25s; }
.ask__eg[hidden] { display: none; }
.ask__eg.is-gone { max-height: 0; margin-top: 0; opacity: 0; visibility: hidden; }
.ask__eg button {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); background: #FFFFFF; border: var(--hair); padding: .45rem .65rem; cursor: pointer; text-align: left;
}
.ask__eg button:hover { border-color: var(--ink); }
.ask__eg button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ask__after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line-c); border: var(--hair); margin: 1rem var(--ask-in) 0; }
.ask__after[hidden] { display: none; }
.ask__after > * { background: var(--paper); padding: 1rem 1.1rem; }
.ask__after p { margin: 0; }
.ask__after p + p { margin-top: .4rem; color: var(--slate); font-size: .95rem; line-height: 1.45; }
.ask__acts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
@media (max-width: 719px) {
  .ask { --ask-in: 6.667%; }
}
/* The build. Until Enter nothing under the bar shows; then each step
   fades in on its turn and the lines draw. */
.ask[data-ask] [data-s] { opacity: 0; transition: opacity .35s ease; }
.ask[data-ask] [data-s].on { opacity: 1; }
.ask[data-ask="build"] path[data-s][pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease-in-out, opacity .1s; }
.ask[data-ask="build"] path[data-s][pathLength].on { stroke-dashoffset: 0; }
.ask[data-ask="build"] g[data-s="bars"] rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.ask[data-ask="build"] g[data-s="bars"].on rect { transform: none; }
.ask[data-ask="build"] g[data-s="bars"].on rect:nth-of-type(2) { transition-delay: .08s; }
.ask[data-ask="build"] g[data-s="bars"].on rect:nth-of-type(3) { transition-delay: .16s; }
.ask[data-ask="build"] g[data-s="bars"].on rect:nth-of-type(4) { transition-delay: .24s; }
.ask[data-ask="idle"] .ask__cursor { animation: ask-blink 1.1s steps(1) infinite; }
@keyframes ask-blink { 50% { opacity: 0; } }

@media (max-width: 960px) {
  .hero__bottom { grid-template-columns: minmax(0, 1fr); }
  .hero__notes { border-left: 0; border-top: var(--hair); padding-left: 0; }
  .plate { padding-right: 0; }
}

/* ==========================================================================
   Trust strip — customer logos, one to a cell, in one tone until pointed at
   The files in assets/clients/ are the customers' own artwork, cropped to
   their ink. At rest each is a mask, so it paints in --ash whatever colors
   it was drawn in: the strip stays monochrome and spends no Signal
   (Telefónica's blue is near enough Signal to read as one). The same file
   sits inside the mask as an <img> at opacity 0; the cell under the pointer
   fades it in, so one logo at a time shows its own colors. That is the one
   place the site shows a hue that is not the brand's, and only on request.
   js/trust.js adds .is-marquee and a looping row (below); without it, or
   with reduced motion, this grid is the strip.
   Each logo gets the same area, not the same height: width k·√a and height
   k/√a for aspect a, so a wide wordmark and a compact one weigh the same.
   Sizes are in em so the strip scales from one font-size per breakpoint.
   --ash is 2.9:1 on paper, under the floor for text, and chosen anyway: a
   logo is exempt from contrast minimums (WCAG 1.4.3), and each carries its
   name as an accessible label.
   ========================================================================== */
.trust { border-bottom: var(--hair); }
.trust__in { display: flex; align-items: stretch; }
.trust__lead {
  flex: none; margin: 0; padding: 1.6rem 1.5rem 1.6rem 0; display: flex; align-items: center;
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute-ink);
  border-right: var(--hair); max-width: 16rem;
}
.trust__logos {
  flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-c);
  font-size: clamp(.8rem, 1.05vw, 1rem);
}
.trust__cell {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  padding: 1.6rem .75rem; background: var(--paper);
}
.trust__logo {
  display: block; flex: none; position: relative; max-width: 100%; background-color: var(--ash);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.trust__color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .3s ease;
}
.trust__cell.is-on .trust__color { opacity: 1; }
@media (hover: hover) { .trust:not(.is-marquee) .trust__cell:hover .trust__color { opacity: 1; } }
@media (forced-colors: active) {
  .trust__logo { forced-color-adjust: none; background-color: CanvasText; }
  .trust__color { display: none; }
}
@media (max-width: 1100px) { .trust__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .95rem; } }
@media (max-width: 760px) {
  .trust__in { flex-direction: column; }
  .trust__lead { border-right: 0; border-bottom: var(--hair); max-width: none; padding: 1rem 0; }
  .trust__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: .85rem; }
  .trust__cell { padding: 1.2rem .5rem; }
}
@media (max-width: 520px) { .trust__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .9rem; } }
/* The looping row. js/trust.js wraps the list in a viewport and a track,
   clones it (aria-hidden) until the row outruns the viewport, and moves the
   track. Cells are a fixed width so one set is one measured loop. */
.trust.is-marquee .trust__view { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.trust.is-marquee .trust__track { display: flex; width: max-content; will-change: transform; }
.trust.is-marquee .trust__logos { display: flex; flex: none; gap: 0; background: none; font-size: 1rem; }
.trust.is-marquee .trust__cell { flex: none; width: 15rem; padding: 2.75rem 1.25rem; border-right: var(--hair); }
.trust.is-marquee .trust__logos { font-size: 1.3rem; }
@media (max-width: 760px) {
  .trust.is-marquee .trust__logos { font-size: 1.05rem; }
  .trust.is-marquee .trust__cell { width: 12rem; padding: 2rem 1rem; }
}
.trust__logo--airbus       { --logo: url(../assets/clients/airbus.svg); width: 8.37em; height: 1.55em; }
.trust__logo--siemens      { --logo: url(../assets/clients/siemens.png); width: 8.95em; height: 1.45em; }
.trust__logo--allianz      { --logo: url(../assets/clients/allianz.svg); width: 7.23em; height: 1.79em; }
.trust__logo--telefonica   { --logo: url(../assets/clients/telefonica.svg); width: 7.35em; height: 1.76em; }
.trust__logo--karl-storz   { --logo: url(../assets/clients/karl-storz.svg); width: 6.17em; height: 2.10em; }
.trust__logo--primetals    { --logo: url(../assets/clients/primetals.svg); width: 7.15em; height: 1.81em; }
.trust__logo--mirion       { --logo: url(../assets/clients/mirion.svg); width: 8.34em; height: 1.55em; }
.trust__logo--skywise      { --logo: url(../assets/clients/skywise.svg); width: 7.19em; height: 1.80em; }
.trust__logo--wayra        { --logo: url(../assets/clients/wayra.svg); width: 5.98em; height: 2.17em; }
.trust__logo--guud         { --logo: url(../assets/clients/guud.png); width: 6.11em; height: 2.12em; }
.trust__logo--activeengine { --logo: url(../assets/clients/activeengine.png); width: 9.10em; height: 1.42em; }
.trust__logo--step-pharma  { --logo: url(../assets/clients/step-pharma.png); width: 6.78em; height: 1.91em; }

/* ==========================================================================
   Grids of cells. A card is a cell in a 1px grid, not a floating box.
   ========================================================================== */
.problem__head { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.problem__head p.body { max-width: 56ch; margin-top: 1.4rem; font-size: 1.05rem; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--hair); }
.case { position: relative; padding: 1.6rem 1.6rem 1.8rem; min-height: 20rem; display: flex; flex-direction: column; border-right: var(--hair); }
.case:last-child { border-right: 0; }
.case .case__no { color: var(--mute-ink); }
.case__glyph { display: block; width: 32px; margin: 1.4rem 0 0; color: var(--ink); }
/* A pixel scene: three 4 by 4 tiles read left to right, captioned in mono
   under each tile. The caption grid repeats the scene's 96/24 unit rhythm. */
.case__px { width: 100%; max-width: 8.5rem; margin: 1.8rem 0 0; }
.case__px .pxs { display: block; width: 100%; height: auto; }
.case__px .label { margin: .75rem 0 0; color: var(--mute-ink); font-size: .69rem; }
.case h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; margin: auto 0 .5rem; padding-top: 3rem; }
.case p { margin: 0; color: var(--slate); font-size: .98rem; }
@media (max-width: 820px) {
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .case { border-right: 0; border-bottom: var(--hair); min-height: 15rem; }
  .case:last-child { border-bottom: 0; }
}

/* --- stats: numbers are Geist Mono, tabular, in ink ------------------------- */
.stats__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--hair); }
.stat { padding: 1.4rem 1.3rem 1.5rem; border-right: var(--hair); display: flex; flex-direction: column; justify-content: space-between; min-height: 12rem; }
.stat:last-child { border-right: 0; }
.stat .stat__n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(2.3rem, 3.8vw, 3.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; margin: 0 0 1.2rem; color: var(--ink); }
.stat__d { font-size: .88rem; color: var(--mute-ink); margin: 0; max-width: 22ch; }
@media (max-width: 860px) { .stats__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: 0; border-bottom: var(--hair); min-height: 0; }
  .stat:last-child { border-bottom: 0; }
}

/* --- flow: a heading row with its button, then three drawings in cells ----- */
.flow__head, .sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.sechead { margin-bottom: clamp(2rem, 4vw, 3rem); }
.flow__head h2 { max-width: 20ch; }
.flow__lede { margin: 1.4rem 0 clamp(2rem, 4vw, 3rem); max-width: 56ch; font-size: 1.05rem; }
.flowsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--hair); }
.flowstep { padding: 1.3rem; border-right: var(--hair); position: relative; min-width: 0; }
.flowstep:last-child { border-right: 0; }
.flowstep svg { width: 100%; height: auto; }
.flowstep h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.015em; margin: .4rem 0 .4rem; }
.flowstep p { margin: 0; font-size: .95rem; color: var(--slate); }
.flowstep .flowstep__k {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mute-ink); margin: 1.2rem 0 0;
}
@media (max-width: 900px) {
  .flowsteps { grid-template-columns: minmax(0, 1fr); }
  .flowstep { border-right: 0; border-bottom: var(--hair); }
  .flowstep:last-child { border-bottom: 0; }
}
.chiprow { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 1.5rem 0 0; padding: 0; border-left: var(--hair); }
.chiprow li {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .45rem .8rem; border: var(--hair); border-left: 0; color: var(--slate);
}

/* --- panels: Studio on the dark canvas, Developers on stone ----------------- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--hair); }
@media (max-width: 880px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel { --pad: clamp(1.5rem, 3vw, 2.6rem); position: relative; overflow: hidden; padding: 0 var(--pad) var(--pad); min-height: 30rem; display: flex; flex-direction: column; }
.panel__texture { margin: 0 calc(-1 * var(--pad)) 2rem; height: 180px; overflow: hidden; border-bottom: var(--hair); }
.panel__texture svg { width: 100%; height: 180px; }
.panel--dark { --canvas: var(--ink); background: var(--ink); color: var(--paper); }
.panel--dark .panel__texture { border-bottom-color: var(--slate); }
.panel--dark .eyebrow, .panel--dark .label--soft { color: var(--ash); }
.panel--dark .body { color: var(--ink-2); }
.panel--dark :focus-visible { outline-color: var(--paper); }
.panel--paper { background: var(--stone); border-left: var(--hair); }
@media (max-width: 880px) { .panel--paper { border-left: 0; border-top: var(--hair); } }
.panel h2 { margin: 0 0 1rem; max-width: 16ch; }
.panel .body { max-width: 38ch; }
.panel__foot { margin-top: auto; padding-top: 2.2rem; }

/* --- solutions and tiles: cells with an icon at the head -------------------- */
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: var(--hair); }
.grid5 > * { border-right: var(--hair); }
.grid5 > *:last-child { border-right: 0; }
@media (max-width: 1100px) { .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid5 > * { border-bottom: var(--hair); } .grid5 > *:nth-child(2n) { border-right: 0; } }
@media (max-width: 620px) { .grid5 { grid-template-columns: minmax(0, 1fr); } .grid5 > * { border-right: 0; } }

.sol, .tile { display: flex; flex-direction: column; padding: 1.5rem 1.4rem; text-decoration: none; transition: background-color .15s linear; min-height: 18rem; }
.sol:hover, a.tile:hover { background: var(--stone); }
.tile__glyph { display: block; width: 28px; height: 28px; margin-bottom: auto; color: var(--ink); }
.tile__glyph svg { width: 28px; height: 28px; }
/* A use case's 4 by 4 pixel glyph sits on the value glyphs' grid, a little larger than a line icon. */
.tile__glyph--px, .tile__glyph--px svg { width: 40px; height: 40px; }
.tile__bar { display: block; width: 12px; height: 12px; margin-bottom: auto; background: var(--ink); }
.sol h3, .tile h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; margin: 3rem 0 .55rem; }
.sol p, .tile p { font-size: .94rem; color: var(--slate); margin: 0 0 1.4rem; }
.sol .tlink, .tile .tlink { margin-top: auto; align-self: flex-start; }

.cardgrid { display: grid; border: var(--hair); }
.cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cardgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cardgrid > * { border-right: var(--hair); }
.cardgrid > *:last-child { border-right: 0; }
@media (min-width: 1001px) {
  .cardgrid--2 > *:nth-child(2n), .cardgrid--3 > *:nth-child(3n), .cardgrid--4 > *:nth-child(4n) { border-right: 0; }
  .cardgrid--2 > *:nth-child(n+3), .cardgrid--3 > *:nth-child(n+4), .cardgrid--4 > *:nth-child(n+5) { border-top: var(--hair); }
}
@media (max-width: 1000px) {
  .cardgrid--3, .cardgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardgrid > * { border-bottom: var(--hair); }
  .cardgrid > *:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) {
  .cardgrid--2, .cardgrid--3, .cardgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .cardgrid > * { border-right: 0; }
  .sol, .tile { min-height: 13rem; }
}

/* --- why: numbered reasons ----------------------------------------------------- */
.why__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 880px) { .why__in { grid-template-columns: minmax(0, 1fr); } }
.reasons { border-top: var(--hair); margin: 0; }
.reason { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: var(--hair); align-items: start; }
.reason .reason__k { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--mute-ink); margin: 0; padding-top: .4rem; }
.reason h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .4rem; }
.reason p { margin: 0; font-size: .96rem; color: var(--slate); }

/* --- industries: five cells, each a small field with its icon ------------------ */
.inds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: var(--hair); }
.ind { padding: 0 0 1.3rem; border-right: var(--hair); text-decoration: none; display: block; overflow: hidden; transition: background-color .15s linear; }
.ind:last-child { border-right: 0; }
.ind:hover { background: var(--stone); }
.ind__fig { position: relative; margin-bottom: 1.1rem; aspect-ratio: 240 / 156; overflow: hidden; border-bottom: var(--hair); }
.ind__icon { position: absolute; pointer-events: none; left: 1.2rem; bottom: 1rem; width: 32px; height: 32px; padding: 6px; background: var(--paper); border: var(--frame); color: var(--ink); }
.ind__icon svg { width: 100%; height: 100%; }
.ind h3 { font-size: 1.12rem; font-weight: 500; letter-spacing: -.015em; margin: 0; padding-inline: 1.2rem; }
@media (max-width: 1100px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind { border-bottom: var(--hair); } .ind:nth-child(2n) { border-right: 0; } }
@media (max-width: 620px) { .inds { grid-template-columns: minmax(0, 1fr); } .ind { border-right: 0; } }

/* ==========================================================================
   Industry pages — all ten /solutions/use-cases/ pages
   --------------------------------------------------------------------------
   The five industries and the five use cases share this template.
   The hero: copy on seven columns, the industry's tile from the landing row
   on five, running the hero's full height (a field under the brand, the
   landing tile under Blend, js/decor.js), and the four sources as a row of
   cells under both. Then the problem with the flow figure on a stone plate,
   the landing page's cases for what changes, and a staircase for practice.
   The tile has no Signal; the figure's outcome is the section's.
   ========================================================================== */
.ihero { border-bottom: var(--hair); }
.ihero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(calc(100svh - 57px - 5.5rem), 700px); }
.ihero__copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(2rem, 3.4vw, 3rem) var(--gut); }
.ihero__copy .display--xl { margin: auto 0 1.6rem; padding-top: 3rem; font-size: clamp(2.6rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.045em; }
.ihero__copy .lede { max-width: 34em; margin: 0 0 1.6rem; }
.ihero__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.ihero__art { position: relative; min-height: 320px; overflow: hidden; border-left: var(--hair); }
.ihero__src { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair); }
.ihero__src li { display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 1.1rem var(--gut) 1.2rem; }
.ihero__src li + li { border-left: var(--hair); }
.ihero__src .label { color: var(--mute-ink); }
.ihero__src b { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .ihero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ihero__art { aspect-ratio: 4 / 3; min-height: 0; border-left: 0; border-top: var(--hair); }
  .ihero__src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihero__src li + li { border-left: 0; }
  .ihero__src li:nth-child(even) { border-left: var(--hair); }
  .ihero__src li:nth-child(n+3) { border-top: var(--hair); }
}

/* The problem: the headline left, the text right, the figure on a plate.
   On a phone the plate loses its side padding, so the portrait figure keeps
   the whole column (NARROW_COL_PX, CLAUDE.md §3.13). */
.isplit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.isplit .display { margin: 0; }
.isplit .body { margin: 0; max-width: 44ch; }
.iplate { margin-top: clamp(2.4rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--stone); }
.iplate svg { display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto; }
.iplate svg > rect:first-of-type { fill: transparent; }
@media (max-width: 880px) { .isplit { grid-template-columns: minmax(0, 1fr); } .iplate { padding: 1.25rem; } }
@media (max-width: 720px) { .iplate { padding-inline: 0; } }

/* What changes: the landing page's cases, a value glyph where it has a play. */
.case__vg { max-width: 6rem; color: var(--ink); }
.case__vg svg { display: block; width: 100%; height: auto; }

/* In practice: three steps, each wider than the last. */
.istairs__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.istairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.istairs li { padding: 1.3rem 1.4rem 1.4rem; background: var(--stone); }
.istairs li:nth-child(1) { width: 64%; background: var(--ink); color: var(--paper); }
.istairs li:nth-child(2) { width: 82%; background: var(--slate); color: var(--paper); }
.istairs .label { display: block; margin-bottom: 1.4rem; color: var(--mute-ink); }
.istairs li:nth-child(-n+2) :is(.label, p) { color: var(--ink-2); }
.istairs h3 { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; }
.istairs p { margin: 0; color: var(--slate); }
@media (max-width: 880px) { .istairs__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .istairs li:nth-child(n) { width: 100%; } }

/* ==========================================================================
   Security — the dark canvas. The pixel window on top: the field is the
   block, the Signal square escapes on its diagonal, and the story sits in
   the next cell beside the block, under that square. The square is the
   band's one Signal (§5.4). Six controls below, 3 by 2, as a 1px grid.
   ========================================================================== */
.sec { --canvas: var(--ink); background: var(--ink); color: var(--paper); border-top: 0; }
.sec .body { color: var(--ink-2); }
.sec .label--soft, .sec .eyebrow { color: var(--ash); }
.sec :focus-visible { outline-color: var(--paper); }
.sec__top { --f: clamp(15rem, 30vw, 22rem); display: grid; grid-template-columns: var(--f) calc(var(--f) / 3) minmax(0, 1fr); }
.sec__px { grid-column: 2; grid-row: 1; aspect-ratio: 1; background: var(--signal); }
.sec__field { grid-column: 1; grid-row: 2; align-self: start; position: relative; aspect-ratio: 1; border: 1px solid var(--slate); overflow: hidden; }
.sec__head { grid-column: 2 / -1; grid-row: 2; align-self: end; min-width: 0; padding: 2rem 0 0 clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; align-items: flex-start; }
.sec__kicker { color: var(--ash); margin-bottom: 1.2rem; }
.sec__head h2 { max-width: 16ch; margin-bottom: 1.1rem; }
.sec__head .body { max-width: 52ch; font-size: 1.08rem; line-height: 1.45; }
.sec__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.sec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--slate); border: 1px solid var(--slate); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sec__item { background: var(--ink); padding: 1.4rem 1.5rem 1.6rem; min-width: 0; }
.sec__item h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 .5rem; }
.sec__item p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) { .sec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1040px) {
  .sec__top { --f: min(16rem, 60vw); }
  .sec__head { grid-column: 1 / -1; grid-row: 3; padding: 2.2rem 0 0; }
}
@media (max-width: 480px) { .sec__grid { grid-template-columns: minmax(0, 1fr); } }

/* --- dark section ------------------------------------------------------------
   Any section can sit on the ink canvas. The landing page alternates light and
   dark so the argument has a rhythm: proof, why and security are ink. Hairlines
   become slate by redefining the shorthands, so every rule inside follows
   without a dark twin of its own. Type is paper, secondary ink-2, muted ash. */
.section--dark {
  --canvas: var(--ink); --hair: 1px solid var(--slate); --line: 1px solid var(--slate);
  background: var(--ink); color: var(--paper); border-top-color: var(--ink);
}
.section--dark .body, .section--dark .reason p, .section--dark .stat__d { color: var(--ink-2); }
.section--dark .eyebrow, .section--dark .label--soft, .section--dark .reason__k { color: var(--ash); }
.section--dark .stat .stat__n { color: var(--paper); }
.section--dark :focus-visible { outline-color: var(--paper); }

/* --- proof: the three numbers, the Airbus quote, then four short notes ------ */
.proof .sechead { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.proof .sechead h2 { margin: 0; }
.proof__stats .stat { min-height: 9.5rem; padding: 1.5rem 1.6rem 1.6rem; }
.proof__stats .stat__d { max-width: 30ch; }
.proof__quote { margin: clamp(2.8rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: end; }
.proof__quote blockquote { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 400; line-height: 1.22; letter-spacing: -.02em; text-wrap: pretty; max-width: 32ch; }
.proof__by { margin: 0; }
.proof__by p { margin: 0 0 .3rem; font-size: .92rem; }
/* The supplied Airbus file, through a mask like the trust strip, so it
   paints in paper rather than its own blue. */
.proof__logo {
  display: block; width: 119px; height: 22px; margin-bottom: 1rem; background: var(--paper);
  -webkit-mask: url(../assets/clients/airbus.svg) left center / contain no-repeat; mask: url(../assets/clients/airbus.svg) left center / contain no-repeat;
}
@media (forced-colors: active) { .proof__logo { forced-color-adjust: none; background-color: CanvasText; } }
.proof__link { display: inline-block; margin-top: .9rem; text-decoration: none; border-bottom: 1px solid var(--ash); padding-bottom: 1px; }
.proof__link:hover { border-bottom-color: var(--paper); }
/* The four notes are an open row, not cells: the numbers above are cells,
   and a second row of boxes would read as more numbers. Each company name
   carries a small ash square, a mark not a Signal. */
.proof__notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.8rem, 5vw, 4rem); }
.proof__note { margin: 0; min-width: 0; }
.proof__noteco { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; color: var(--paper); }
.proof__noteco::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ash); }
.proof__noteco a { text-decoration: none; }
.proof__noteco a:hover { text-decoration: underline; text-underline-offset: 3px; }
.proof__note blockquote { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
@media (max-width: 900px) {
  .proof__quote { grid-template-columns: minmax(0, 1fr); }
  .proof__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) { .proof__notes { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Closing call — the headline and two pills on the deep blue

   At Curiosity's request the call sits on the deeper blue of the Yarn
   Mosaic versions, --call-blue (CLAUDE.md §7.2). The ground is the
   section's one Signal, so nothing inside it is Signal. Type is paper,
   7.72:1 on it; hairlines are paper at 40%, focus rings paper.
   ========================================================================== */
.call { background: var(--call-blue); color: var(--paper); position: relative; }
.call :focus-visible { outline-color: var(--paper); }
.call__in { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: end; }
.call__kicker { color: var(--paper); margin-bottom: 1.4rem; }
.call h2 { max-width: 18ch; }
.call__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-end; }
.call .badges { grid-column: 1 / -1; border-top-color: rgba(244, 244, 242, .4); }
.call .badge + .badge { border-left-color: rgba(244, 244, 242, .4); }
.call .badge span { color: var(--paper); }
@media (max-width: 800px) { .call__in { grid-template-columns: minmax(0, 1fr); } .call__actions { justify-content: flex-start; } }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--ink); }
.badge { padding: 1.1rem 1rem 0 0; }
.badge + .badge { padding-left: 1rem; border-left: var(--hair); }
.badge strong { display: block; font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em; }
.badge span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute-ink); }
@media (max-width: 560px) { .badges { grid-template-columns: minmax(0, 1fr); } .badge + .badge { border-left: 0; padding-left: 0; } }

/* ==========================================================================
   Footer — link cells, the lockup, Sudo, and the mono base line
   ========================================================================== */
.foot { border-top: var(--hair); background: var(--paper); }
.foot__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin-inline: auto; }
.foot__col { padding: 2rem var(--gut) 2.4rem; border-right: var(--hair); }
.foot__col:last-child { border-right: 0; }
@media (max-width: 900px) { .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__col { border-bottom: var(--hair); } .foot__col:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .foot__in { grid-template-columns: minmax(0, 1fr); } .foot__col { border-right: 0; } }
.foot h3 { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); margin: 0 0 1.3rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { font-size: .94rem; text-decoration: none; color: var(--slate); }
.foot__col a:hover { color: var(--ink); }
.foot__mid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  max-width: var(--max); margin-inline: auto;
  padding: 2.4rem var(--gut); border-top: var(--hair);
}
/* The lockup: mark at left on the wordmark's baseline, the tagline under it.
   Mark height is cap height plus ascender; the gap scales with the size. */
.brand--lockup { display: grid; grid-template-columns: auto auto; column-gap: .9rem; row-gap: .7rem; align-items: end; }
.brand--lockup .brand__mark { grid-row: 1; width: 34px; height: 34px; margin-bottom: .1rem; }
.brand--lockup .brand__name { font-size: 2.75rem; color: var(--ink); }
.brand--lockup .brand__tag { grid-column: 2; }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  max-width: var(--max); margin-inline: auto;
  padding: 1.25rem var(--gut) 1.5rem; border-top: var(--hair);
}
.foot__base p { margin: 0; }

/* --- Sudo in the footer ------------------------------------------------------
   Where the rail cat lands when <main> ends: sitting on the footer's hairline
   with his ball, and a thought over his head. The bubble's frame is the
   Escape mark's move at bubble scale: a 2px ink line, its top right corner
   cut out and the cut square one cell out on the diagonal. Three squares on
   a 3px grid step up from his head to it, smallest first, in place of a
   tail. The hidden states hang off [data-armed], which js/sudo.js sets only
   when it is going to play the entrance, so without it he is simply sitting
   here thinking it. */
.foot__sudo { display: grid; justify-items: start; width: 290px; max-width: 100%; }
.foot__say { position: relative; margin: 12px 0 0 54px; }
.foot__bubble {
  --cut: 14px; --fw: 2px;
  --notch: polygon(0 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut)) var(--cut), 100% var(--cut), 100% 100%, 0 100%);
  position: relative; isolation: isolate; max-width: 250px; margin: 0;
  padding: .9rem 1.1rem;
  font-size: .95rem; line-height: 1.35; color: var(--ink); text-align: left;
}
/* The frame is the notched block twice: ink behind, paper 2px in, so the
   line follows the cut. */
.foot__bubble::before, .foot__bubble::after { content: ""; position: absolute; z-index: -1; clip-path: var(--notch); }
.foot__bubble::before { inset: 0; background: var(--ink); }
.foot__bubble::after { inset: var(--fw); background: var(--paper); }
.foot__bubble span { display: block; margin-bottom: .45rem; }
.foot__bubble a {
  font-family: var(--f-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--red-ink); display: inline-flex; align-items: center; gap: .45rem;
}
.foot__bubble a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__bubble a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.foot__bubble .chev { width: 5px; height: 7px; }
/* The escaped square, off the bubble's top right corner. .foot__say is as
   wide as the bubble, so its right edge is the bubble's. */
.foot__esc { position: absolute; right: -12px; top: -12px; width: 12px; height: 12px; background: var(--ink); }
.foot__think { display: block; position: relative; height: 36px; }
.foot__think i { position: absolute; background: var(--ink); }
.foot__think i:nth-child(1) { left: 12px; top: 6px;  width: 9px; height: 9px; }
.foot__think i:nth-child(2) { left: 3px;  top: 21px; width: 6px; height: 6px; }
.foot__think i:nth-child(3) { left: -3px; top: 31px; width: 3px; height: 3px; }
.foot__floor { position: relative; width: 100%; height: 64px; }
.foot__cat { position: absolute; left: 0; bottom: 0; width: 80px; height: 64px; cursor: pointer; }   /* 8px a cell */
.foot__cat svg, .foot__ball svg { display: block; width: 100%; height: 100%; }
.foot__ball { position: absolute; left: 100px; bottom: 0; width: 32px; height: 32px; }
.foot__ball-spin { position: absolute; inset: 0; }

/* The entrance, timed by js/sudo.js: the ball jumps up out of the rail and
   lands on its spot, he jumps after it from where he was standing, and then
   he thinks. The arcs are measured from the rail, so they are scripted; this
   only says what is visible when. */
.foot__sudo[data-armed] .foot__cat,
.foot__sudo[data-armed] .foot__ball,
.foot__sudo[data-armed] .foot__say { visibility: hidden; }
.foot__sudo.is-ball .foot__ball,
.foot__sudo.is-cat .foot__cat { visibility: visible; }
.foot__sudo.is-said .foot__say { visibility: visible; }
.foot__sudo .foot__cat.is-hop { animation: foot-hop .44s cubic-bezier(.3, .6, .4, 1); }
.foot__sudo .foot__ball.is-hop { animation: foot-hop-ball .5s linear .06s; }
@keyframes foot-hop { 50% { transform: translateY(-26px); } }
@keyframes foot-hop-ball { 40% { transform: translateY(-26px); } 70% { transform: translateY(0); } 85% { transform: translateY(-7px); } }
/* The thought rises from his head, a square at a time, and the bubble opens
   from the trail, a cell at a time. Both fill backwards only, so nothing is
   left clipped or hidden once they are done (a reveal deletes itself). */
.foot__sudo.is-said .foot__think i { animation: foot-pop .01s steps(1, end) backwards; }
.foot__sudo.is-said .foot__think i:nth-child(3) { animation-delay: 0s; }
.foot__sudo.is-said .foot__think i:nth-child(2) { animation-delay: .2s; }
.foot__sudo.is-said .foot__think i:nth-child(1) { animation-delay: .4s; }
.foot__sudo.is-said .foot__bubble,
.foot__sudo.is-said .foot__esc { animation: foot-say .24s steps(4, end) .6s backwards; }
.foot__sudo.is-said .foot__esc { animation-name: foot-pop; animation-duration: .01s; animation-delay: .84s; }
@keyframes foot-pop { from { visibility: hidden; } to { visibility: hidden; } }
@keyframes foot-say { from { clip-path: inset(100% 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .foot__sudo .foot__cat, .foot__sudo .foot__ball, .foot__sudo .foot__say,
  .foot__sudo .foot__say * { animation: none !important; }
  .foot__sudo .foot__cat, .foot__sudo .foot__ball, .foot__sudo .foot__say { visibility: visible !important; }
}

/* --- a11y ----------------------------------------------------------------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; font-weight: 500; }
.skip:focus { left: 0; outline-color: var(--signal); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Customer stories index (site/pages/customer-stories.js): the stories as
   a bento of tiles. Monochrome here; Blend spends its blues on them in
   css/styles-blend.css. No Signal of their own: the page band carries it.
   ========================================================================== */
/* The stories as tiles, a bento on stone. The first spans four columns. */
.sbento-sec { background: var(--stone); }
/* Six columns: the featured tile takes four by two, two tiles stack beside
   it, and the last two share the row under them. */
.sbento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sbento > .stile { grid-column: span 2; }
.sbento > .stile:nth-child(n+4) { grid-column: span 3; }
.stile { display: flex; flex-direction: column; min-width: 0; background: var(--paper); text-decoration: none; transition: background-color .15s linear; }
.stile:hover { background: #FFFFFF; }
.sbento > .stile--big { grid-column: span 4; grid-row: span 2; }
.stile--big { background: var(--ink); color: var(--paper); }
.stile--big:hover { background: var(--slate); }
.stile--big :focus-visible, .stile--big:focus-visible { outline-color: var(--ink); }
.stile__fig { position: relative; height: 180px; overflow: hidden; border-bottom: var(--hair); }
.stile--big .stile__fig { height: 280px; border-bottom-color: var(--slate); }
.stile__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.stile--big .stile__body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.stile__co { color: var(--mute-ink); margin-bottom: .7rem; }
.stile--big .stile__co { color: var(--ash); }
.stile h3 { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.stile--big h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 18ch; margin-bottom: 1.4rem; }
.stile blockquote { margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.5; color: var(--slate); }
.stile--big blockquote { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.4; color: var(--ink-2); max-width: 40ch; }
.stile__go {
  margin-top: auto; align-self: flex-start; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: .55rem .95rem;
}
.stile:hover .stile__go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stile--big:hover .stile__go { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (max-width: 1000px) {
  .sbento > .stile, .sbento > .stile:nth-child(n+4) { grid-column: span 3; }
  .sbento > .stile--big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) {
  .sbento { grid-template-columns: minmax(0, 1fr); }
  .sbento > .stile, .sbento > .stile:nth-child(n+4) { grid-column: auto; }
  .stile--big .stile__fig { height: 200px; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */
.phero { position: relative; border-bottom: var(--hair); }
.phero__in { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }
.phero--split .phero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
@media (max-width: 900px) { .phero--split .phero__in { grid-template-columns: minmax(0, 1fr); } }
.phero h1 { margin: 0 0 1.5rem; max-width: 17ch; }
.phero .lede { margin: 0; max-width: 42ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.phero__fig svg { width: 100%; height: auto; }
/* The page band: a field, fading right. Its pixel is the page's Signal
   unless the hero carries a diagram, which then has it instead. */
.phero__band { position: relative; height: 120px; overflow: hidden; border-top: var(--hair); }
@media (max-width: 620px) { .phero__band { height: 80px; } }

/* A section's heading block, and whatever follows it. */
.section .wrap > h2 + :is(.cardgrid, .defs, .chips, .tablewrap, .faq, .reasons, .steps, .plans, .swatches, .brandrow, .grid5, .inds, .figure),
.section .wrap > p.body + :is(.cardgrid, .defs, .chips, .tablewrap, .faq, .reasons, .steps, .plans, .swatches, .brandrow, .grid5, .inds, .figure) { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- alternating feature rows --------------------------------------------- */
.frow__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.frow--flip .frow__copy { order: 2; }
@media (max-width: 900px) { .frow__in { grid-template-columns: minmax(0, 1fr); } .frow--flip .frow__copy { order: 0; } }
.frow__fig svg { width: 100%; height: auto; }

.ticks { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; border-top: var(--hair); }
.ticks li { position: relative; padding: .75rem 0 .75rem 1.5rem; border-bottom: var(--hair); font-size: .95rem; color: var(--slate); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 7px; height: 7px; background: var(--ink); }

/* --- definition rows ------------------------------------------------------ */
.defs { border-top: var(--hair); }
.def { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: var(--hair); }
.def__k { padding-top: .25rem; color: var(--mute-ink); }
.def__v { font-size: .98rem; color: var(--ink); }
.def__v p { margin: 0 0 .5rem; }
.def__v p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .def { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

/* --- plan parts, shared by the pricing cells ------------------------------ */
.plan__name { font-size: 1.45rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .4rem; }
.plan__note { font-size: .92rem; color: var(--slate); margin: 0 0 1.6rem; }
.plan__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: var(--hair); }
.plan__list li { position: relative; padding: .6rem 0 .6rem 1.4rem; border-bottom: var(--hair); font-size: .92rem; color: var(--slate); }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 7px; height: 7px; background: var(--ink); }
.plan__foot { margin-top: auto; }

/* ==========================================================================
   Pricing (site/pages/pricing.js)
   --------------------------------------------------------------------------
   The plans are the first screen, after the Blend Rows hero: the headline,
   the lede and pills, then Developer, Enterprise and the dash field on ink
   as a row of cells, the details under them. Then one feature table,
   grouped by category. The Signal is the field's pixel; the plans spend
   none.
   ========================================================================== */
/* Included is a filled square, not included a hollow one; the words travel
   beside them for assistive technology. */
.pmark { display: inline-block; width: 10px; height: 10px; vertical-align: middle; }
.pmark--yes { background: var(--ink); }
.pmark--no { box-shadow: inset 0 0 0 1px var(--slate); }

/* One table, grouped by category; its head holds under the masthead. */
.ptable__wrap { margin-top: clamp(2rem, 4vw, 3rem); }
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ptable th, .ptable td { text-align: left; font-weight: 400; padding: .75rem 0; border-bottom: var(--hair); vertical-align: middle; }
.ptable tbody th { color: var(--ink); padding-right: 1rem; }
.ptable td { width: 9rem; }
.ptable thead th {
  position: sticky; top: 57px; z-index: 2; background: var(--paper);
  padding: .9rem 0; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink);
}
.ptable .ptable__group th {
  padding: 1.8rem 0 .6rem; color: var(--ink);
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 620px) { .ptable td { width: 5.75rem; } .ptable { font-size: .92rem; } }

/* --- the first screen ------------------------------------------------------ */
.prhero { border-bottom: var(--hair); }
.prhero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.prhero__eyebrow { grid-column: 1 / -1; margin: 0; padding: clamp(2rem, 3.4vw, 3rem) var(--gut) 1.4rem; }
.prhero__h { padding: 0 3rem clamp(2rem, 3.4vw, 3rem) var(--gut); font-size: clamp(3rem, 5.6vw, 6.2rem); line-height: .98; letter-spacing: -.045em; }
.prhero__side { padding: .7rem var(--gut) 2.5rem 0; }
.prhero__side .lede { color: var(--ink); }
.prhero__plans { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--hair); }
.pcell { display: flex; flex-direction: column; padding: 1.8rem var(--gut) 2rem; border-right: var(--hair); }
.pcell__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pcell__top .plan__name { margin: 0; }
.pcell__top .label { color: var(--mute-ink); }
.pcell__price { margin: 0 0 1rem; font: 400 clamp(3.2rem, 5vw, 4.6rem)/1 var(--sans); letter-spacing: -.05em; }
.pcell .plan__note { min-height: 0; }
.pcell--feature { --canvas: var(--slate); background: var(--slate); color: var(--paper); border-right-color: var(--slate); }
.pcell--feature :is(.plan__note, .pcell__top .label), .pcell--feature .plan__list li { color: var(--ink-2); }
.pcell--feature .plan__list, .pcell--feature .plan__list li { border-color: rgba(244, 244, 242, .28); }
.pcell--feature .plan__list li::before { background: var(--paper); }
.pcell--feature .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.pcell--feature :focus-visible { outline-color: var(--paper); }
.prhero__field { position: relative; min-height: 26rem; background: var(--ink); }
.prhero__cap { position: absolute; z-index: 1; right: var(--gut); bottom: 1.2rem; padding: 3px 6px 2px; background: var(--ink); color: var(--ash); }
.prhero__meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--hair); }
.prhero__meta span { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem var(--gut) 1.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); }
.prhero__meta span + span { border-left: var(--hair); }
.prhero__meta b { font: 500 1rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (max-width: 900px) {
  .prhero__in, .prhero__plans { grid-template-columns: minmax(0, 1fr); }
  .prhero__h { padding: 0 var(--gut) 1.5rem; font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  .prhero__side { padding: 0 var(--gut) 2rem; }
  .pcell { border-right: 0; border-bottom: var(--hair); }
  .prhero__field { min-height: 0; aspect-ratio: 4 / 3; }
  .prhero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prhero__meta span + span { border-left: 0; }
  .prhero__meta span:nth-child(even) { border-left: var(--hair); }
  .prhero__meta span:nth-child(n+3) { border-top: var(--hair); }
}

/* ==========================================================================
   Customer stories (site/pages/resources.js)
   --------------------------------------------------------------------------
   Blend's cell hero with the facts beside the field, the story as numbered
   rows, the quote large on ink, the other stories as tiles. The Signal is
   the hero field's pixel; in Blend the headline's second tone is Signal
   beside it, as on pricing. The quote and the tiles spend none.
   ========================================================================== */
/* The supplied logo through a mask, in the text color, sized by font-size
   (the trust strip's per logo classes give --logo and the proportions). */
.slogo {
  display: block; flex: none; max-width: 100%; background-color: currentColor; font-size: 1rem;
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
}
.slogo--type { background: none; -webkit-mask: none; mask: none; width: auto; height: auto; font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.slogo--quote { font-size: .9rem; margin-bottom: 1rem; }
.slogo--quote.slogo--type { font-size: 1.2rem; }
@media (forced-colors: active) { .slogo:not(.slogo--type) { forced-color-adjust: none; background-color: CanvasText; } }

/* The facts, a label over its value, in hairline cells. */
.sbhero__meta { margin: 0; }
.sbhero__meta dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); }
.sbhero__meta dd { margin: .45rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink); }

/* --- the page -------------------------------------------------------------- */
.sbhero { border-bottom: var(--hair); }
.sbhero__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(240px, 40svh); min-height: calc(100svh - 57px); }
.sbhero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 3.4vw, 3rem) var(--gut); }
.sbhero__h { margin: 0; font-size: clamp(3rem, 6.2vw, 6.4rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.sbhero__side { display: flex; flex-direction: column; background: var(--stone); border-left: var(--hair); padding: clamp(1.75rem, 3.4vw, 3rem) var(--gut); }
.sbhero__side .slogo { font-size: 1.25rem; color: var(--ink); margin-bottom: auto; }
.sbhero__side .lede { margin: 2.5rem 0 1.6rem; color: var(--ink); }
.sbhero__field { position: relative; border-top: var(--hair); background: var(--ink); }
.sbhero__meta { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); border-top: var(--hair); border-left: var(--hair); }
.sbhero__meta > div { display: flex; flex-direction: column; justify-content: center; padding: .9rem var(--gut); }
.sbhero__meta > div + div { border-top: var(--hair); }
.sbquote blockquote { margin: 1.5rem 0 0; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; text-wrap: pretty; max-width: 26ch; }
.sbquote__by { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--slate); }
.sbquote__by .slogo { margin: 0; color: var(--paper); font-size: 1rem; }
.sbquote__by p { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }
.stiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stiles .ind__fig { position: relative; height: 180px; margin-bottom: 1.2rem; border-bottom: var(--hair); }
.stiles__logo { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 7px 10px 7px 1.2rem; background: var(--paper); color: var(--ink); pointer-events: none; }
.stiles__logo .slogo { font-size: .7rem; }
.stiles__logo .slogo--type { font-size: 1rem; }
.stiles__k { margin: .5rem 0 0; padding-inline: 1.2rem; color: var(--mute-ink); }
@media (max-width: 1100px) { .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sbhero__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .sbhero__h { font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  .sbhero__side { border-left: 0; border-top: var(--hair); }
  .sbhero__side .lede { margin-top: 1.5rem; }
  .sbhero__field { aspect-ratio: 4 / 3; }
  .sbhero__meta { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
  .sbhero__meta > div + div { border-top: 0; }
  .sbhero__meta > div:nth-child(even) { border-left: var(--hair); }
  .sbhero__meta > div:nth-child(n+3) { border-top: var(--hair); }
}
@media (max-width: 620px) { .stiles { grid-template-columns: minmax(0, 1fr); } }

/* The page's FAQ: the heading beside the questions. */
.pfaq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem; align-items: start; }
@media (max-width: 900px) { .pfaq { grid-template-columns: minmax(0, 1fr); } }

/* --- comparison / spec table ---------------------------------------------- */
.tablewrap { overflow-x: auto; border-top: var(--hair); }
.ctable { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .95rem; }
.ctable th, .ctable td { text-align: left; padding: .95rem 1rem .95rem 0; border-bottom: var(--hair); vertical-align: top; }
.ctable thead th { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); }
.ctable td:first-child, .ctable th:first-child { font-weight: 500; width: 34%; color: var(--ink); }
.ctable td { color: var(--slate); }
.ctable .yes::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--ink); margin-right: .55rem; }
.ctable .no::before { content: ""; display: inline-block; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--ink); margin-right: .55rem; }

/* --- chip grid (integrations, models) — one name to a cell ----------------- */
.chips { display: flex; flex-wrap: wrap; border-top: var(--hair); border-left: var(--hair); }
.chip {
  flex: 1 1 13rem; display: flex; align-items: center; gap: .75rem;
  padding: 1.05rem 1.1rem; border-right: var(--hair); border-bottom: var(--hair);
  font-size: .95rem; font-weight: 500; background: var(--paper);
}
.chip::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--c, var(--ink)); }
.chip:hover { background: var(--stone); }

/* --- contact / form-adjacent layout --------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.steps { border-top: var(--hair); }
.step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.2rem; padding: 1.4rem 0; border-bottom: var(--hair); }
.step .step__k { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--mute-ink); padding-top: .3rem; margin: 0; }
.step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .35rem; }
.step p { margin: 0; font-size: .95rem; color: var(--slate); }

.callout { border: var(--hair); background: var(--stone); padding: clamp(1.5rem, 3vw, 2.2rem); position: relative; }
.callout h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .8rem; padding-right: 1.5rem; }
.callout p { margin: 0; color: var(--slate); font-size: .98rem; }
.callout__sq { position: absolute; right: 1rem; top: 1rem; width: 8px; height: 8px; background: var(--ink); }

/* --- prose (legal, long form) --------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.65rem; font-weight: 500; letter-spacing: -.02em; margin: 2.6rem 0 .9rem; }
.prose h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: var(--slate); }
.prose ul { padding-left: 1.1rem; display: grid; gap: .45rem; }

/* --- FAQ -------------------------------------------------------------------
   Native <details>. The marker is a square that becomes a rule when open. */
.faq { border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem; cursor: pointer;
  padding: 1.3rem 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; background: var(--ink); }
.faq details[open] summary::before { height: 1.5px; margin-top: .72em; }
.faq summary:hover { color: var(--slate); }
.faq__a { padding: 0 0 1.5rem 1.65rem; margin: 0; color: var(--slate); font-size: .98rem; max-width: 64ch; }

/* --- section sub-navigation — cells again ----------------------------------- */
.subnav { display: flex; flex-wrap: wrap; border: var(--hair); }
.subnav a { padding: .85rem 1.1rem; border-right: var(--hair); font-size: .92rem; text-decoration: none; color: var(--slate); }
.subnav a:hover { background: var(--stone); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--stone); color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }

/* --- hubspot form ----------------------------------------------------------
   The embed renders inside HubSpot's iframe; ours is the frame around it, the
   label above and the note below. There is no selector from here that
   reaches the fields, and nothing here pretends otherwise. */
.hsform { background: var(--paper); border: var(--frame); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }
.hsform .eyebrow { margin: 0 0 1.4rem; }
.hsform__mount { min-height: 6rem; }
.hsform__mount iframe { width: 100% !important; border: 0; display: block; }
.hsform__note { margin: 1.2rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--slate); }
.hsform__note a { color: var(--ink); font-weight: 500; }
.hsform__note--failed { border-top: var(--hair); margin-top: 1.4rem; padding-top: 1.1rem; color: var(--ink); font-weight: 500; }

/* --- brand page ------------------------------------------------------------ */
.brandrow { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 5rem); align-items: flex-end; border-top: var(--hair); padding-top: 2.5rem; }
.brandrow__item { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.brandrow__mark { display: block; }
.brandrow__svg { width: 96px; height: 96px; }                            /* 1px a unit */
.brandrow .brand__mark { width: 32px; height: 32px; }
.brandrow__dark { background: var(--ink); color: var(--paper); padding: 1.5rem; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--hair); }
.swatch { padding: 0 0 1.5rem; border-right: var(--hair); border-bottom: var(--hair); }
.swatch:nth-child(3n) { border-right: 0; }
.swatch__chip { display: block; width: 100%; height: 6rem; border-bottom: var(--hair); margin-bottom: 1.1rem; }
.swatch h3, .swatch p { padding-inline: 1.1rem; }
.swatch h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .25rem; }
.swatch .swatch__hex { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--mute-ink); margin: 0 0 .6rem; }
.swatch p { font-size: .88rem; color: var(--slate); margin: 0; }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .swatch:nth-child(3n) { border-right: var(--hair); } .swatch:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .swatches { grid-template-columns: minmax(0, 1fr); } .swatch { border-right: 0 !important; } }
.vgrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair); border-left: var(--hair); }
.vgrow > div { padding: 1.4rem 1.2rem; border-right: var(--hair); border-bottom: var(--hair); }
.vgrow .vg { width: 48px; height: 48px; margin-bottom: 1.2rem; color: var(--ink); }
.vgrow p { margin: .3rem 0 0; font-size: .9rem; color: var(--slate); }
@media (max-width: 800px) { .vgrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- outstanding legal text — loud on purpose ------------------------------
   Loud by weight and frame, not by hue: the brand has no alarm color, and a
   2px ink frame on stone is hard to miss and hard to leave in by accident. */
.pending { border: 2px solid var(--ink); padding: 1.4rem 1.5rem; margin-bottom: 2.5rem; background: var(--stone); }
.pending .label { color: var(--ink); margin-bottom: .6rem; }
.pending p { margin: 0; color: var(--slate); font-size: .95rem; }
.pending__slot { color: var(--mute-ink); }

/* ==========================================================================
   Responsive figures (CLAUDE.md §5.7)
   ========================================================================== */
.figure { position: relative; min-width: 0; }
.figure__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; min-width: 0; }
.phero__fig, .frow__fig { min-width: 0; }
.figure__scroll > svg { width: 100%; height: auto; }
@media (max-width: 719px) {
  .figure__scroll > svg { min-width: var(--fig-floor, 600px); }
  .figure::after {
    content: "Scroll the diagram \2192";
    display: block; margin-top: .7rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mute-ink);
  }
  .figure__scroll { padding-bottom: .35rem; }
}
.figure__narrow { display: none; }
.figure--pair .figure__wide svg, .figure--pair .figure__narrow svg { width: 100%; height: auto; }
@media (max-width: 719px) {
  .figure--pair .figure__wide { display: none; }
  .figure--pair .figure__narrow { display: block; }
  .figure--pair::after { content: none; }
}
:target { scroll-margin-top: 88px; }

/* ==========================================================================
   Studio page — the capability glyphs and the dark figure rows
   --------------------------------------------------------------------------
   The six capability cards are plain cards with a 4 by 4 pixel glyph at
   the head, every filled cell the deep blue (fig.capabilityGlyph), at the
   use case glyphs' 40px. The figure rows on the dark canvas keep their
   drawings on paper.
   ========================================================================== */
.tile__glyph--cap, .tile__glyph--cap svg { width: 40px; height: 40px; }

/* styles-alt.css turns paper to ink inside a dark section, for figures
   drawn on paper; these are drawn on ink already, so paper stays paper. */
[data-alt] .section--dark .frow__fig { --f-paper: var(--paper); --f-stone: var(--stone); }
.section--dark .ticks li { color: var(--ink-2); }
.section--dark .ticks li::before { background: var(--paper); }

/* --- first-load intro ------------------------------------------------------
   js/intro.js: the page's grid laid in ink, square by square, and taken
   away in the same order; the last square to go is the one that escaped.
   Never interactive, once per tab. */
.intro { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.intro__tiles { position: absolute; inset: 0; display: grid; }
.intro__tiles i { display: block; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ==========================================================================
   Scroll reveals — behind has-reveal
   ========================================================================== */
.has-reveal [data-rv] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--rv-i, 0) * 55ms);
}
.has-reveal [data-rv].is-in, .has-reveal.reveal-all [data-rv] { opacity: 1; transform: none; }
.has-reveal [data-rv-bar] { transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.3,1) 90ms; }
.has-reveal [data-rv-bar].is-in, .has-reveal.reveal-all [data-rv-bar] { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-rv], .has-reveal [data-rv-bar] { opacity: 1; transform: none; transition: none; }
}
@media print {
  .has-reveal [data-rv], .has-reveal [data-rv-bar] { opacity: 1; transform: none; }
  .masthead { position: static; }
}

/* ==========================================================================
   Sudo — the house pixel cat (js/sudo.js)
   --------------------------------------------------------------------------
   The blog's rail, on this page's tokens. A 3px track along the foot of the
   window; the part the reader has covered is ink, and he walks its end.
   The rail is fixed and click-through except for the cat himself. The body
   carries 56px of padding so the footer's last line is never under him.
   ========================================================================== */
#sudo-rail {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 40;
  pointer-events: none; font-size: 0; transition: opacity .25s ease;
}
#sudo-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(17, 20, 24, .1); }
#sudo-read { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--signal); display: block; }
/* No ground of his own: over a dark section js/sudo.js sets .is-dark, and
   the cat and the track take their tones for ink. The bar and the ball are
   Signal, which does not change on ink. */
#sudo-rail.is-dark #sudo-track { background: rgba(244, 244, 242, .16); }
#sudo-cat {
  position: absolute; bottom: 3px; left: 0; width: 50px; height: 40px; pointer-events: auto; cursor: pointer;
  transition: transform .18s linear; transform: translateX(0); perspective: 200px; -webkit-tap-highlight-color: transparent;
}
#sudo-canvas { position: absolute; inset: 0; transform-origin: center; transition: transform .3s ease-in-out; }
#sudo-canvas.sudo-left { transform: rotateY(180deg); }
#sudo-yarn { position: absolute; bottom: 3px; left: 0; width: 20px; height: 20px; pointer-events: none; transition: transform .18s linear; }
#sudo-yarn-hop { position: absolute; inset: 0; }
#sudo-yarn.sudo-hop #sudo-yarn-hop { animation: sudo-hop .34s ease-in-out infinite; }
@keyframes sudo-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* The ball rides ahead of him, so turning around means changing sides. It
   leaps over his head rather than sliding through him. After the hop rules,
   so it wins while both classes are on. */
#sudo-yarn.sudo-leap { z-index: 1; transition: transform .26s linear; }
#sudo-yarn.sudo-leap #sudo-yarn-hop { animation: sudo-leap .42s linear; }
@keyframes sudo-leap { 0% { transform: translateY(0); } 10% { transform: translateY(-44px); } 50% { transform: translateY(-52px); } 85% { transform: translateY(-44px); } 100% { transform: translateY(0); } }
#sudo-yarn-canvas { position: absolute; inset: 0; transition: transform .4s ease-out; }
#sudo-yarn-canvas i, #sudo-canvas i { position: absolute; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #sudo-cat, #sudo-canvas, #sudo-yarn, #sudo-yarn-canvas { transition: none; }
  #sudo-yarn.sudo-hop #sudo-yarn-hop, #sudo-yarn.sudo-leap #sudo-yarn-hop { animation: none; }
  #sudo-yarn.sudo-leap { transition: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: 46px; }
  #sudo-rail { height: 46px; }
  #sudo-cat { width: 40px; height: 32px; }
  #sudo-yarn { width: 16px; height: 16px; }
  @keyframes sudo-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @keyframes sudo-leap { 0% { transform: translateY(0); } 10% { transform: translateY(-36px); } 50% { transform: translateY(-42px); } 85% { transform: translateY(-36px); } 100% { transform: translateY(0); } }
}
@media print { #sudo-rail { display: none; } body { padding-bottom: 0; } }

/* ==========================================================================
   Root mode and the sandwich — Sudo's easter eggs (js/root.js)
   --------------------------------------------------------------------------
   Typing "sudo" sets data-root on <html> for a few seconds: the page as a
   faux terminal, ink ground, Geist Mono, every heading a command. The one
   Signal is the cursor on the heading he tapped. Everything js/root.js adds
   carries .root-x, which the blanket rules below leave alone, as they leave
   the rail and the drawings.
   ========================================================================== */
html[data-root], html[data-root] body { background: #111418; }
html[data-root] body :where(*:not(.root-x, .root-x *, #sudo-rail, #sudo-rail *, svg *)) {
  background-color: #111418 !important; background-image: none !important;
  color: #C5C9CE !important; border-color: #2A2F38 !important; border-radius: 0 !important;
  box-shadow: none !important; font-family: var(--mono) !important; letter-spacing: 0 !important;
}
html[data-root] body :where(h1, h2, h3, h4, a, button, strong, b) { color: #F4F4F2 !important; }
html[data-root] body :where(img, canvas, video, .lfield):not(.root-x *) { opacity: .35; }
html[data-root] body :where(.btn, .pill, .button, [class*="btn--"]) { border: 1px solid #F4F4F2 !important; }
html[data-root] .masthead { border-bottom: 1px solid #2A2F38 !important; }

/* The heading keeps its words for assistive technology, out of sight, and
   shows the command in their place. */
.root-h { overflow-wrap: anywhere; }
.root-h > .root-keep {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.root-cmd { display: block; font-family: var(--mono); letter-spacing: -.02em; color: #F4F4F2; }
.root-ps { color: #8A9099; }
.root-arg { display: block; margin-top: .35em; font-size: max(.38em, 13px); line-height: 1.35; letter-spacing: 0; color: #8A9099; }
.root-caret {
  display: inline-block; width: .5em; height: .9em; margin-left: .08em; vertical-align: -.08em;
  background: #2F6BFF; animation: root-blink 1s steps(1, end) infinite;
}
@keyframes root-blink { 50% { visibility: hidden; } }

/* A prompt line across the top; the page steps down to make room for it. */
html[data-root] body { padding-top: 30px; }
html[data-root] .masthead { top: 30px; }
.root-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 90; display: flex; justify-content: space-between; gap: 1rem;
  height: 30px; padding: 0 var(--gut, 16px); overflow: hidden; background: #111418; border-bottom: 1px solid #2A2F38;
  font: 400 .72rem/30px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #C5C9CE;
}

/* The stand-in cat, and what he brings back. Squares stay square. */
.root-actor { position: fixed; z-index: 70; pointer-events: none; }
.root-actor.is-glide { transition: left .25s ease, top .25s ease; }
.root-actor canvas { position: absolute; top: 0; image-rendering: pixelated; }
.root-sandwich { position: fixed; z-index: 69; pointer-events: none; image-rendering: pixelated; }
.root-sandwich.is-dragged { animation: root-drag .24s steps(2, end) infinite; }
@keyframes root-drag { 50% { translate: 0 -2px; } }

/* His thought, the rail bubble's frame in miniature. */
.root-think { position: fixed; z-index: 71; pointer-events: none; }
.root-think__bubble {
  --cut: 10px; --fw: 2px;
  --notch: polygon(0 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut)) var(--cut), 100% var(--cut), 100% 100%, 0 100%);
  position: relative; isolation: isolate; margin: 0; padding: .5rem 1.1rem .55rem .8rem;
  font: 400 .9rem/1.3 var(--sans); color: #111418; white-space: nowrap;
}
.root-think__bubble::before, .root-think__bubble::after { content: ""; position: absolute; z-index: -1; clip-path: var(--notch); }
.root-think__bubble::before { inset: 0; background: #111418; }
.root-think__bubble::after { inset: var(--fw); background: #F4F4F2; }
.root-think__esc { position: absolute; right: -8px; top: -8px; width: 8px; height: 8px; background: #111418; }
.root-think__steps { display: block; position: relative; height: 26px; }
.root-think__steps i { position: absolute; background: #111418; }
.root-think__steps i:nth-child(1) { left: 20px; top: 4px;  width: 7px; height: 7px; }
.root-think__steps i:nth-child(2) { left: 14px; top: 15px; width: 5px; height: 5px; }
.root-think__steps i:nth-child(3) { left: 10px; top: 22px; width: 3px; height: 3px; }
.root-think.is-dark .root-think__bubble::before, .root-think.is-dark .root-think__esc,
.root-think.is-dark .root-think__steps i { background: #F4F4F2; }
.root-think.is-on .root-think__steps i { animation: root-pop .01s steps(1, end) backwards; }
.root-think.is-on .root-think__steps i:nth-child(2) { animation-delay: .08s; }
.root-think.is-on .root-think__steps i:nth-child(1) { animation-delay: .16s; }
.root-think.is-on .root-think__bubble, .root-think.is-on .root-think__esc { animation: root-pop .01s steps(1, end) .24s backwards; }
@keyframes root-pop { from { visibility: hidden; } to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .root-caret, .root-sandwich.is-dragged, .root-think.is-on * { animation: none !important; }
}
@media print { .root-x { display: none; } }

/* ==========================================================================
   Dark pages — a whole page on the dark canvas (page({ theme: 'dark' }))
   --------------------------------------------------------------------------
   The developer pages. BRAND.md §2's dark canvas, applied to the page, the
   masthead and the footer: the tokens swap roles, so every component that
   reads them follows (paper is the ground, ink the type, slate the
   hairline, ash the dashes and the muted type). One tone is derived, not
   specified: --stone, the panel surface on ink, a step between ink and
   slate, as --mute-ink is derived on paper; take it back to design.
   Measured: paper on the ground 16.8:1, ink-2 11.1:1, ash 5.7:1 on ink and
   5.1:1 on the derived stone.

   The brand's own dark surfaces (the proof and why canvas, the security
   band, the Studio panel, the call) are dark already, so they get the brand
   tokens back and render exactly as they do on a paper page. Figures keep
   the hexes they were drawn in: the --f-* remap is pinned to the brand's.
   ========================================================================== */
:root[data-theme="dark"] {
  --paper: #111418; --stone: #1B1F25; --line-c: #2A2F38;
  --ink: #F4F4F2; --slate: #C5C9CE; --ash: #8A9099; --mute: #8A9099; --mute-ink: #8A9099; --ink-2: #2A2F38;
  --f-ink: #111418; --f-slate: #2A2F38; --f-ash: #8A9099; --f-mute: #6B7280; --f-muteink: #616774;
  --f-paper: #F4F4F2; --f-stone: #E6E8E8; --f-line: #DEE0DF; --f-ink2: #C5C9CE; --f-white: #FFFFFF; --f-signal: #2F6BFF;
  --btn-ink: #F4F4F2; --btn-hover: #F4F4F2;
  color-scheme: dark;
}
:root[data-theme="dark"] :is(.sec, .section--dark, .panel--dark, .panel--paper, .call, .pcell--feature) {
  --paper: #F4F4F2; --stone: #E6E8E8; --line-c: #DEE0DF; --ink: #111418; --slate: #2A2F38;
  --ash: #8A9099; --mute: #6B7280; --mute-ink: #616774; --ink-2: #C5C9CE;
  --red: var(--ink); --blue: var(--slate); --yellow: var(--ash); --paper-deep: var(--stone);
  --hair: 1px solid #2A2F38; --line: 1px solid #2A2F38; --frame: 1px solid var(--ink); --canvas: var(--paper);
  --btn-hover: #111418;
}
/* A solid pill fills to paper on hover, so its type turns to ink. */
:root[data-theme="dark"] .btn--solid:hover { color: #111418; }
:root[data-theme="dark"] .masthead .btn--cell.btn--solid:hover { color: #111418; }
/* Fields: dashes in ash, the pixel's resting tone paper. */
:root[data-theme="dark"] .lfield { --dash: var(--ash); --field-dot: var(--ink); }
:root[data-theme="dark"] .lfield--ink { background: #111418; --dash: #8A9099; --field-dot: #F4F4F2; }
:root[data-theme="dark"] .lfield--paper > svg.field > rect:first-child { fill: #111418; }
:root[data-theme="dark"] .lfield--paper > svg.field > g { stroke: #8A9099; }
/* The footer cat takes his tones for ink (js/sudo-sheet.js INK_DARK). His
   bubble and its trail follow the tokens on their own. */
:root[data-theme="dark"] .foot__cat-px [fill="#4A5462"] { fill: #8A9099; }
:root[data-theme="dark"] .foot__cat-px [fill="#1E2430"] { fill: #DEE0DF; }
:root[data-theme="dark"] .foot__cat-px [fill="#12161F"] { fill: #F4F4F2; }
:root[data-theme="dark"] .foot__cat-px [fill="#8A9099"] { fill: #6B7280; }
:root[data-theme="dark"] .foot__cat-px [fill="#2A2F38"] { fill: #8A9099; }
/* The drop-down's veil is the ground's, not paper. */
:root[data-theme="dark"] .mega::after { background: rgba(17, 20, 24, .8); }
:root[data-theme="dark"] .mega a:is(:hover, :focus-visible) .mega__icon { color: #F4F4F2; }
/* Blend's staircase on ink: the first step paper, the second deep blue. */
:root[data-theme="dark"] .hero__steps li:nth-child(2) { color: #F4F4F2; }
:root[data-theme="dark"] .hero__steps li:nth-child(2) .label { color: #C5C9CE; }
:root[data-theme="dark"][data-style="blend"] .istairs li:nth-child(2) h3 { color: #F4F4F2; }
:root[data-theme="dark"][data-style="blend"] .istairs li:nth-child(2) :is(p, .label) { color: #C5C9CE; }

/* ==========================================================================
   Developer overview (site/pages/developers.js), on the dark canvas
   --------------------------------------------------------------------------
   The home page's Blend Rows hero on an interior page (.dvhero), the runtime
   diagram as the home page's plate, the capabilities as full width rows.
   Signal: the hero field's pixel, and the runtime diagram's graph node; the
   capabilities spend none.
   ========================================================================== */
/* --- the hero: eyebrow across, headline left, lede right, details, field --- */
.dvhero { position: relative; overflow: hidden; border-bottom: var(--hair); }
.dvhero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dvhero__eyebrow { grid-column: 1 / -1; margin: 0; padding: clamp(2rem, 3.4vw, 3rem) var(--gut) 1.4rem; }
.dvhero__h { grid-row: 2; padding: 0 3rem clamp(2rem, 3.4vw, 3rem) var(--gut); font-size: clamp(3rem, 5.6vw, 6.2rem); line-height: .98; letter-spacing: -.045em; }
.dvhero__side { grid-row: 2; padding: .7rem var(--gut) 2.5rem 0; }
.dvhero__side .lede { color: var(--ink); max-width: 30em; }
.dvhero__side .phero__actions { margin-top: 1.6rem; }
.dvhero__meta { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--hair); }
.dvhero__meta span { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem var(--gut) 1.2rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-ink); }
.dvhero__meta span + span { border-left: var(--hair); }
.dvhero__meta b { font: 500 1rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.dvhero__field { grid-column: 1 / -1; grid-row: 4; position: relative; height: clamp(240px, 28vw, 400px); border-top: var(--hair); }
.dvhero__field .lfield { --field-drift: 1; }
.dvhero__cap { position: absolute; z-index: 1; right: var(--gut); bottom: 1.2rem; padding: 3px 6px 2px; background: #111418; color: #8A9099; }
@media (max-width: 900px) {
  .dvhero__in { grid-template-columns: minmax(0, 1fr); }
  .dvhero__h { grid-column: 1; grid-row: auto; padding: 0 var(--gut) 1.5rem; font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  .dvhero__side { grid-column: 1; grid-row: auto; padding: 0 var(--gut) 2rem; }
  .dvhero__meta { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dvhero__meta span + span { border-left: 0; border-top: 0; }
  .dvhero__meta span:nth-child(even) { border-left: var(--hair); }
  .dvhero__meta span:nth-child(n+3) { border-top: var(--hair); }
  .dvhero__field { grid-column: 1; grid-row: auto; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* --- the runtime diagram with its steps, as the home page's plate --------- */
.dvbuild { border-bottom: var(--hair); }
.dvbuild .plate { display: flex; align-items: center; justify-content: center; }
.dvbuild .figure--pair { width: 100%; max-width: 640px; }

/* --- capabilities as full width rows --------------------------------------- */
.dvrows { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--ink); }
.dvrow {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.3fr) 9.5rem; column-gap: 2rem; align-items: center;
  padding: 1.4rem 0; border-bottom: var(--hair); text-decoration: none;
}
.dvrow__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--stone); color: var(--ink); transition: background-color .15s linear, color .15s linear; }
.dvrow__icon svg { width: 22px; height: 22px; }
.dvrow__name h3 { margin: 0 0 .3rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.dvrow__name .label { color: var(--mute-ink); font-size: .68rem; }
.dvrow > p { margin: 0; font-size: .96rem; color: var(--slate); }
.dvrow__go {
  justify-self: end; padding: .55rem .95rem; border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .15s linear, color .15s linear;
}
.dvrow:hover .dvrow__icon { background: var(--ink); color: var(--paper); }
.dvrow:hover .dvrow__go { background: var(--ink); color: var(--paper); }
@media (max-width: 820px) {
  .dvrow { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; row-gap: .7rem; align-items: start; }
  .dvrow > p, .dvrow__go { grid-column: 2; }
  .dvrow__go { justify-self: start; }
}

/* --- the two panels on the stone ground ------------------------------------ */
.dvpanels { background: var(--stone); }
.dvpanels > .wrap { background: none; }

/* ==========================================================================
   Trust Center (site/trust.js, site/pages/trust-*.js), on paper
   --------------------------------------------------------------------------
   The developer overview's Blend Rows hero (.dvhero) with the live page's
   four badges as its details, the five pages as a row of cells, the control
   groups as its full width rows, tables of controls and providers, and the
   subprocessors as Blend's staircase. Signal: the hero field's pixel only.
   ========================================================================== */
.tchero--short .dvhero__field { height: clamp(120px, 12vw, 170px); }
@media (max-width: 900px) { .tchero--short .dvhero__field { aspect-ratio: auto; height: 140px; } }

/* --- the pages, as cells ----------------------------------------------------- */
.tcnav { border-bottom: var(--hair); }
.tcnav__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: var(--hair); }
.tcnav__row a {
  display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem 1.1rem;
  border-right: var(--hair); text-decoration: none; color: var(--slate); font-size: .98rem;
  transition: background-color .15s linear, color .15s linear;
}
.tcnav__row .label { color: var(--mute-ink); font-size: .66rem; }
.tcnav__row a:hover { background: var(--stone); color: var(--ink); }
.tcnav__row a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.tcnav__row a[aria-current="page"] .label { color: var(--ink-2); }
@media (max-width: 620px) {
  .tcnav__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcnav__row li { border-bottom: var(--hair); }
  .tcnav__row li:last-child { grid-column: 1 / -1; }
}

/* --- the control groups as rows, and the documents -------------------------- */
.sechead + :is(.dvrows, .tcdocs) { margin-top: 0; }
.tcrow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .96rem; color: var(--slate); }
.tcrow__list li { display: flex; gap: .7rem; align-items: baseline; }
.tcrow__list li::before, .tcdata__cell li::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; transform: translateY(-.15em); }

.tcdocs { border-top: 1px solid var(--ink); }
.tcdoc {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; column-gap: 2rem; align-items: center;
  padding: 1.25rem 0; border-bottom: var(--hair);
}
.tcdoc__n { color: var(--mute-ink); }
.tcdoc h3 { margin: 0 0 .25rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; }
.tcdoc p { margin: 0; font-size: .96rem; color: var(--slate); }
@media (max-width: 620px) {
  .tcdoc { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .9rem; }
  .tcdoc .btn { grid-column: 2; justify-self: start; }
}

/* --- data processed, on the dark canvas ------------------------------------- */
.tcdata__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); border: var(--hair); }
.tcdata__cell { padding: clamp(1.4rem, 3vw, 2.2rem); }
.tcdata__cell + .tcdata__cell { border-left: var(--hair); }
.tcdata__cell h3 { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; color: var(--paper); }
.tcdata__cell .body { margin: 0 0 1.4rem; }
.tcdata__cell ul { list-style: none; margin: 0; padding: 1.2rem 0 0; display: grid; gap: .55rem; border-top: var(--hair); color: var(--paper); }
.tcdata__cell li { display: flex; gap: .7rem; align-items: baseline; }
.tcdata__note { margin: 1.4rem 0 0; max-width: 60ch; }
@media (max-width: 720px) {
  .tcdata__grid { grid-template-columns: minmax(0, 1fr); }
  .tcdata__cell + .tcdata__cell { border-left: 0; border-top: var(--hair); }
}

/* --- the subprocessors as a staircase ---------------------------------------- */
.tcstairs li:nth-child(-n+2) h3 { color: var(--paper); }
.tcstairs li:nth-child(-n+2) p { color: var(--ink-2); }
.tcjumpsec { padding-bottom: 0; }

/* --- the controls and subprocessor pages ------------------------------------- */
.tcjump { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: var(--hair); }
.tcjump li + li { border-left: var(--hair); }
.tcjump a { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); font-weight: 500; }
.tcjump .label { color: var(--mute-ink); font-weight: 400; }
.tcjump a:hover { background: var(--stone); }
@media (max-width: 900px) {
  .tcjump { grid-template-columns: minmax(0, 1fr); }
  .tcjump li + li { border-left: 0; border-top: var(--hair); }
  .tcjump a { flex-direction: row; gap: 1rem; align-items: baseline; }
}
.tcgroup { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tcgroup__head { position: sticky; top: 6rem; }
.tcgroup__head .dvrow__icon { margin-bottom: 1.4rem; }
.tcgroup__head > .label:first-of-type { color: var(--mute-ink); margin: 0 0 .9rem; }
.tcgroup__head h2 { margin: 0 0 .7rem; }
.tcgroup__head .body { margin: 1.2rem 0 0; max-width: 40ch; }
.tctable { border-top: 1px solid var(--ink); }
.tctable__row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1.5rem; align-items: start; padding: 1.2rem 0; border-bottom: var(--hair); }
.tctable__row--sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.tctable__row--head { padding: .7rem 0; }
.tctable__row--head .label { color: var(--mute-ink); }
.tctable__row--head .label:last-child { justify-self: end; }
.tctable__row--sub.tctable__row--head .label:last-child, .tctable__row--head:has(+ .tctable__row--sub) .label:last-child { justify-self: start; }
.tctable h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.tctable__row--sub h3 { margin: 0; }
.tctable p { margin: 0; font-size: .96rem; color: var(--slate); }
.tcstatus { display: inline-flex; align-items: center; gap: .5rem; justify-self: end; color: var(--ink); white-space: nowrap; }
.tcstatus::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.tctable__row--sub .tcstatus { margin-left: .6rem; color: var(--mute-ink); }
.tctable__row--sub .tcstatus::before { background: none; border: 1px solid var(--ink); width: 6px; height: 6px; }
.tctable__row--head:has(+ .tctable__row--sub) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
@media (max-width: 900px) {
  .tcgroup { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .tcgroup__head { position: static; }
}
@media (max-width: 520px) {
  .tctable__row { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .tctable__row .tcstatus { justify-self: start; }
  .tctable__row--head { display: none; }
  .tctable__row--sub .tcstatus { display: flex; margin: .5rem 0 0; }
}
@media (max-width: 820px) { .tcrow__list { grid-column: 2; } }

/* ==========================================================================
   Models — /models/ (site/pages/models.js)
   --------------------------------------------------------------------------
   The Trust Center's group-beside-table, with two region columns: a filled
   square where a model is served, a hollow one where it is not. The
   integrations page uses the Trust Center's parts unchanged.
   Signal: none; the hero field's pixel is the page's.
   ========================================================================== */
.tctable__row.mdrow { grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem 6.5rem; align-items: center; }
.mdrow h3 { margin: 0; }
.mdrow .label[role="columnheader"]:not(:first-child) { justify-self: start; }
.mdregion { justify-self: start; }
.mdjump { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* the integrations directory: nine categories as a 3 by 3 jump grid, and
   rows of system, what it brings in, and the use cases it is tagged with */
.injump { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-c); }
.injump li { background: var(--paper); }
.injump li + li { border-left: 0; }
.tctable__row.inrow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.tctable__row--head.inrow .label:last-child { justify-self: start; }
.inrow h3 { margin: 0; }
.inuse { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.tctable p.inuse a { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-underline-offset: 3px; }
/* the directory's search box: a single line input, so a pill (rule 4). Its
   text cursor is the directory's one Signal (§5.4); the rows spend none. */
/* each directory group's head: its pixel glyph (fig.categoryGlyph), bare,
   in currentColor. Signal on the dark canvas under Blend, where the two
   blues are spent freely (§8); the text color under the brand. */
.incat__glyph { display: block; margin-bottom: 1.6rem; color: var(--ink); line-height: 0; }
.incat__glyph svg { width: 40px; height: 40px; display: block; }
[data-style="blend"] .incat__glyph { color: var(--signal); }
.insearch { margin: 0 0 1.4rem; }
.insearch[hidden], .insearch__none[hidden], .incat[hidden], .inrow[hidden], .insearch__clear[hidden] { display: none; }
.insearch > .label { display: block; margin-bottom: .6rem; color: var(--mute-ink); }
.insearch__box { position: relative; display: flex; align-items: center; }
.insearch__icon { position: absolute; left: 1.2rem; display: flex; color: var(--mute-ink); pointer-events: none; }
.insearch__input { width: 100%; min-width: 0; height: 3.4rem; padding: 0 6rem 0 3.3rem; border: 1px solid var(--mute); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 1.05rem; caret-color: var(--signal); -webkit-appearance: none; appearance: none; }
.insearch__input::placeholder { color: var(--mute-ink); opacity: 1; }
.insearch__input::-webkit-search-cancel-button, .insearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.insearch__input:hover, .insearch__input:focus { border-color: var(--ink); }
.insearch__clear { position: absolute; right: .5rem; height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.insearch__clear:hover { background: var(--stone); }
.insearch__count { margin: .7rem 0 0; }
.injump li.is-empty a { color: var(--mute-ink); pointer-events: none; }
.injump li.is-empty .label { opacity: .6; }
.insearch__none { margin-top: 1.4rem; }
@media (max-width: 900px) {
  .injump { grid-template-columns: minmax(0, 1fr); }
  .injump li + li { border-top: 0; }
  .tctable__row.inrow { grid-template-columns: minmax(0, 1fr); }
  .inuse--none { display: none; }
}
@media (max-width: 900px) { .mdjump { grid-template-columns: minmax(0, 1fr); } }
.mdregion--off { display: inline-flex; align-items: center; gap: .5rem; color: var(--mute-ink); }
.mdregion--off::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--mute-ink); }
@media (max-width: 520px) {
  .tctable__row.mdrow { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem 3.4rem; gap: .6rem; }
  .tctable__row--head.mdrow .label { font-size: .62rem; letter-spacing: .04em; }
  .tctable__row--head.mdrow { display: grid; }
}

/* ==========================================================================
   Conversion pages — /contact/ and /request-demo/ (site/pages/convert.js)
   --------------------------------------------------------------------------
   The first screen as tiles on stone, after the home page's panels and
   industry tiles: the headline, the form, an ink field, email and phone on
   the deep blue, the Airbus quote on slate and the other page. Then the
   agenda as full width rows and a FAQ. Chosen from six options (C).
   Signal: the field tile's pixel; in Blend the headline's second tone too.
   ========================================================================== */

/* --- the first screen as tiles on stone ------------------------------------ */
.cvbento { background: var(--stone); padding-block: clamp(1.25rem, 2.5vw, 2rem); border-bottom: var(--hair); }
.cvbento__grid {
  display: grid; gap: 10px; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "head head head head head head head form form form form form"
    "field field field field reach reach reach form form form form form"
    "quote quote quote quote quote quote quote other other other other other";
}
.cvtile { position: relative; min-width: 0; margin: 0; padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--paper); }
.cvtile .label { margin: 0; }
.cvtile--head { grid-area: head; }
.cvtile--head .display { margin: 1.6rem 0 1.4rem; font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.045em; }
.cvtile--head .lede { margin: 0; max-width: 34em; color: var(--ink); }
.cvtile--form { grid-area: form; }
.cvtile--form .hsform { border: 0; padding: 0; background: none; }
.cvtile--form .hsform .eyebrow { margin: 0 0 1.4rem; }
.cvtile--field { grid-area: field; padding: 0; min-height: 240px; background: var(--ink); overflow: hidden; }
.cvtile--field .lfield { --field-drift: 1; }
.cvtile__cap { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; padding: 3px 6px 2px; background: #111418; color: #8A9099; }
.cvtile--reach { grid-area: reach; background: #0029E7; color: #F4F4F2; display: flex; flex-direction: column; gap: .5rem; }
.cvtile--reach .label { color: #C5C9CE; margin-bottom: auto; padding-bottom: 1.6rem; }
.cvtile--reach p { margin: 0; }
.cvtile--reach a { color: inherit; }
.cvtile--reach :focus-visible { outline-color: #F4F4F2; }
.cvtile__big { font-size: clamp(1.1rem, 1.45vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; overflow-wrap: anywhere; }
.cvtile__addr { margin-top: .8rem !important; font-size: .9rem; color: #C5C9CE; }
.cvtile--quote { grid-area: quote; background: #2A2F38; color: #F4F4F2; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.cvtile--quote blockquote { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; max-width: 34ch; text-wrap: pretty; }
.cvtile--quote figcaption { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cvtile--quote figcaption .proof__logo { margin: 0; }
.cvtile--quote figcaption .label { color: #C5C9CE; }
.cvtile--other { grid-area: other; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; background: var(--paper); }
.cvtile--other .label { color: var(--mute-ink); }
.cvtile__body { margin: 0 0 auto; font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -.015em; max-width: 24ch; }
.cvtile--other .btn { margin-top: 1.4rem; }
.cvrow { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.3fr); }
.cvrow__k { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }
.cvrow:nth-child(1) .cvrow__k { background: var(--ink); color: var(--paper); }
@media (max-width: 1000px) {
  .cvbento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head head" "form form" "field reach" "quote quote" "other other";
  }
}
@media (max-width: 620px) {
  .cvbento__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "reach" "field" "quote" "other"; }
  .cvtile--field { min-height: 0; aspect-ratio: 4 / 3; }
  .cvtile--head .display { font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
}
@media (max-width: 820px) { .cvrow { grid-template-columns: 44px minmax(0, 1fr); } .cvrow > p { grid-column: 2; } }

/* ==========================================================================
   Not found (site/pages/not-found.js, 404.html)
   --------------------------------------------------------------------------
   The headline beside the Escape mark with its escaped square gone, a dashed
   outline where it was and Sudo sitting in the block. Signal: Sudo's ears.
   The rows under it are the developer overview's (.dvrow).
   ========================================================================== */
.nf { border-bottom: var(--hair); }
.nf__in {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.nf__copy .lede { max-width: 44ch; margin-top: 1.4rem; }
.nf__art { display: grid; place-items: center; }
.nf__svg { display: block; width: 100%; max-width: 340px; height: auto; }
@media (max-width: 900px) {
  .nf__in { grid-template-columns: minmax(0, 1fr); }
  .nf__art { order: -1; justify-items: start; }
  .nf__svg { max-width: 200px; }
}
.nf__shell { margin-top: 1.6rem; max-width: 34rem; }
.nf__shell .shell__code { white-space: pre-wrap; overflow-wrap: anywhere; }