/* payFit — web.
   Same language as the app: ink and bone, one signal colour, hairlines instead
   of cards, type carrying the page.

   Motion rules, held to throughout:
   - One easing curve. Everything uses --ease.
   - Motion must be earned. It is either driven by real data (the clock),
     by the visitor's own input (the stake picker), or by scroll position
     where the movement means something. No decorative drift, no parallax,
     no floating shapes, nothing fading in just because it entered the frame.
   - prefers-reduced-motion removes all of it and leaves the page complete. */

:root {
  --ink: #08080a;
  --ink-raised: #111114;
  --ink-high: #1c1c20;
  --bone: #f2f0ea;
  --bone-2: rgba(242, 240, 234, 0.58);
  --bone-3: rgba(242, 240, 234, 0.34);
  --bone-4: rgba(242, 240, 234, 0.13);
  --hair: rgba(242, 240, 234, 0.09);
  --hair-strong: rgba(242, 240, 234, 0.2);
  --safe: #c4f24c;
  --risk: #f0a93b;
  --charged: #ff4b3e;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4.5vw, 56px);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* The page sits inside a pair of hairlines, like a print grid. Cheap, and it
   reads as deliberate composition rather than a centred column. */
.rules { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rules i {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--hair);
}
.rules i:nth-child(1) { left: max(var(--gutter), calc(50% - var(--max) / 2)); }
.rules i:nth-child(2) { right: max(var(--gutter), calc(50% - var(--max) / 2)); }
@media (max-width: 720px) { .rules { display: none; } }

main, header, footer { position: relative; z-index: 1; }

/* Type ------------------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(30px, 5vw, 56px); }
h3 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }

p { margin: 0 0 1em; max-width: 60ch; color: var(--bone-2); }
strong { color: var(--bone); font-weight: 600; }
a { color: var(--bone); text-underline-offset: 3px; text-decoration-color: var(--bone-4); }
a:hover { text-decoration-color: var(--safe); }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-3); margin: 0 0 18px;
}

.fig { font-variant-numeric: tabular-nums; letter-spacing: -0.045em; font-weight: 500; }

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

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--hair);
}
.mark { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 19px;
        letter-spacing: -0.035em; text-decoration: none; color: var(--bone); }
.mark .bar { width: 32px; height: 5px; border-radius: 3px; background: var(--ink-high); overflow: hidden; }
.mark .bar i { display: block; height: 100%; width: 64%; background: var(--safe); border-radius: 3px; }
.masthead nav { display: flex; gap: 24px; font-size: 14px; }
.masthead nav a { color: var(--bone-3); text-decoration: none; transition: color 0.2s var(--ease); }
.masthead nav a:hover { color: var(--bone); }
@media (max-width: 640px) { .masthead nav { display: none; } }

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

.hero { padding: clamp(56px, 11vw, 120px) 0 clamp(40px, 6vw, 72px); }

.hero h1 {
  font-size: clamp(52px, 13vw, 158px);
  letter-spacing: -0.055em;
  max-width: 11ch;
}
.hero h1 .l { display: block; }

/* The headline arrives in two weighted lines rather than fading in as a block.
   Only element on the page that animates unprompted. */
.hero h1 .l { opacity: 0; transform: translateY(0.14em); animation: rise 0.9s var(--ease) forwards; }
.hero h1 .l:nth-child(2) { animation-delay: 0.09s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero-lede { margin-top: 30px; font-size: clamp(17px, 1.6vw, 20px); max-width: 44ch; }

/* The live clock ---------------------------------------------------------- */

.today {
  margin-top: clamp(40px, 6vw, 68px);
  border-top: 1px solid var(--hair);
  padding-top: 24px;
}
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.today-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.today .gone { font-size: clamp(38px, 6vw, 68px); line-height: 1; }
.today .unit { font-size: 15px; color: var(--bone-3); }
.today .left { font-size: 15px; color: var(--risk); font-variant-numeric: tabular-nums; }

.daybar {
  margin-top: 20px; height: 6px; border-radius: 3px;
  background: var(--ink-high); overflow: hidden; position: relative;
}
.daybar i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--risk); border-radius: 3px;
  transition: width 1s var(--ease);
}
.daybar b {
  position: absolute; top: -4px; bottom: -4px; width: 1px;
  background: var(--bone-4); left: 100%;
}
.today-note { margin: 14px 0 0; font-size: 13.5px; color: var(--bone-3); max-width: 52ch; }

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

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px; border-radius: 4px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
  font-family: inherit;
}
.btn-primary { background: var(--safe); color: var(--ink); }
.btn-secondary { border-color: var(--hair-strong); color: var(--bone); background: none; }
.btn:hover { transform: translateY(-1px); opacity: 0.9; }
.btn:active { transform: none; }

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

