/* Borro, the professional pass on the community logo (Roy, 2026-10-20: "logo itself is good, rest should be
   looking professional and not too retro"). The logo stays as drawn; everything around it is a clean trading
   product: neutral white surfaces, ink type, hairline structure, and the logo's sunset used once, as the APR
   bars and a thin rule, so the color carries data rather than nostalgia. The 70s pass lives in retro/. */

:root {
  --canvas: #FBFBFA;
  --surface: #FFFFFF;
  --sunk: #F4F4F2;
  --ink: #0D0D0F;
  --text-2: #4A4B52;
  --text-3: #6E6F76;
  --line: #E7E7E3;
  --line-2: #D8D8D3;
  --gold: #EDB25A;
  --orange: #DC7440;
  --red: #C4453A;
  --maroon: #682936;
  --accent: #B5481B;          /* the logo's orange, deepened for text on white */
  --live: #13805A;
  --sunset: linear-gradient(90deg, var(--gold) 0%, var(--orange) 38%, var(--red) 70%, var(--maroon) 100%);
  --display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --ui: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif;
  --r1: 8px;
  --r2: 12px;
  --r3: 20px;
  --shadow: 0 1px 2px rgba(13, 13, 15, .04), 0 12px 32px -16px rgba(13, 13, 15, .18);
  --wrap: 1200px;
}

/* The brand faces load without holding the first paint (theme.js adds Google's stylesheet). Until they arrive, text
   sets in Arial sized and spaced to the brand faces' own metrics (measured in Chrome, 2026-10-21: Instrument Sans 400
   is 100.5% of Arial's width, ascent 97, descent 25; Archivo 700 is 99.6% of Arial Bold, ascent 88, descent 21), so
   the swap moves nothing. */
@font-face { font-family: 'Instrument Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; size-adjust: 100.5%; ascent-override: 96.5%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 800; size-adjust: 97.8%; ascent-override: 99.2%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 500 900; size-adjust: 98.6%; ascent-override: 89.2%; descent-override: 21.3%; line-gap-override: 0%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Fluid: the page fills the screen with proportional margins (Roy, 2026-10-20: "robinhoods ui fills the viewport"). */
.wrap { width: calc(100% - 2 * var(--gutter)); max-width: 1600px; margin-inline: auto; }
:root { --gutter: clamp(20px, 5vw, 112px); }
.rule { height: 3px; background: var(--sunset); }

/* Buttons: ink for the one thing to do, outline for the rest. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn:hover { background: #26262B; border-color: #26262B; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.line:hover { border-color: var(--ink); background: transparent; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn.block { width: 100%; height: 50px; font-size: 16px; }

/* ------------------------------------------------------------------ site header */
.head { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 250, .86); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 32px; height: 68px; }
.logo { display: block; flex: none; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); background: var(--sunk); }

/* ------------------------------------------------------------------ hero */
.hero { padding: 72px 0 88px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(19, 128, 90, .14); }
.hero h1 { margin-top: 20px; font: 700 clamp(40px, 5.2vw, 66px)/1.02 var(--display); font-stretch: 108%; letter-spacing: -.035em; max-width: 14ch; }
.hero .sub { margin-top: 22px; max-width: 34em; font-size: 18px; color: var(--text-2); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--line); }
.stat { padding: 18px 20px 0 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line); }
.stat b { display: block; font: 700 30px/1.1 var(--display); font-stretch: 104%; letter-spacing: -.02em; }
.stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-3); }

