/* ==========================================================================
   Quince Software — the site's only stylesheet.

   Every colour is a custom property declared in :root below. No hex literal
   appears anywhere else in this file. The brand yellow is a fill only: it is
   always a solid block with navy or ink text on top of it, never a line,
   never a glyph, never a focus ring. Yellow on white is 1.4:1 and cannot be
   seen. See CLAUDE.md for the full rule.
   ========================================================================== */

:root {
  /* Palette */
  --ink: #1c2536;
  --ink-soft: #5b6678;
  --bg: #ffffff;
  --card: #ffffff;
  --line: #e3e7ee;
  --navy: #131c2e;
  --yellow: #FFD60A;

  /* The yellow's own channels, so every tint derives from one source. */
  --yellow-rgb: 255, 214, 10;

  /* The one wash left: the brand square quietened for the navy footer
     band. Solid yellow carries the top bar alone; the body's accent
     surfaces are blue. */
  --accent-soft-navy: rgba(var(--yellow-rgb), 0.18);

  /* Blue carries the call-to-action button and the banner panel. Its hue is
     220 degrees, the same as the navy, so it reads as the chrome's own
     colour rather than a second brand. White on it is 7.3:1. */
  --blue: #1d4fb8;
  --blue-hover: #17409a;
  /* Hairline between the measurements inside the blue banner. */
  --blue-divider: rgba(255, 255, 255, 0.28);

  /* Secondary text and surfaces on a filled panel, navy or blue, as
     transparencies of the same white the cards use. On the diagram's node
     the soft white is 5.6:1 and the wash carries white at 8.1:1. */
  --on-fill-soft: rgba(255, 255, 255, 0.72);
  --on-fill-wash: rgba(255, 255, 255, 0.06);

  /* The diagram's wires, arrowheads and box edges. They carry meaning, so
     they clear the 3:1 the guidelines ask of a graphical object: 3.0:1
     against the blue field and 3.9:1 against a node. */
  --flow-line: rgba(255, 255, 255, 0.5);

  /* The diagram's field grid, white on the blue panel. */
  --flow-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23ffffff' stroke-opacity='.14'/%3E%3C/svg%3E");

  /* Interaction and chrome steps, all named in the design specification */
  --navy-hover: #1d2a45;
  --surface-hover: #f7f8fa;
  --bar-divider: #34415c;
  --table-head: #f8fafc;

  /* Text on the navy bands. The same white as --card; the palette has no
     other light value, and a navy focus ring is invisible on navy. */
  --on-navy: #ffffff;

  /* Status accents. State only, never decoration. */
  --ok-text: #15803d;
  --ok-bg: #e8f6ee;
  --ok-line: #b7e3c8;
  --bad-text: #b91c1c;
  --bad-bg: #fdecec;
  --bad-line: #f3c1c1;
  --warn-text: #92400e;
  --warn-bg: #fdf1dd;
  --warn-line: #eeddba;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure */
  --container: 1080px;
  --prose: 720px;
  --gutter: 22px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table {
  margin: 0;
}

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

/* -------------------------------------------------------------- Typography */
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.25;
}

h1 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

h2 {
  font-size: 20px;
  font-weight: 650;
}

h3 {
  font-size: 15px;
  font-weight: 600;
}

p {
  max-width: var(--prose);
}

a {
  color: var(--ink);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--navy);
}

strong {
  font-weight: 600;
}

/* Small uppercase section label. */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  font-size: 15px;
  color: var(--ink-soft);
}

.demo-lede {
  margin-top: 12px;
}

h1 + .lead,
h2 + .lead {
  margin-top: 10px;
}

.label + h1,
.label + h2 {
  margin-top: 4px;
}

.caption,
.muted {
  font-size: 12.5px;
  color: var(--ink-soft);
}

code, kbd, samp, pre, .mono {
  font-family: var(--mono);
  font-size: 12.5px;
}

code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

/* ------------------------------------------------------------ Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 8px 16px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  text-decoration: none;
}

.skip:focus {
  left: var(--gutter);
  top: 8px;
  outline: 2px solid var(--on-navy);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Inside the navy bands a navy ring cannot be seen; white is the same
   palette value as the card surface. Never yellow: 1.4:1 on navy it is
   fine, but the rule is one ring colour per band and white is legible. */
.topbar a:focus-visible,
.topbar summary:focus-visible,
.footer a:focus-visible {
  outline-color: var(--on-navy);
}

main:focus {
  outline: none;
}