section { padding: clamp(64px, 10vw, 132px) 0; border-top: 1px solid var(--hair); }
.section-head { max-width: 40ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p { margin-top: 18px; }

/* Reveal: a short lift, once, only for section bodies. Not on every element. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Stake picker ------------------------------------------------------------ */

.stake { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 820px) { .stake { grid-template-columns: 1fr; } }

.amount { font-size: clamp(72px, 13vw, 168px); line-height: 0.86; display: block; }
.amount-unit { color: var(--bone-3); font-size: 15px; margin-top: 16px; display: block; }

.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.chip {
  appearance: none; background: none; cursor: pointer; text-align: left;
  border: 1px solid var(--hair-strong); border-radius: 4px; padding: 13px 15px;
  color: var(--bone); font-family: inherit;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--bone-3); }
.chip[aria-pressed="true"] { border-color: var(--safe); background: rgba(196, 242, 76, 0.09); }
.chip .n { display: block; font-size: 15px; font-weight: 600; }
.chip .v { display: block; font-size: 13px; color: var(--bone-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Ledger rows ------------------------------------------------------------- */

.ledger { margin: 0; padding: 0; list-style: none; }
.ledger li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 17px 0; border-bottom: 1px solid var(--hair);
}
.ledger li:first-child { border-top: 1px solid var(--hair); }
.ledger .label { color: var(--bone); font-weight: 500; font-size: 15.5px; }
.ledger .detail { display: block; color: var(--bone-3); font-size: 13.5px; font-weight: 400; margin-top: 4px; max-width: 54ch; }
.ledger .value { color: var(--bone-2); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px; }
.ledger .value.safe { color: var(--safe); }
.ledger .value.charged { color: var(--charged); }
@media (max-width: 560px) {
  .ledger li { flex-direction: column; gap: 6px; }
  .ledger .value { align-self: flex-start; }
}

/* Steps ------------------------------------------------------------------- */

.steps { border-top: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--hair); }
.step .n { font-size: 14px; color: var(--bone-3); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.step p { margin: 8px 0 0; font-size: 15.5px; }
@media (max-width: 560px) { .step { grid-template-columns: 40px 1fr; gap: 14px; } }

/* The day simulator ------------------------------------------------------- */

.sim { border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
.sim-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--hair); background: var(--ink-raised);
  flex-wrap: wrap;
}
.sim-day { font-size: 14px; color: var(--bone-2); font-variant-numeric: tabular-nums; }
.sim-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bone-2); }
.sim-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bone-4); transition: background-color 0.4s var(--ease); }
.sim-body { padding: clamp(20px, 3vw, 32px) 18px; }

.sim-rows { list-style: none; margin: 0; padding: 0; }
.sim-rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  font-size: 14.5px;
}
.sim-rows li.on { opacity: 1; transform: none; }
.sim-rows .k { color: var(--bone); }
.sim-rows .t { color: var(--bone-3); font-size: 13px; display: block; margin-top: 3px; }
.sim-rows .v { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bone-2); }
.sim-foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 18px; border-top: 1px solid var(--hair); }

/* Callouts ---------------------------------------------------------------- */

.note { border-left: 2px solid var(--safe); background: var(--ink-raised); padding: 20px 22px; border-radius: 0 4px 4px 0; margin-top: 32px; }
.note.warn { border-left-color: var(--risk); }
.note p { margin: 0; font-size: 15px; max-width: none; }

/* Legal pages ------------------------------------------------------------- */

.legal { padding: clamp(48px, 8vw, 88px) 0 40px; max-width: 720px; }
.legal h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.04em; }
.legal h2 { margin: 46px 0 14px; font-size: 22px; }
.legal p, .legal li { color: var(--bone-2); }
.legal ul { padding-left: 20px; max-width: 60ch; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--bone-3); font-size: 13.5px; margin-top: 14px; }
.legal .lead { font-size: 19px; }

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

footer {
  border-top: 1px solid var(--hair); padding: 34px 0 60px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  justify-content: space-between; font-size: 13.5px; color: var(--bone-3);
}
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--bone-3); text-decoration: none; }
footer a:hover { color: var(--bone); }

/* Motion off -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal, .hero h1 .l, .sim-rows li { opacity: 1 !important; transform: none !important; }
}