/* ==========================================================================
   SwishrJobs design system
   Direction: an engineering ledger. The product is verified, inspectable work,
   so the interface reads like a technical document rather than a startup page:
   ruled grids, measurement ticks, monospace data, numbered sections, and one
   functional accent colour taken from the brand mark.
   ========================================================================== */

:root {
  /* Brand, measured from the uploaded mark: light ground, navy ink, green accent. */
  --ink:        #001020;
  --ink-2:      #0a2038;
  --ink-3:      #33506e;
  --paper:      #f4f3ef;
  --paper-2:    #fbfaf7;
  --rule:       #d6d3c9;
  --rule-soft:  #e6e3da;
  --accent:     #00b050;
  --accent-dim: #0a7a3c;
  --amber:      #b06a00;
  --red:        #a32219;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background-image:
    linear-gradient(to right, rgba(0,16,32,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,16,32,.045) 1px, transparent 1px);
  background-size: 32px 32px;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dim); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0; }

.mono { font-family: var(--mono); }
.tick  { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* -- Masthead ------------------------------------------------------------ */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,243,239,.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; gap: 1.4rem; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.brand__mark {
  width: 22px; height: 22px; border: 2px solid var(--ink);
  border-radius: 50%; position: relative; flex: none; transform: translateY(3px);
}
.brand__mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.brand__name { font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
.nav { display: flex; gap: 1.15rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav a { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* -- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .68rem 1.15rem; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { background: var(--ink); color: var(--paper-2); transform: translateY(-1px); }
.btn--solid { background: var(--ink); color: var(--paper-2); }
.btn--solid:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn--sm { padding: .4rem .7rem; font-size: .66rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }

/* -- Hero ---------------------------------------------------------------- */

.hero { padding: clamp(3.2rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3.4rem); border-bottom: 1px solid var(--rule); }
.hero__kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }
.hero__kicker::before { content: ""; width: 42px; height: 1px; background: var(--ink); flex: none; }
.hero h1 { font-size: clamp(2.4rem, 7.4vw, 5.1rem); max-width: 20ch; }
.hero h1 em { font-style: italic; color: var(--accent-dim); }
.hero__lede { margin-top: 1.7rem; max-width: 62ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); line-height: 1.65; }
.hero__actions { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* -- Status strip -------------------------------------------------------- */

.status-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--rule); border-top: none; background: var(--paper-2);
}
.status-cell { padding: 1.15rem 1.3rem; border-right: 1px solid var(--rule-soft); border-top: 1px solid var(--rule); }
.status-cell:last-child { border-right: none; }
.status-cell__label { display: block; margin-bottom: .5rem; }
.status-cell__value { font-family: var(--mono); font-size: 1.42rem; font-weight: 500; letter-spacing: -.02em; }
.status-cell__note { font-size: .8rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.45; }

.pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.pip--on   { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,176,80,.18); }
.pip--off  { background: var(--red); box-shadow: 0 0 0 3px rgba(163,34,25,.14); }
.pip--warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(176,106,0,.14); }

/* -- Sections ------------------------------------------------------------ */

section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; border-bottom: 1px solid var(--rule); }
.section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.section-head__num { font-family: var(--mono); font-size: .72rem; color: var(--accent-dim); letter-spacing: .12em; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.section-head p { margin: 0; color: var(--ink-3); max-width: 58ch; font-size: .95rem; }

/* -- Lifecycle steps ----------------------------------------------------- */

.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.step__n { font-family: var(--mono); font-size: 1.5rem; color: var(--accent-dim); border-right: 1px solid var(--rule-soft); padding-right: 1rem; line-height: 1; }
.step h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 68ch; }
.step code { font-family: var(--mono); font-size: .84em; background: rgba(0,16,32,.05); padding: .1em .38em; }

/* The agents-page lifecycle: a plain numbered list, ruled like the steps on the
   home page but compact, because it is reference material rather than a pitch. */
.flow { margin: 0; padding-left: 1.3rem; }
.flow li { padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; color: var(--ink-2); }
.flow li:last-child { border-bottom: none; }
.flow code { font-family: var(--mono); font-size: .84em; background: rgba(0,16,32,.05); padding: .1em .38em; }