/* The live ticket beside the headline. */
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); overflow: hidden; }
.ticket .rule { height: 3px; }
.ticket-in { padding: 22px 24px 24px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--sunk); border-radius: 10px; }
.seg button { height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 13, 15, .08), 0 0 0 1px var(--line); }
.asset { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.asset img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.asset b { display: block; font-size: 17px; font-weight: 650; }
.asset span { display: block; font-size: 14px; color: var(--text-3); }
.asset .px { margin-left: auto; text-align: right; }
.asset .px b { font-size: 16px; }
.field { margin-top: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.input { display: flex; align-items: center; gap: 6px; margin-top: 8px; height: 56px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13, 13, 15, .06); }
.input span { color: var(--text-3); font-size: 20px; }
.input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 22px var(--ui); color: var(--ink); }
.input .of { font-size: 14px; color: var(--text-3); }
.hint { margin-top: 8px; font-size: 14px; color: var(--text-3); }
.out { margin-top: 20px; padding: 18px 18px 16px; border-radius: var(--r2); background: var(--sunk); }
.out .k { font-size: 13px; font-weight: 600; color: var(--text-2); }
.out strong { display: block; margin-top: 4px; font: 700 52px/1 var(--display); font-stretch: 104%; letter-spacing: -.03em; }
.out .sub2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--text-3); }
.out .sub2 b { color: var(--ink); font-weight: 600; }
.ticket .btn.block { margin-top: 18px; }
.fine { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.said { margin-top: 10px; font-size: 14px; color: var(--accent); min-height: 1em; }

/* ------------------------------------------------------------------ sections */
.section { padding: 96px 0 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: 28px; }
.sec-head h2 { font: 700 clamp(30px, 3.4vw, 42px)/1.08 var(--display); font-stretch: 106%; letter-spacing: -.03em; }
.sec-head p { max-width: 36em; color: var(--text-2); }
.asof { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.asof i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.asof.stale i { background: var(--text-3); }

/* The markets table. */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.mk { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk th { padding: 14px 20px; text-align: right; font-size: 13px; font-weight: 600; color: var(--text-3); background: #FCFCFB; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk td { padding: 16px 20px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk tr:last-child td { border-bottom: 0; }
.mk tbody tr { transition: background .12s; }
.mk tbody tr:hover { background: #FAFAF8; }
.mk th:first-child, .mk td:first-child { text-align: left; }
.mk .who { display: flex; align-items: center; gap: 12px; }
.mk .who img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.mk .who b { display: block; font-weight: 650; color: var(--ink); }
.mk .who span { display: block; font-size: 13px; color: var(--text-3); }
.mk .apr { display: inline-grid; justify-items: end; gap: 6px; min-width: 120px; }
.mk .apr b { font-weight: 700; font-size: 16px; }
.mk .apr small { font-size: 12px; color: var(--text-3); }
.bar { width: 120px; height: 4px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--sunset); background-size: 120px 100%; }
.mk .dim { color: var(--text-2); }
.table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 14px 20px; border-top: 1px solid var(--line); background: #FCFCFB; font-size: 14px; color: var(--text-3); }

/* Products: three columns divided by hairlines, not three boxes. */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.product { padding: 28px 28px 8px 0; }
.product + .product { padding-left: 28px; border-left: 1px solid var(--line); }
.product .num { font-size: 13px; font-weight: 600; color: var(--text-3); }
.product h3 { margin-top: 10px; font: 700 26px/1.15 var(--display); font-stretch: 104%; letter-spacing: -.02em; }
.product p { margin-top: 12px; color: var(--text-2); }
.product .fig { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product .fig span { font-size: 14px; color: var(--text-3); }
.product .fig b { font: 700 22px var(--display); }

/* The weekend band: the one dark section. */
.band { margin-top: 112px; background: var(--ink); color: #fff; }
.band .rule { height: 3px; }
.band-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; padding: 80px 0; align-items: center; }
.band h2 { font: 700 clamp(30px, 3.4vw, 42px)/1.08 var(--display); font-stretch: 106%; letter-spacing: -.03em; }
.band p { margin-top: 18px; max-width: 34em; color: rgba(255, 255, 255, .72); font-size: 17px; }
.clock { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r3); padding: 8px 0; background: rgba(255, 255, 255, .03); }
.clock div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; }
.clock div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.clock span { color: rgba(255, 255, 255, .6); font-size: 15px; }
.clock b { font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.clock b i { width: 8px; height: 8px; border-radius: 50%; background: #3FD39A; }
.clock b i.off { background: rgba(255, 255, 255, .35); }

/* Plain risks. */
.risks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; }
.risks h3 { font-size: 16px; font-weight: 650; }
.risks p { margin-top: 8px; font-size: 15px; color: var(--text-2); }

/* Footer. */
.foot { margin-top: 112px; border-top: 1px solid var(--line); background: var(--surface); }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: center; padding: 36px 0 44px; }
.foot .logo img { height: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot nav a { color: var(--text-2); font-size: 15px; text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot small { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); max-width: 70em; }

/* ------------------------------------------------------------------ app */
.app-head { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-head .head-in { height: 64px; }
.app-nav { display: flex; gap: 4px; }
.app-nav a { padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 15px; text-decoration: none; }
.app-nav a[aria-current="page"] { color: var(--ink); background: var(--sunk); }
.app-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.chain { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.chain i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.app-tools .btn { gap: 5px; }

.desk { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 20px; align-items: start; padding: 24px 0 64px; }
.desk > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 16px; font-weight: 650; }
.panel-head span { font-size: 13px; color: var(--text-3); }
.search { margin: 12px 12px 4px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-3); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px var(--ui); color: var(--ink); }
.picks { padding: 6px; max-height: calc(100vh - 220px); overflow: auto; }
.pick { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.pick:hover { background: var(--sunk); }
.pick[aria-pressed="true"] { background: var(--sunk); box-shadow: inset 3px 0 0 var(--orange); }
.pick img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.pick b { display: block; font-weight: 650; font-size: 15px; }
.pick small { display: block; font-size: 13px; color: var(--text-3); }
.pick .rt { font-weight: 650; font-size: 15px; }

.trade { padding: 22px 24px 24px; }
.trade .asset { margin-top: 22px; }
.trade .asset img { width: 44px; height: 44px; }
.trade .asset b { font: 700 24px/1.1 var(--display); font-stretch: 104%; letter-spacing: -.02em; }
.trade .out strong { font-size: 60px; }

.port .sums { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.port .sums div { padding: 16px 20px; }
.port .sums div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.port .sums div + div + div { border-left: 1px solid var(--line); }
.port dt { font-size: 13px; font-weight: 600; color: var(--text-3); }
.port dd { margin-top: 4px; font: 700 20px var(--display); font-stretch: 104%; }
.port .sums div:first-child dd { font-size: 34px; letter-spacing: -.02em; }
.port table { width: 100%; border-collapse: collapse; font-size: 15px; }
.port th { padding: 12px 20px 8px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-3); }
.port td { padding: 10px 20px; text-align: right; border-top: 1px solid var(--line); }
.port th:first-child, .port td:first-child { text-align: left; }
.port td:first-child { font-weight: 650; }
.port .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.port .sample { padding: 0 20px 16px; font-size: 13px; color: var(--text-3); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 1100px) {
  .desk { grid-template-columns: 260px minmax(0, 1fr); }
  .port { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .hero-in, .band-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-in > *, .band-in > * { min-width: 0; }
  .products { grid-template-columns: 1fr; }
  .product, .product + .product { padding: 24px 0; border-left: 0; }
  .product + .product { border-top: 1px solid var(--line); }
  .risks { grid-template-columns: 1fr 1fr; }
  .nav a:not(.btn) { display: none; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .picks { max-height: 280px; }
  .hero { padding: 40px 0 56px; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stat { padding: 14px 0; }
  .risks { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .chain { display: none; }
  .head-in { gap: 16px; }
  .logo img { height: 22px; }
  /* On a phone the table keeps what decides a deposit: the market, its price and its APR. */
  .mk th:nth-child(n+4), .mk td:nth-child(n+4) { display: none; }
  .mk th, .mk td { padding-inline: 14px; }
  .mk .apr { min-width: 0; }
  .bar { width: 84px; }
  .table-foot { flex-direction: column; }
  /* The app bar: logo, two tabs and the wallet button fit a 390px screen. */
  .app-head .head-in { gap: 10px; }
  .app-nav a { padding: 6px 8px; font-size: 14px; }
  .app-nav a[href^="index.html"] { display: none; }
  .app-tools .btn.sm { padding: 0 12px; font-size: 14px; }
  .app-tools .btn .wide { display: none; }
  .app-head .logo img { height: 19px; }
}