/* ---------------------------------------------------------------------------
   Spout Builders. Styling follows the live spout.finance design system
   (apps/landing-3), hand-written rather than Tailwind so this site stays a
   dependency-free static build.

   Token names below map one to one onto the Tailwind tokens in
   apps/landing-3/tailwind.config.js. If a value here disagrees with that file,
   that file wins.

   Fonts: Figtree is the UI face and is bundled (OFL). The display face on the
   live site is ES Rebond Grotesque, which we currently hold only under a TRIAL
   licence, so it is NOT bundled here. Buy the licence, drop the .otf files into
   assets/fonts/ and uncomment the block below, and every heading picks it up.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/*
@font-face {
  font-family: 'ES Rebond Grotesque';
  src: url('./assets/fonts/ESRebondGrotesque-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: block;
}
*/

:root {
  /* colour */
  --bg: #0A0A0A;
  --bg-subtle: #111111;
  --bg-raised: #222222;
  --bg-raised-hover: #272727;
  --bg-pager: #101010;
  --code-bg: #151515;

  --border: rgba(30, 30, 30, 0.8);
  --chip-border: #E2E2E2;

  --brand: #082567;
  --brand-hover: #0a2d7d;
  --brand-active: #061d52;
  --brand-50: #EAF0FF;

  --text: #ffffff;
  --text-strong: rgba(255, 255, 255, 0.8);
  --muted-strong: #888888;
  --muted: #666666;

  --danger: #f87171;
  --success: #34d399;

  /* the responsive hairline. 1.5px on mobile, 2px from lg up. */
  --border-w: 1.5px;

  --radius-card: 10px;
  --radius-pill: 50px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --display: 'ES Rebond Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (min-width: 1024px) {
  :root { --border-w: 2px; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

a { color: var(--text-strong); text-decoration: none; transition: color 200ms var(--ease); }
a:hover { color: var(--text); }

:focus-visible { outline: 2px solid var(--brand-50); outline-offset: 2px; }

/* ---------------------------------------------------------------- container */
/* Matches .container-page: capped at 1440 with padding that clamps to 120px. */

.wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) { .wrap { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) {
  .wrap {
    padding-left: clamp(48px, 17.31vw - 129.2px, 120px);
    padding-right: clamp(48px, 17.31vw - 129.2px, 120px);
  }
}

/* The two vertical hairlines that run the length of the page, laid over the
   content so an opaque section cannot paint across them. This is the single
   most identifiable thing about a Spout page. */
.rails { position: relative; }
.rails > .rails-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .rails > .rails-overlay { display: block; } }
.rails > .rails-overlay > .wrap { height: 100%; }
.rails > .rails-overlay > .wrap > div {
  height: 100%;
  border-left: var(--border-w) solid var(--border);
  border-right: var(--border-w) solid var(--border);
}

/* Sections are separated by a ruled band, never by bare whitespace. */
.spacer {
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
}
.spacer > .wrap { height: 48px; }
@media (min-width: 640px) { .spacer > .wrap { height: 64px; } }
@media (min-width: 1024px) { .spacer > .wrap { height: 100px; } }

/* ------------------------------------------------------------------- banner */

.banner {
  border-bottom: var(--border-w) solid var(--border);
  background: var(--bg-subtle);
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 20px;
  padding: 10px 24px;
  text-align: center;
  position: relative;
  z-index: 30;
}
.banner strong { color: var(--text-strong); font-weight: 600; }
.banner .meta { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

/* ------------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--border);
  transition: box-shadow 300ms var(--ease);
}
header.site.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
}
@media (min-width: 1024px) { header.site .wrap { height: 76px; } }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 22px; width: auto; user-select: none; }
@media (min-width: 1024px) { .brand img { height: 26px; } }
.brand .sub {
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
  font-weight: 500;
  padding-left: 10px;
  border-left: 1.5px solid var(--border);
}

nav.top { margin-left: auto; display: none; gap: 24px; }
@media (min-width: 1024px) { nav.top { display: flex; } }
nav.top a { font-size: 15px; line-height: 20px; font-weight: 500; }

/* --------------------------------------------------------------------- chip */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(226, 226, 226, 0.8);
  padding: 6px 16px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 20px;
}
.chip::before {
  content: '';
  height: 5px;
  width: 5px;
  border-radius: 999px;
  background: var(--text);
}

/* --------------------------------------------------------------------- hero */

.hero { padding: 64px 0 56px; }
@media (min-width: 1024px) { .hero { padding: 96px 0 88px; } }

.hero h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--text);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0.6px;
  max-width: 16ch;
  text-wrap: balance;
}
@media (min-width: 640px) { .hero h1 { font-size: 40px; line-height: 1.1; } }
@media (min-width: 1024px) { .hero h1 { font-size: 48px; line-height: 54px; } }