/* --------------------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main {
  flex: 1 0 auto;
  padding: 28px 0 56px;
}

.section {
  margin-top: 40px;
}

.section:first-child {
  margin-top: 0;
}

.section-head {
  margin-bottom: 16px;
}

.section-head h2 {
  margin-top: 4px;
}

.stack > * + * {
  margin-top: 12px;
}

.prose {
  max-width: var(--prose);
}

.prose > * + * {
  margin-top: 12px;
}

.prose > * + :is(h2, h3) {
  margin-top: 24px;
}

.grid {
  display: grid;
  gap: 16px;
}

/* --------------------------------------------------------------- Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: var(--on-navy);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-navy);
  text-decoration: none;
}

/* Nothing happens on hover. Without this the generic link hover turns the
   text navy, which on a navy band makes the wordmark vanish. */
.brand:hover {
  color: var(--on-navy);
  text-decoration: none;
}

.brand-name {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

/* The first word of the brand carries the weight; the rest is plain. */
.brand-lead {
  font-weight: 650;
}

/* Below 700px the bar cannot hold the section name: it and the brand are
   both nowrap, so flex can only shrink the hairline, and "Authorization"
   then pushes the Menu button past the gutter. The h1 names the section
   anyway. */
.bar-divider {
  display: none;
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--bar-divider);
}

.section-name {
  display: none;
  font-size: 14px;
  color: var(--on-navy);
  white-space: nowrap;
}

.spacer {
  flex: 1 1 auto;
}

/* The mark: a filled yellow square with a navy Georgia initial. This is the
   canonical use of the accent — a block with dark text on top of it — and,
   in the top bar, the only solid yellow on the page. */
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--yellow);
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}

.mark-lg {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 26px;
}

/* The same mark outside the top bar, in the footer band: the transparent
   wash instead of the solid fill, with the band's own white letter. */
.mark-quiet {
  background: var(--accent-soft-navy);
  color: var(--on-navy);
}

/* ------------------------------------------------------------ Navigation */
.nav-wide {
  display: none;
}

/* Wraps because it has to: the footer carries this list at every width, and
   at a 320px viewport four items do not fit on one line. Without the wrap
   the page scrolls sideways, which is a reflow failure rather than a
   cosmetic one. */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  position: relative;
  display: block;
  padding: 4px 0;
  color: var(--on-navy);
  font-size: 14px;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--on-navy);
}

/* The footer navigation keeps a plain underline on hover: yellow belongs to
   the top bar alone. */
.footer .nav-list a:hover {
  text-decoration: underline;
}

/* In the top bar both the current page and the hovered item show the same
   3px yellow block, drawn as a filled bar and not as a border, so the
   accent stays a surface. */
.topbar .nav-list a[aria-current="page"]::after,
.topbar .nav-list a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--yellow);
}

/* Narrow viewports: a disclosure, no JavaScript. */
.nav-narrow > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--bar-divider);
  border-radius: 7px;
  color: var(--on-navy);
  font-size: 14px;
}

.nav-narrow > summary::-webkit-details-marker {
  display: none;
}

.nav-narrow[open] > .nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--navy);
  border-top: 1px solid var(--bar-divider);
  padding: 6px var(--gutter) 14px;
}

.nav-narrow .nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.nav-narrow .nav-list a {
  padding: 9px 0;
}

/* ----------------------------------------------------------------- Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card h3 {
  margin-bottom: 6px;
}

.card-flat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

/* A card marked with the accent at its edge, for a block that has to be
   noticed without becoming a second filled banner. Blue on white is 7.3:1,
   so unlike the yellow the accent can carry a line here. */
.card-marked {
  border-color: var(--blue);
  border-left-width: 5px;
  padding: 22px 22px 22px 20px;
}

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-hover);
  border-color: var(--ink-soft);
  color: var(--ink);
}

.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--on-navy);
}

.btn-primary:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
  color: var(--on-navy);
}

/* One per page, for the single main call to action. Solid blue with white
   text, so the page has one element that pulls. */
.btn-accent {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-navy);
}

.btn-accent:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: var(--on-navy);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
}

/* ------------------------------------------------------- Pills and badges */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12px;
}

.pill-mono {
  font-family: var(--mono);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.label + .pill-row {
  margin-top: 8px;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.badge-bad {
  border-color: var(--bad-line);
  background: var(--bad-bg);
  color: var(--bad-text);
}

.badge-warn {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-text);
}

/* ---------------------------------------------------------------- Tables */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

thead th {
  padding: 9px 14px;
  background: var(--table-head);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

td,
tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

tbody tr:last-child :is(td, th) {
  border-bottom: 0;
}

/* --------------------------------------------------------- Accent blocks */
/* The banner surfaces in the body of the page: solid blue carrying white
   text, echoing the navy chrome rather than introducing a second brand. */
.accent-strip {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--on-navy);
  border-radius: 8px;
  padding: 14px 18px;
}

.stat-panel {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--on-navy);
  border-radius: 8px;
  padding: 20px 18px;
}