/* -- Catalogue ----------------------------------------------------------- */

.catalogue { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.service { background: var(--paper-2); padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: start; }
.service:hover { background: #fff; }
.service__title { font-size: 1.16rem; margin-bottom: .4rem; }
.service__summary { color: var(--ink-2); font-size: .92rem; margin: 0 0 .85rem; max-width: 62ch; }
.service__meta { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.service__meta span { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.service__title .badge { margin-left: .6rem; vertical-align: middle; }
.service__delivers-label { margin: .2rem 0 .4rem; display: block; }
.service__delivers { margin: 0; padding-left: 1.05rem; }
.service__delivers li { font-size: .9rem; color: var(--ink-2); margin-bottom: .2rem; }
.service__price { text-align: right; min-width: 130px; }
.service__amount { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; display: block; }
.service__unit { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
.badge { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border: 1px solid currentColor; margin-bottom: .5rem; }
.badge--verified { color: var(--accent-dim); }
.badge--unverified { color: var(--amber); }

/* -- Code / endpoint blocks ---------------------------------------------- */

.endpoints { display: grid; gap: 1rem; }
.endpoint { border: 1px solid var(--rule); background: var(--paper-2); }
.endpoint__head { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.endpoint__method { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; padding: .18rem .45rem; background: var(--ink); color: var(--paper-2); }
.endpoint__path { font-family: var(--mono); font-size: .84rem; }
.endpoint__desc { margin-left: auto; font-size: .8rem; color: var(--ink-3); }
pre { margin: 0; padding: 1rem; overflow-x: auto; background: var(--ink); color: #cfe6d8; font-family: var(--mono); font-size: .78rem; line-height: 1.65; }
pre .k { color: #8fd6a8; }
pre .s { color: #f0d59a; }
pre .c { color: #6d8a9c; }

/* -- Honest limitations -------------------------------------------------- */

.limits { border-left: 3px solid var(--amber); background: rgba(176,106,0,.05); padding: 1.4rem 1.6rem; }
.limits h3 { font-size: 1.1rem; margin-bottom: .8rem; }
.limits ul { margin: 0; padding-left: 1.1rem; }
.limits li { margin-bottom: .5rem; font-size: .93rem; color: var(--ink-2); }

/* -- Tables -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding: .6rem .8rem; border-bottom: 1.5px solid var(--ink); font-weight: 500; white-space: nowrap; }
td { padding: .68rem .8rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tr:hover td { background: rgba(0,16,32,.02); }
.num { font-family: var(--mono); text-align: right; white-space: nowrap; }

/* -- Console shell ------------------------------------------------------- */

.console { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.rail { background: var(--ink); color: #c6d4e0; padding: 1.3rem 0; border-right: 1px solid var(--ink-2); position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.rail__brand { padding: 0 1.2rem 1.2rem; border-bottom: 1px solid var(--ink-2); margin-bottom: .8rem; }
.rail__brand .brand__name { color: #fff; }
.rail__group { padding: .8rem 1.2rem .3rem; }
.rail__link { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: #9fb3c4; padding: .5rem 1.2rem; border-left: 2px solid transparent; text-decoration: none; }
.rail__link:hover { color: #fff; background: rgba(255,255,255,.04); }
.rail__link[aria-current="page"] { color: #fff; border-left-color: var(--accent); background: rgba(0,176,80,.1); }
.rail__foot { padding: 1rem 1.2rem; margin-top: 1rem; border-top: 1px solid var(--ink-2); font-size: .72rem; color: #7b90a3; }

.panel { padding: 1.8rem clamp(1.2rem, 3vw, 2.6rem) 4rem; background: var(--paper); }
.panel__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.panel__head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.panel__head p { margin: 0; color: var(--ink-3); font-size: .9rem; max-width: 60ch; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 2rem; }
.card { background: var(--paper-2); padding: 1.15rem 1.25rem; }
.card__label { display: block; margin-bottom: .55rem; }
.card__value { font-family: var(--mono); font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.card__note { font-size: .78rem; color: var(--ink-3); margin-top: .4rem; }

.block { border: 1px solid var(--rule); background: var(--paper-2); margin-bottom: 1.6rem; }
.block__head { padding: .85rem 1.2rem; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.block__head h2 { font-size: 1.05rem; }
.block__body { padding: 1.2rem; }
.block__body--flush { padding: 0; }

.alert { display: flex; gap: .8rem; padding: .85rem 1.1rem; border: 1px solid var(--rule); border-left-width: 3px; background: var(--paper-2); margin-bottom: .6rem; align-items: flex-start; }
.alert--warning { border-left-color: var(--amber); }
.alert--info { border-left-color: var(--ink-3); }
.alert--critical { border-left-color: var(--red); }
.alert__body { font-size: .88rem; }
.alert__body strong { display: block; margin-bottom: .2rem; }
.alert__body span { color: var(--ink-3); }

.kv { display: grid; grid-template-columns: minmax(160px, auto) 1fr; gap: .5rem 1.4rem; font-size: .87rem; }
.kv dt { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); letter-spacing: .04em; }
.kv dd { margin: 0; font-family: var(--mono); font-size: .82rem; word-break: break-word; }

.toolbar { display: flex; gap: .7rem; margin-bottom: 1.2rem; flex-wrap: wrap; align-items: center; }
.input, .select { font-family: var(--mono); font-size: .8rem; padding: .5rem .7rem; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); min-width: 180px; }
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.gate { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem; padding: .35rem .7rem; border: 1px solid currentColor; }
.gate--closed { color: var(--red); }
.gate--open { color: var(--accent-dim); }

.empty { padding: 2.2rem 1.2rem; text-align: center; color: var(--ink-3); font-size: .9rem; }

/* -- Sign-in ------------------------------------------------------------- */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.signin__card { width: min(430px, 100%); border: 1px solid var(--rule); background: var(--paper-2); padding: 2.2rem; }
.signin__card h1 { font-size: 1.7rem; margin-bottom: .5rem; }
.signin__card p { color: var(--ink-3); font-size: .9rem; margin: 0 0 1.6rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .4rem; }
.field input { width: 100%; font-family: var(--mono); font-size: .85rem; padding: .62rem .7rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.form-error { color: var(--red); font-size: .84rem; margin-top: .8rem; font-family: var(--mono); }

/* -- Footer -------------------------------------------------------------- */

.footer { padding: 2.6rem 0 3.4rem; background: var(--ink); color: #9fb3c4; }
.footer a { color: #cfe6d8; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.footer h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: #7b90a3; margin-bottom: .9rem; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; font-size: .85rem; }
.footer__base { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--ink-2); font-size: .78rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* -- Utilities ------------------------------------------------------------
   These exist so that no page needs a `style=` attribute. A strict
   Content-Security-Policy without `unsafe-inline` forbids inline styles, so
   every one-off value below is a named class instead. They are additive and do
   not depend on source order against the component rules above. */
.u-section-flush { border-bottom: none; }
.u-hero-flush { border-bottom: none; padding-bottom: 1rem; }
.u-blurb { font-size: .88rem; max-width: 34ch; }
.u-cap-id { font-size: .72rem; color: var(--ink-3); }
.u-lead-note { font-size: .93rem; color: var(--ink-2); margin-top: 0; }
.u-prose { max-width: 72ch; }
.u-prose--spaced { margin-top: 2rem; }
.u-mb-14 { margin-bottom: 1.4rem; }
.u-mb-16 { margin-bottom: 1.6rem; }
.u-btn-block { width: 100%; justify-content: center; }
.u-pl-0 { padding-left: 0; }
.u-cell-xs { font-size: .74rem; }
.u-cell-xs2 { font-size: .76rem; }
.u-cell-sm { font-size: .82rem; }
.u-note { margin: 0; font-size: .9rem; }
.u-note-muted { font-size: .85rem; color: var(--ink-3); margin-bottom: 0; }
.u-note-muted--top { font-size: .88rem; color: var(--ink-3); margin-top: 0; }
.u-field-row { display: flex; align-items: center; gap: .8rem; }
.u-w-auto { width: auto; }
.u-m-0 { margin: 0; }
.u-result { font-size: .86rem; color: var(--accent-dim); margin-bottom: 0; }

/* -- Motion: orchestrated reveals, then the working demonstrations -------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); animation: reveal .6s cubic-bezier(.2,.7,.3,1) forwards; }
  .reveal:nth-child(1) { animation-delay: .04s; }
  .reveal:nth-child(2) { animation-delay: .1s; }
  .reveal:nth-child(3) { animation-delay: .16s; }
  .reveal:nth-child(4) { animation-delay: .22s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* -- The workbench: a job running, step by step ---------------------------
   The visual is the product. It shows one real job moving from an incoming
   request, through execution, to a verified deliverable. The base state is
   fully visible, so a reader with reduced motion (or no CSS animation at all)
   sees the whole lifecycle statically. The animation only adds the sequencing.
   Every row and value here is a real shape the API returns. */

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }

.workbench {
  position: relative; overflow: hidden;
  border: 1px solid var(--ink-2); background: #04121f; color: #cfe6d8;
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  box-shadow: 0 26px 60px -32px rgba(0, 16, 32, .62);
}
.wb-bar { display: flex; align-items: center; gap: .45rem; padding: .62rem .85rem; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.wb-dot { width: 9px; height: 9px; border-radius: 50%; background: #23415a; }
.wb-dot:nth-child(1) { background: #35597a; }
.wb-dot:nth-child(2) { background: #2c6b52; }
.wb-dot:nth-child(3) { background: #6b5a2c; }
.wb-title { margin-left: auto; color: #7fa6c0; letter-spacing: .07em; font-size: .66rem; }
.wb-body { padding: .35rem 1rem 1.05rem; }

.wb-row { display: grid; grid-template-columns: 5.6rem 1fr; gap: .8rem; padding: .62rem 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.wb-row:last-child { border-bottom: none; }
.wb-stage { color: #7fa6c0; letter-spacing: .11em; text-transform: uppercase; font-size: .6rem; padding-top: .12rem; }
.wb-val { min-width: 0; word-break: break-word; }
.wb-kv { color: #8fb6cf; }
.wb-ok { color: #7ee2a8; }
.wb-dim { color: #6d8a9c; }

/* The execution bar fills while the job runs, then reports the outcome. */
.wb-track { height: 6px; margin: .5rem 0 .35rem; background: rgba(255,255,255,.08); overflow: hidden; }
.wb-fill { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #0a7a3c, #00b050); }

/* The verification stamp lands only after the tests pass. */
.wb-stamp { display: inline-block; margin-top: .15rem; padding: .16rem .5rem; border: 1px solid var(--accent); color: #7ee2a8; letter-spacing: .16em; font-size: .62rem; text-transform: uppercase; }

/* A soft sweep across the panel, so the surface reads as active work. */
.wb-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(0,176,80,.14) 50%, transparent 58%); }

@media (prefers-reduced-motion: no-preference) {
  .wb-row { animation: 16s linear infinite both; }
  .wb-row:nth-child(1) { animation-name: wbRow1; }
  .wb-row:nth-child(2) { animation-name: wbRow2; }
  .wb-row:nth-child(3) { animation-name: wbRow3; }
  .wb-row:nth-child(4) { animation-name: wbRow4; }
  .wb-fill { animation: wbFill 16s linear infinite both; }
  .wb-stamp { animation: wbStamp 16s linear infinite both; }
  .wb-scan { animation: wbScan 16s linear infinite both; }

  /* Each row appears in turn, all four stay visible, then the panel resets. */
  @keyframes wbRow1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
  @keyframes wbRow2 { 0%, 24% { opacity: 0; transform: translateY(6px); } 30%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
  @keyframes wbRow3 { 0%, 46% { opacity: 0; transform: translateY(6px); } 52%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
  @keyframes wbRow4 { 0%, 68% { opacity: 0; transform: translateY(6px); } 74%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
  @keyframes wbFill { 0%, 26% { transform: scaleX(.04); } 66%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(.04); } }
  @keyframes wbStamp { 0%, 72% { opacity: 0; transform: scale(1.5); } 78%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(1.5); } }
  @keyframes wbScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
}

/* -- Work demonstrations: input in, deliverable out -----------------------
   Each tile shows a real transform the service performs, with the input above
   and the produced deliverable below. The output reveals left-to-right; with
   reduced motion it is simply shown. */

.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.demo { background: var(--paper-2); padding: 1.15rem 1.25rem 1.25rem; }
.demo__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.demo__title { font-size: .98rem; }
.demo__cases { display: inline-flex; gap: .2rem; }
.demo__case {
  font-family: var(--mono); font-size: .6rem; line-height: 1; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--rule); padding: .22rem .38rem;
  cursor: pointer;
}
.demo__case:hover { border-color: var(--accent-dim); color: var(--ink); }
.demo__case[aria-current="true"] { border-color: var(--accent); color: var(--accent-dim); background: rgba(0,176,80,.07); }
.demo__io { font-family: var(--mono); font-size: .74rem; }
.demo__label { display: block; font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.demo__in, .demo__out { display: block; padding: .55rem .65rem; border: 1px solid var(--rule); background: var(--paper); white-space: pre-wrap; word-break: break-word; }
.demo__in { color: var(--ink-2); }
.demo__out { color: var(--accent-dim); border-color: rgba(0,176,80,.35); background: rgba(0,176,80,.05); margin-top: .55rem; }
.demo__arrow { display: block; text-align: center; color: var(--rule); margin: .35rem 0 -.1rem; font-size: .8rem; }

@media (prefers-reduced-motion: no-preference) {
  .demo__out { animation: demoReveal 9s cubic-bezier(.4,.1,.2,1) infinite both; }
  .demo:nth-child(2) .demo__out { animation-delay: .5s; }
  .demo:nth-child(3) .demo__out { animation-delay: 1s; }
  .demo:nth-child(4) .demo__out { animation-delay: 1.5s; }
  @keyframes demoReveal {
    0%, 6% { clip-path: inset(0 100% 0 0); }
    30%, 88% { clip-path: inset(0 0 0 0); }
    96%, 100% { clip-path: inset(0 100% 0 0); }
  }
  /* A tile whose examples are cycled by script shows a one-shot reveal on each
     swap instead of the perpetual loop, so the change reads as a fresh run. */
  .demo:has(.demo__cases) .demo__out { animation: none; }
  .demo__out.is-swap { animation: demoSwap .5s cubic-bezier(.4,.1,.2,1) both; }
  @keyframes demoSwap {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; display: flex; overflow-x: auto; padding: .5rem; align-items: center; }
  .rail__brand, .rail__foot { display: none; }
  .rail__link { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .rail__link[aria-current="page"] { border-left: none; border-bottom-color: var(--accent); }
  .hero__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .service { grid-template-columns: 1fr; }
  .service__price { text-align: left; }
  .endpoint__desc { margin-left: 0; flex-basis: 100%; }
  .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .status-cell { border-right: none; }
  .footer__base { flex-direction: column; gap: .4rem; }
}

/* A table that cannot fit is scrolled, never allowed to widen the page. The
   wrapper is the scroll container, so the ruled border stays on the block and
   the whole table moves together. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
/* The endpoints grid is a single column on a narrow screen, so a long path or
   snippet wraps instead of forcing a horizontal scrollbar on the whole page. */
.endpoints pre { white-space: pre-wrap; word-break: break-word; }

@media (max-width: 560px) {
  :root { --gutter: 1rem; }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); max-width: none; }
  .masthead__inner { gap: .8rem; }
  .nav { gap: .8rem; }
  .nav a { font-size: .68rem; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .step__n { border-right: none; padding-right: 0; font-size: 1.1rem; }
  .endpoint__head { gap: .5rem; }
  .endpoint__path { word-break: break-all; }
  .limits { padding: 1.1rem 1.2rem; }
}

/* Print: the ledger should survive on paper. */
@media print {
  body { background: #fff; background-image: none; }
  .masthead, .footer, .hero__actions, .rail { display: none; }
}