.hero p.lede {
  margin: 0;
  max-width: 651px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted);
}
@media (min-width: 640px) { .hero p.lede { font-size: 18px; line-height: 24px; } }

.hero .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: all 200ms var(--ease);
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: var(--brand);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn.primary:hover { background: var(--brand-hover); color: var(--text); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.btn.primary:active { background: var(--brand-active); }
.btn.ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: rgba(255, 255, 255, 0.2);
}
.btn.ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.btn.ghost:active { background: rgba(255, 255, 255, 0.1); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ----------------------------------------------------------------- sections */

section { padding: 56px 0; }
@media (min-width: 1024px) { section { padding: 72px 0; } }

section > .wrap > h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-strong);
  max-width: 24ch;
}
@media (min-width: 1024px) { section > .wrap > h2 { font-size: 28px; line-height: 34px; } }

section > .wrap > p.section-lede {
  margin: 0 0 28px;
  max-width: 726px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted-strong);
}

h3 {
  margin: 36px 0 10px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-strong);
}

p { max-width: 76ch; margin: 0 0 16px; color: var(--muted-strong); font-size: 15px; line-height: 26px; }
strong { color: var(--text-strong); font-weight: 600; }

/* ----------------------------------------------------------------- callouts */

.callout {
  border: var(--border-w) solid var(--border);
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 12px; }
.callout.brand { border-left-color: var(--brand); }

/* --------------------------------------------------------------------- flow */

.flow { display: grid; gap: 12px; margin: 28px 0 8px; }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow .step {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-subtle);
  padding: 20px 22px;
}
.flow .step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.flow .step h4 { margin: 0 0 6px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text-strong); }
.flow .step p { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }

/* -------------------------------------------------------------------- cards */

.cards { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.02), transparent);
  padding: 22px 24px;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}
.card:hover { border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
.card h4 { margin: 0 0 8px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--text-strong); }
.card p { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.card p + p { margin-top: 10px; }

/* --------------------------------------------------------------------- code */

pre {
  background: var(--bg-subtle);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text-strong);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 18px 0;
}
pre .c { color: var(--muted); }
pre .k { color: #a9c7ff; }
pre .s { color: #bcd4ff; }
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
pre code { background: none; border: none; color: inherit; padding: 0; font-size: inherit; }

/* ------------------------------------------------------------------- tables */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 22px 0;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
th, td { text-align: left; padding: 12px 20px; vertical-align: top; }
th {
  height: 48px;
  background: var(--bg-subtle);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}
td { border-top: 1.5px solid var(--border); color: var(--text-strong); font-size: 15px; line-height: 22px; }
th + th, td + td { border-left: 1.5px solid var(--border); }
td code { white-space: nowrap; }

/* ------------------------------------------------------------------- footer */

footer.site {
  border-top: var(--border-w) solid var(--border);
  background: var(--bg);
  padding: 40px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--text-strong); }
footer.site .meta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
footer.site .disclaimer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: var(--border-w) solid var(--border);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--muted);
  max-width: 100%;
}

/* -------------------------------------------------------------- kicker text */

.kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
}

/* -------------------------------------------------------- the reference page */

body.reference { height: 100vh; display: flex; flex-direction: column; }
body.reference .scalar-host { flex: 1 1 auto; min-height: 0; }