.stat-panel .label,
.accent-strip .label {
  color: var(--on-navy);
}

.stat-list {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
}

.stat-list > div {
  padding: 12px 18px;
  text-align: center;
}

.stat-list > * + * {
  border-top: 1px solid var(--blue-divider);
}

.stat-list dt {
  font-size: 20px;
  font-weight: 650;
  font-family: var(--mono);
}

.stat-list dd {
  margin: 4px 0 0;
  font-size: 12.5px;
}

/* Marks a short phrase in running prose: white inside, with the thinnest
   contour the screen can draw, in the darkest value the palette has. Quiet
   enough to sit in a paragraph, definite enough to stop the eye. Navy on
   white here is 16.6:1.

   The padding is in em, not pixels, so the chip keeps its proportions
   wherever it lands: a 12.5px caption, 15px prose, or a 20px heading. The
   margin holds punctuation off the contour, so a comma after the phrase
   sits beside the box rather than against it. */
.marker {
  padding: 0.15em 0.5em;
  margin-right: 0.12em;
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: var(--card);
  color: var(--navy);
  font-weight: 600;
}

/* --------------------------------------------------------------- Figures */
figure {
  margin: 0;
}

.figure-frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- Footer */
.footer {
  margin-top: auto;
  background: var(--navy);
  color: var(--on-navy);
  padding: 26px 0 22px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bar-divider);
}

.footer a,
.footer a:hover {
  color: var(--on-navy);
}

.footer-legal {
  margin-top: 14px;
  font-size: 12.5px;
  max-width: none;
}

.footer-legal + .footer-legal {
  margin-top: 6px;
}

/* -------------------------------------------------------------- Data flow */
/* The diagram is a fixed canvas of absolutely placed nodes and 1px wires on
   a blue field. It is built from HTML rather than an image, so every label
   is real text: selectable, searchable and read by a screen reader. The
   canvas does not reflow, so the frame scrolls sideways on a narrow screen,
   the same way a wide table does. */
.diagram {
  margin: 0;
}

.diagram-frame {
  overflow-x: auto;
  border-radius: 10px;
}

/* The canvas is fixed and wider than a phone, so the frame scrolls
   sideways. A touch device shows no scrollbar to give that away, and the
   usual fade at the edge is a gradient, which the design does not allow.
   So the hint is a sentence, and it goes above the diagram rather than
   below it, where it would arrive too late to help. Hidden at 880px, above
   which the canvas mostly fits and a pointer finds the rest on its own. */
.diagram-hint {
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.diagram-hint::before {
  content: "\2194";
  margin-right: 8px;
}

.diagram-panel {
  min-width: 1004px;
  padding: 22px;
  background: var(--blue);
  border-radius: 10px;
}

.diagram-canvas {
  position: relative;
  width: 960px;
  background-image: var(--flow-grid);
}

/* One height per diagram: the canvas is fixed, so it has to be told. */
.canvas-authz {
  height: 820px;
}

.canvas-integration {
  height: 922px;
}

.diagram-title,
.diagram-note {
  position: absolute;
  top: 0;
  max-width: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
}

.diagram-title {
  left: 0;
  color: var(--on-navy);
  font-weight: 600;
}

.diagram-note {
  right: 0;
  color: var(--on-fill-soft);
}

.diagram-caption {
  max-width: var(--prose);
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---- the boundary around the decision point */
.fbound {
  position: absolute;
  border: 1px dashed var(--flow-line);
  border-radius: 10px;
}

.canvas-authz .fbound {
  left: 250px;
  top: 464px;
  width: 710px;
  height: 190px;
}

.canvas-integration .fbound {
  left: 60px;
  top: 268px;
  width: 840px;
  height: 390px;
}

.fbound-label {
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--on-fill-soft);
}

/* What the boxes inside the boundary actually are, on one line under its
   label. It must stay on one line: the nodes begin just below it. */
.fbound-note {
  position: absolute;
  left: 14px;
  top: 28px;
  font-size: 11px;
  color: var(--on-fill-soft);
  white-space: nowrap;
}

/* ---- nodes: a step darker than the field, so the border does the work */
.fnode {
  position: absolute;
  padding: 12px 14px;
  background: var(--blue-hover);
  border: 1px solid var(--flow-line);
  border-radius: 8px;
}

.fnode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: none;
}