@media (max-width: 640px) {
  .hero { padding: 48px 0 44px; }
  .hero h1 { font-size: 30px; line-height: 38px; letter-spacing: 0.4px; }
}

/* ---------------------------------------------------------------------------
   Terminal code block. A chrome bar with a prompt glyph and an environment tag,
   then a body with $ prompts. A code sample should read as something you ran,
   not as a screenshot of documentation.
--------------------------------------------------------------------------- */

.term {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-subtle);
  overflow: hidden;
  margin: 20px 0;
}
.term > .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1.5px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.term > .bar .glyph { color: var(--muted-strong); }
.term > .bar .tag { margin-left: auto; }
.term > pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 18px 20px;
}
.term pre .p { color: var(--muted); }
.term pre .c { color: var(--muted); }
.term pre .k { color: #a9c7ff; }
.term pre .s { color: rgba(255, 255, 255, 0.92); }
.term pre .u { color: #6f9aff; }

/* ---------------------------------------------------------------------------
   Health factor rail. One per loan, and deliberately not connected to any other
   rail on the page, because that is the whole point of the section.
--------------------------------------------------------------------------- */

.hf-grid { display: grid; gap: 20px; align-items: start; margin: 28px 0 8px; }
@media (min-width: 1024px) { .hf-grid { grid-template-columns: 1fr 1fr; } }

.hf {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-subtle);
  padding: 22px 24px;
}
.hf .head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hf .head .sym { font-size: 14px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.hf .head .co { font-size: 12.5px; color: var(--muted); }
.hf .head .state { margin-left: auto; font-size: 12.5px; color: var(--success); transition: color 200ms var(--ease); }

.hf .metric { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.hf .metric .label { font-size: 15px; font-weight: 600; color: var(--text); }
.hf .metric .info {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid #555;
  color: var(--muted-strong);
  font: 600 9.5px/12px inherit;
  display: flex; align-items: center; justify-content: center;
}
.hf .metric .val {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--success);
  transition: color 200ms var(--ease);
}

.hf .rail { position: relative; padding: 0 6px; }
.hf .rail .track {
  height: 9px;
  border-radius: 50px;
  background: linear-gradient(90deg, #c4453b 0%, #f87171 9%, #e0913f 22%, #d9c343 33%, #7fc47f 48%, #34d399 66%, #34d399 100%);
}
.hf .rail .liq { position: absolute; left: 18%; top: -6px; height: 21px; width: 2.5px; background: #f87171; border-radius: 2px; }
.hf .rail .now {
  position: absolute;
  top: -7px;
  height: 23px;
  width: 3px;
  background: #fff;
  border-radius: 2px;
  transition: left 200ms var(--ease);
}
.hf .scale { position: relative; height: 30px; margin-top: 10px; }
.hf .scale .at-liq {
  position: absolute;
  left: 18%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  color: #f87171;
  font-variant-numeric: tabular-nums;
}
.hf .scale .at-safe { position: absolute; right: 0; font-size: 15px; color: var(--success); }
.hf .foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1.5px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.hf .foot .debt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.hf .note { margin: 0; padding-top: 12px; border-top: 1.5px solid var(--border); font-size: 13.5px; line-height: 21px; color: var(--muted); }

.hf input[type="range"] { width: 100%; margin: 14px 0 4px; accent-color: var(--brand); }
.hf .slider-label {
  display: flex;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hf .slider-label .px { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 12.5px; }

/* --------------------------------------------------------------- card links */

.card .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.card .go::after { content: '\2192'; transition: transform 200ms var(--ease); }
.card:hover .go::after { transform: translateX(4px); }
.btn.primary .arrow { transition: transform 200ms var(--ease); }
.btn.primary:hover .arrow { transform: translateX(4px); }

/* ----------------------------------------------------------------- hero row */

.hero-row { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1100px) { .hero-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.hero-row .term { margin: 0; }
.hero-row .term > pre { font-size: 12.5px; line-height: 1.8; }