.fnode-name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-navy);
}

.fnode-badge {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid var(--flow-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--on-fill-soft);
}

.fnode-sub {
  max-width: none;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--on-fill-soft);
}

.fnode-line {
  max-width: none;
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--on-fill-wash);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--on-navy);
}

.fnode-prompt {
  color: var(--on-fill-soft);
}

/* The one box a diagram wants to weight: a brighter edge, nothing else. */
.fnode-strong {
  border-color: var(--on-navy);
}

.fn-console { left: 20px;  top: 56px;  width: 280px; height: 152px; }
.fn-git     { left: 400px; top: 56px;  width: 260px; height: 152px; }
.fn-pip     { left: 700px; top: 56px;  width: 260px; height: 152px; }
.fn-opal    { left: 400px; top: 268px; width: 260px; height: 132px; }
.fn-gate    { left: 280px; top: 504px; width: 280px; height: 130px; }
.fn-opa     { left: 630px; top: 504px; width: 300px; height: 130px; }
.fn-app     { left: 300px; top: 694px; width: 560px; height: 116px; }

/* ---- wires: 1px rules with a border-triangle arrowhead */
.fwire {
  position: absolute;
  background: var(--flow-line);
}

.fwire::after {
  content: "";
  position: absolute;
}

.fw-down::after {
  left: -3px;
  bottom: -6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--flow-line);
}

.fw-up::after {
  left: -3px;
  top: -6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--flow-line);
}

.fw-left::after {
  top: -3px;
  left: -6px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid var(--flow-line);
}

.fw-right::after {
  top: -3px;
  right: -6px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--flow-line);
}

.fw-none::after {
  content: none;
}

.flabel {
  position: absolute;
  font-size: 11px;
  color: var(--on-fill-soft);
  white-space: nowrap;
}

.fwire-console-git { left: 300px; top: 132px; width: 100px; height: 1px; }
.flabel-console-git { left: 310px; top: 110px; }

.fwire-git-opal { left: 530px; top: 208px; width: 1px; height: 60px; }
.flabel-git-opal { left: 542px; top: 224px; }

.fwire-pip-drop { left: 830px; top: 208px; width: 1px; height: 118px; }
.fwire-pip-opal { left: 660px; top: 326px; width: 170px; height: 1px; }
.flabel-pip-opal { left: 674px; top: 304px; }

.fwire-opal-pdp { left: 530px; top: 400px; width: 1px; height: 64px; }
.flabel-opal-pdp { left: 542px; top: 416px; }

.fwire-gate-opa { left: 560px; top: 569px; width: 70px; height: 1px; }
.flabel-gate-opa { left: 562px; top: 546px; }

.fwire-app-gate { left: 420px; top: 654px; width: 1px; height: 40px; }
.flabel-app-gate { left: 200px; top: 664px; width: 208px; text-align: right; }

.fwire-opa-app { left: 780px; top: 654px; width: 1px; height: 40px; }
.flabel-opa-app { left: 792px; top: 664px; }

/* ---- the integration reference architecture, on its own 960 by 922 canvas.
   What comes in, then one runtime that holds the services and both
   transports, then the systems of record it reaches. */
.fn-in-consumers { left: 20px;  top: 56px;  width: 240px; height: 152px; }
.fn-in-gateway   { left: 360px; top: 56px;  width: 240px; height: 152px; }
.fn-in-mft       { left: 700px; top: 56px;  width: 240px; height: 152px; }

/* The runtime is two rows: the services consumers actually reach, full
   width, then the three stateful things they stand on. The endpoint list is
   one text line: keep it short enough to stay one on a wider monospace face
   too, or this box needs a second line and everything below it moves. */
.fn-in-services  { left: 90px;  top: 330px; width: 780px; height: 110px; }

.fn-in-mq        { left: 90px;  top: 468px; width: 240px; height: 152px; }
.fn-in-kafka     { left: 360px; top: 468px; width: 240px; height: 152px; }
.fn-in-store     { left: 630px; top: 468px; width: 240px; height: 152px; }

.fn-in-sap       { left: 20px;  top: 750px; width: 212px; height: 152px; }
.fn-in-crm       { left: 256px; top: 750px; width: 212px; height: 152px; }
.fn-in-ecom      { left: 492px; top: 750px; width: 212px; height: 152px; }
.fn-in-pay       { left: 728px; top: 750px; width: 212px; height: 152px; }

.fwire-in-cons-gw { left: 260px; top: 132px; width: 100px; height: 1px; }
.flabel-in-cons-gw { left: 270px; top: 110px; }

.fwire-in-gw-backend { left: 480px; top: 208px; width: 1px; height: 60px; }
.flabel-in-gw-backend { left: 492px; top: 224px; }

.fwire-in-mft-backend { left: 820px; top: 208px; width: 1px; height: 60px; }
.flabel-in-mft-backend { left: 832px; top: 224px; }

/* One drop out of the runtime, a bar across, then one drop into each
   system, so four destinations cost four short lines instead of four
   long ones crossing each other. */
.fwire-in-backend-bus { left: 480px; top: 658px; width: 1px; height: 48px; }
.flabel-in-backend-bus { left: 492px; top: 668px; }

.fwire-in-bus     { left: 126px; top: 706px; width: 708px; height: 1px; }
.fwire-in-bus-sap  { left: 126px; top: 706px; width: 1px; height: 44px; }
.fwire-in-bus-crm  { left: 362px; top: 706px; width: 1px; height: 44px; }
.fwire-in-bus-ecom { left: 598px; top: 706px; width: 1px; height: 44px; }
.fwire-in-bus-pay  { left: 834px; top: 706px; width: 1px; height: 44px; }

/* ------------------------------------------------------------- About page */
.about-founder {
  display: grid;
  gap: 22px;
  align-items: start;
}

.portrait {
  margin: 0;
}

/* A slot the shape of the photograph that will fill it, so the layout is
   already the one the photograph will land in. */
.portrait-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--table-head);
  text-align: center;
}

.portrait-image {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* --------------------------------------------------------- Contact page */
.contact-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-list > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.contact-list > div:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-list dd {
  margin: 4px 0 0;
}

/* -------------------------------------------------------- Insights pages */
.insight-list {
  display: grid;
  gap: 0;
}

.insight {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.insight:last-child {
  border-bottom: 1px solid var(--line);
}

.insight-title {
  margin-top: 4px;
}

.insight-title a {
  text-decoration: none;
}

.insight-title a:hover {
  text-decoration: underline;
}

.insight .pill-row {
  margin-top: 12px;
}

.empty-state {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------- Steps */
/* The engagement ladder. Full-width rows rather than small cards, so each
   step has room to be read rather than skimmed. */
.steps {
  display: grid;
}

.step {
  display: grid;
  gap: 10px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step-name {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 650;
  color: var(--ink);
}

.step-deliverable {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ------------------------------------------------- Natural-language block */
.nl-block {
  padding: 26px 22px;
}

.nl-headline {
  max-width: var(--prose);
  margin-top: 8px;
  font-size: 20px;
  font-weight: 650;
}

.nl-example {
  max-width: var(--prose);
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--on-fill-wash);
  font-family: var(--mono);
  font-size: 12.5px;
}

.nl-prompt {
  opacity: 0.65;
}

/* ------------------------------------------------------------------- FAQ */
.faq {
  max-width: var(--prose);
}

.faq > * + * {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.faq h3 {
  margin-bottom: 6px;
}

/* --------------------------------------------------------------- Spacing */
/* A block that follows the opening of a section: prose, a pill row, a second
   grid. Keeps sections from running together without a new wrapper. */
.section-body {
  margin-top: 22px;
}

/* When such a block IS the opening — the diagram on /integration/ — it takes
   the section head's own 16px instead of collapsing to a wider gap. */
.section-head + .section-body {
  margin-top: 16px;
}

.footnote {
  margin-top: 10px;
}

.deliverable {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.banner-body {
  margin-top: 8px;
  max-width: var(--prose);
}

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

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-bullet {
  max-width: var(--prose);
  padding-left: 18px;
}

.list-bullet li + li {
  margin-top: 6px;
}

.nowrap {
  white-space: nowrap;
}

/* -------------------------------------------------------- Media queries */
/* Two only, per the design specification. */
@media (min-width: 700px) {
  main {
    padding: 36px 0 64px;
  }

  h1 {
    font-size: 28px;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-list > * + * {
    border-top: 0;
    border-left: 1px solid var(--blue-divider);
  }

  .section {
    margin-top: 48px;
  }

  .step {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
  }

  .about-founder {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
  }

  .contact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-list > div {
    padding: 0 22px;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  .contact-list > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .contact-list > div:last-child {
    border-bottom: 0;
  }

  .bar-divider {
    display: block;
  }

  .section-name {
    display: block;
  }
}

@media (min-width: 880px) {
  .diagram-hint {
    display: none;
  }

  .nav-wide {
    display: block;
  }

  .nav-narrow {
    display: none;
  }
}