/* ══════════════════════════════════════════════════════════════════════════
   METRA — the funnel  ·  welcome, services, pricing, auth, onboarding, pay
   ──────────────────────────────────────────────────────────────────────────
   These six screens are the only pages a stranger sees, so they carry more
   voice than a desk does — but they are still the same instrument. The rules
   mt-brand.css sets hold here too: colour carries data, hairlines over boxes,
   no glow and no gradients. What changes is scale. A desk whispers at 11px
   because it is dense; a front door can speak at 56px because it has one
   thing to say.

   The device is the RULE: a hairline with a mono label sitting on it, the way
   a measuring instrument is labelled. It appears as a section divider, as the
   spine of the pricing table, as the axis of the plan ladder. Everything else
   is type and space.

   Mobile first. Every grid below starts as one column and only widens when
   there is room to widen into.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --fn-gut: 20px;
  --fn-max: 1180px;
  --fn-rule: 1px solid var(--line);
}
@media (min-width: 760px) { :root { --fn-gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.fn {
  background: var(--s-canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.fn-wrap { width: 100%; max-width: var(--fn-max); margin: 0 auto; padding: 0 var(--fn-gut); }

/* ── the rule ──────────────────────────────────────────────────────────────
   A labelled hairline. The label sits ON the line, not above it, so the line
   reads as an axis rather than as a border someone forgot to remove. */
.fn-rule {
  display: flex; align-items: center; gap: 14px;
  border-top: var(--fn-rule);
  padding-top: 11px; margin-top: 56px; margin-bottom: 22px;
}
.fn-rule > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
.fn-rule > b {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--ink-4); font-weight: 400;
}

/* ── header ───────────────────────────────────────────────────────────────── */
/* opaque, not frosted: a bitmap interface has no glass in it */
.fn-top {
  position: sticky; top: 0; z-index: 40;
  background: #000;
  border-bottom: var(--fn-rule);
}
.fn-top-in { display: flex; align-items: center; gap: 10px; height: 58px; }
.fn-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
/* the mark is 9 pixels wide by 7 tall; forcing it square would stretch it */
.fn-brand svg { width: 28px; height: auto; flex: none; image-rendering: pixelated; }
/* the wordmark never wraps; on a phone the second word steps down instead */
.fn-brand b { font-size: 15px; font-weight: 600; white-space: nowrap; }
@media (max-width: 460px) { .fn-brand b { font-size: 13px; } }
.fn-brand span {
  font-family: var(--pixel-label); font-size: 9px;
  color: var(--ink-4); padding-left: 9px;
  margin-left: 2px; border-left: var(--fn-rule); align-self: stretch;
  display: flex; align-items: center;
}
@media (max-width: 520px) { .fn-brand span { display: none; } }
.fn-top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* 36px tall inside a 58px bar: the text stays 13px, the target clears the
   floor. These were measuring 20px, which is a miss on a phone. */
.fn-top nav a {
  color: var(--ink-3); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 10px; border-radius: var(--r-ctl);
}
.fn-top nav a:hover { color: var(--ink); background: var(--s-raised); }
.fn-top nav a[aria-current] { color: var(--ink); }
.fn-top nav a.fn-hide-sm { display: none; }
@media (min-width: 720px) { .fn-top nav a.fn-hide-sm { display: inline-flex; } }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.fn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; white-space: nowrap;
  border: var(--fn-rule); border-radius: var(--r-ctl);
  background: var(--s-raised); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .12s var(--e), border-color .12s var(--e), color .12s var(--e);
}
.fn-btn:hover { background: var(--s-raised-2); border-color: var(--line-solid); }
.fn-btn.pri { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.fn-btn.pri:hover { background: #fff; border-color: #fff; }
.fn-btn.acc { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fn-btn.acc:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.fn-btn.ghost { background: none; }
.fn-btn.sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.fn-btn.wide { width: 100%; }
.fn-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fn-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
/* top only: the shorthand used to zero .fn-wrap's side gutter, so on a phone
   the whole hero sat on the screen's edge while the header kept 20px */
.fn-hero { padding-top: 34px; }
@media (min-width: 900px) { .fn-hero { padding-top: 84px; } }

.fn-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text);
  border: var(--fn-rule); border-radius: var(--r-pill);
  padding: 5px 11px; margin-bottom: 26px;
}
/* a lit pixel, not a dot */
.fn-eyebrow i {
  width: 6px; height: 6px; background: var(--live);
  animation: fn-beat 2.4s steps(1, end) infinite;
}
@keyframes fn-beat { 0%,70%,100% { opacity: 1 } 85% { opacity: .25 } }

/* A bitmap face carries more width per character than the sans did, so the
   same clamp that fitted IBM Plex overflows here. Smaller, and looser. */
h1.fn-h1 {
  font-size: clamp(27px, 6.4vw, 52px);
  line-height: 1.16; letter-spacing: 0; font-weight: 600;
  max-width: 17ch; text-wrap: balance;
}
/* the second sentence is a counterpoint, so it gets its own line rather than
   trailing the first one mid-flow */
h1.fn-h1 em { font-style: normal; color: var(--ink-4); display: block; }
.fn-lede {
  margin-top: 20px; max-width: 54ch;
  font-size: clamp(15px, 2.4vw, 18px); line-height: 1.65; color: var(--ink-2);
}
.fn-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ── the strip: live figures under the hero ───────────────────────────────── */
.fn-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: var(--fn-rule); border-radius: var(--r-card);
  margin-top: 44px; overflow: hidden;
}
@media (min-width: 680px) { .fn-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fn-cell { background: var(--s-raised); padding: 15px 16px 14px; }
.fn-cell span {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.fn-cell b {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: clamp(19px, 4.4vw, 26px); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.fn-cell small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-4); }
.fn-cell b.up { color: var(--up); } .fn-cell b.down { color: var(--down); }

/* ── feature grid ─────────────────────────────────────────────────────────── */
.fn-grid { display: grid; gap: 1px; background: var(--line);
  border: var(--fn-rule); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 640px) { .fn-grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .fn-grid.three { grid-template-columns: repeat(3, 1fr); } }

.fn-tile { background: var(--s-raised); padding: 22px 20px; display: flex; flex-direction: column; gap: 9px; }
.fn-tile > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.fn-tile h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.fn-tile p { font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }

/* ── services list ────────────────────────────────────────────────────────── */
.fn-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fn-chip {
  min-height: 32px; padding: 0 12px; border: var(--fn-rule); border-radius: var(--r-pill);
  background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; cursor: pointer;
}
.fn-chip:hover { color: var(--ink); border-color: var(--line-solid); }
.fn-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--s-canvas); }

.fn-svc { border: var(--fn-rule); border-radius: var(--r-card); overflow: hidden; }
.fn-svc-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  /* aligned to the first line, not to the block: centring made the code drift
     half a row away from the name it labels whenever the name wrapped */
  align-items: start; gap: 12px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-2);
  background: var(--s-raised); text-decoration: none; color: inherit;
}
.fn-svc-row:last-child { border-bottom: 0; }
.fn-svc-row:hover { background: var(--s-raised-2); }
.fn-svc-row .code {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-4);
  padding-top: 2px;
}
/* name and rank share a line; the group sits under them. Both were inline
   spans, which ran the desk name straight into its group on a phone. */
.fn-svc-row .name { display: inline; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.fn-svc-row .grp { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.fn-svc-row .rank {
  display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--accent-text);
  border: var(--fn-rule); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 7px;
  vertical-align: 1px; white-space: nowrap;
}

.fn-tiers { display: flex; gap: 4px; }
/* A filled block reads as "included" faster than a tick does, and it is the
   same shape the mark is drawn from. An empty box is the absence. */
.fn-mark {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: var(--fn-rule); color: var(--ink-4);
  font-family: var(--pixel); font-size: 9px;
}
.fn-mark::before { content: ""; width: 10px; height: 10px; }
.fn-mark.yes { border-color: var(--up); }
.fn-mark.yes::before { background: var(--up); }
.fn-mark.no { border-color: var(--line); }
.fn-mark.no::before { background: repeating-linear-gradient(
  45deg, var(--line-solid) 0 1px, transparent 1px 3px); }

/* ── pricing ──────────────────────────────────────────────────────────────── */
.fn-toggle {
  display: inline-flex; border: var(--fn-rule); border-radius: var(--r-ctl);
  overflow: hidden; margin-bottom: 22px;
}
.fn-toggle button {
  min-height: 36px; padding: 0 16px; border: 0; background: none;
  color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer;
}
.fn-toggle button + button { border-left: var(--fn-rule); }
.fn-toggle button[aria-pressed="true"] { background: var(--s-raised-2); color: var(--ink); }

.fn-plans { display: grid; gap: 14px; }
@media (min-width: 900px) { .fn-plans { grid-template-columns: repeat(3, 1fr); gap: 0;
  border: var(--fn-rule); border-radius: var(--r-card); overflow: hidden; } }

.fn-plan {
  border: var(--fn-rule); border-radius: var(--r-card);
  background: var(--s-raised); padding: 24px 22px 22px;
  display: flex; flex-direction: column;
}
@media (min-width: 900px) {
  .fn-plan { border: 0; border-right: var(--fn-rule); border-radius: 0; }
  .fn-plan:last-child { border-right: 0; }
}
.fn-plan.now { background: var(--s-raised-2); }
.fn-plan .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.fn-plan.pick .tag { color: var(--accent-text); }
.fn-plan h2 { font-size: 26px; font-weight: 600; letter-spacing: 0; margin-top: 6px; }
.fn-price {
  display: flex; align-items: baseline; gap: 6px; margin-top: 16px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.fn-price b { font-size: clamp(26px, 5.6vw, 32px); font-weight: 500; letter-spacing: 0; }
.fn-price span { font-size: 12px; color: var(--ink-4); }
.fn-plan .note { font-size: 12px; color: var(--ink-4); margin-top: 5px; min-height: 1.4em; }
.fn-plan .fn-btn { margin-top: 18px; }
.fn-feat { list-style: none; margin-top: 20px; padding-top: 16px; border-top: var(--fn-rule); display: grid; gap: 9px; }
.fn-feat li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.fn-feat li::before { content: "—"; color: var(--ink-4); font-family: var(--mono); flex: none; }
.fn-feat li.on::before { content: "✓"; color: var(--up); }
.fn-feat li.off { color: var(--ink-4); }

.fn-locked {
  border-left: 2px solid var(--accent); background: var(--accent-wash);
  padding: 13px 16px; border-radius: var(--r-ctl); margin-bottom: 24px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.fn-locked b { color: var(--ink); font-weight: 600; }

/* ── auth + forms ─────────────────────────────────────────────────────────── */
.fn-auth { display: grid; min-height: 100dvh; }
@media (min-width: 940px) { .fn-auth { grid-template-columns: 1fr 1fr; } }
.fn-auth-side { display: none; border-right: var(--fn-rule); padding: 44px 40px;
  flex-direction: column; justify-content: space-between; background: var(--s-sunken); }
@media (min-width: 940px) { .fn-auth-side { display: flex; } }
.fn-auth-main { display: grid; place-items: center; padding: 32px var(--fn-gut) 48px; }
.fn-card { width: min(420px, 100%); }
.fn-card h1 { font-size: 28px; font-weight: 600; letter-spacing: 0; }
.fn-card > p.sub { color: var(--ink-3); font-size: 14px; margin-top: 7px; margin-bottom: 26px; }

.fn-field { display: block; margin-bottom: 15px; }
.fn-field > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.fn-field input, .fn-field select, .fn-field textarea {
  width: 100%; min-height: 44px; padding: 0 13px;
  border: var(--fn-rule); border-radius: var(--r-ctl);
  background: var(--s-sunken); color: var(--ink); font: inherit; font-size: 15px;
}
.fn-field textarea { padding: 11px 13px; min-height: 90px; resize: vertical; }
.fn-field input:focus, .fn-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fn-field .hint { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 5px; line-height: 1.55; }
.fn-msg { font-size: 13px; line-height: 1.6; margin-top: 14px; min-height: 1.4em; }
.fn-msg.err { color: var(--down); } .fn-msg.ok { color: var(--up); }
.fn-alt { margin-top: 22px; padding-top: 18px; border-top: var(--fn-rule);
  font-size: 13px; color: var(--ink-4); }
/* Inside a sentence, colour alone is not enough to mark a link — underline it
   and let hover remove the underline instead of adding one. */
.fn-alt a, .fn-link { color: var(--accent-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
.fn-alt a:hover, .fn-link:hover { color: var(--accent-bright); text-decoration-thickness: 2px; }

/* ── onboarding ───────────────────────────────────────────────────────────── */
.fn-steps { display: flex; gap: 6px; margin-bottom: 30px; }
.fn-steps i {
  flex: 1; height: 2px; background: var(--line-solid); border-radius: 2px;
  transition: background .3s var(--e);
}
.fn-steps i.on { background: var(--accent); }
.fn-step { display: none; }
.fn-step.on { display: block; animation: fn-in .32s var(--e) both; }
.fn-pick { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 620px) { .fn-pick.two { grid-template-columns: 1fr 1fr; } }
.fn-opt {
  text-align: left; border: var(--fn-rule); border-radius: var(--r-card);
  background: var(--s-raised); padding: 15px 16px; cursor: pointer;
  color: var(--ink); font: inherit; display: grid; gap: 4px;
}
.fn-opt:hover { border-color: var(--line-solid); background: var(--s-raised-2); }
.fn-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.fn-opt b { font-size: 14.5px; font-weight: 600; }
.fn-opt span { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* ── checkout / QRIS ──────────────────────────────────────────────────────── */
.fn-pay { display: grid; gap: 20px; align-items: start; }
@media (min-width: 880px) { .fn-pay { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; } }
.fn-panel { border: var(--fn-rule); border-radius: var(--r-card); background: var(--s-raised); overflow: hidden; }
.fn-panel > h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 400; padding: 13px 17px; border-bottom: var(--fn-rule);
}
.fn-panel > .in { padding: 18px 17px; }
.fn-lines { display: grid; gap: 11px; }
.fn-line { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; }
.fn-line span { color: var(--ink-3); }
.fn-line b { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.fn-line.total { border-top: var(--fn-rule); padding-top: 12px; margin-top: 3px; font-size: 15px; }
.fn-line.total b { font-size: 19px; }
.fn-line.cut b { color: var(--up); }

.fn-qr {
  display: grid; place-items: center; gap: 14px; padding: 22px 17px;
  border-bottom: var(--fn-rule);
}
.fn-qr-box {
  width: min(248px, 72vw); aspect-ratio: 1; background: #fff; border-radius: var(--r-card);
  padding: 12px; display: grid; place-items: center;
}
.fn-qr-box img, .fn-qr-box canvas, .fn-qr-box svg { width: 100%; height: 100%; }
/* This sits inside the white QR plate, not on the dark page, so it takes a
   dark ink of its own — var(--ink-4) on white fails contrast. */
.fn-qr-wait { display: grid; place-items: center; gap: 10px; color: #55595F;
  font-size: 12.5px; text-align: center; padding: 0 10px; }
.fn-count {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.fn-state {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 13px 17px;
  border-top: var(--fn-rule); color: var(--ink-2);
}
.fn-state i { width: 7px; height: 7px; background: var(--warn); flex: none;
  animation: fn-beat 1.6s steps(1, end) infinite; }
.fn-state.paid { color: var(--up); } .fn-state.paid i { background: var(--up); animation: none; }
.fn-state.dead { color: var(--down); } .fn-state.dead i { background: var(--down); animation: none; }

.fn-how { counter-reset: s; display: grid; gap: 11px; list-style: none; }
.fn-how li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px;
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}
.fn-how li::before {
  counter-increment: s; content: counter(s);
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  border: var(--fn-rule); border-radius: var(--r-ctl); height: 22px;
  display: grid; place-items: center;
}

/* ── footer ───────────────────────────────────────────────────────────────── */
.fn-foot { border-top: var(--fn-rule); margin-top: 70px; padding: 26px 0 40px;
  color: var(--ink-4); font-size: 12.5px; }
.fn-foot-in { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.fn-foot a { color: var(--ink-3); text-decoration: none; }
.fn-foot a:hover { color: var(--ink); text-decoration: underline; }
.fn-foot .sp { margin-left: auto; }

/* ── reveal ───────────────────────────────────────────────────────────────── */
@keyframes fn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv { animation: fn-in .5s var(--e) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .rv, .fn-step.on { animation: none; }
  .fn-eyebrow i, .fn-state i { animation: none; }
  * { transition: none !important; }
}

[hidden] { display: none !important; }
.fn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fn-skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--s-canvas); padding: 10px 14px; border-radius: var(--r-ctl);
}
.fn-skip:focus { left: 12px; top: 12px; }

/* ── locked ────────────────────────────────────────────────────────────────
   A desk the reader's plan does not include has to say three things at once:
   that it is locked, that this is a state and not an error, and which plan
   opens it. Dimming alone says the first and neither of the others, so the
   lock glyph and the plan name always travel together.

   The glyph is drawn on the same pixel grid as the mark. It is decorative:
   the row already carries the word "Terkunci" for anyone not looking at it. */
.fn-lock {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--pixel); font-size: 9px; color: var(--ink-4);
  border: 1px solid var(--line); padding: 3px 7px 3px 5px;
  white-space: nowrap;
}
.fn-lock svg { width: 9px; height: auto; image-rendering: pixelated; flex: none; }
.fn-lock.pro { color: var(--ink-2); border-color: var(--line-solid); }
.fn-lock.max { color: var(--ink); border-color: var(--ink-3); }

.fn-svc-row.locked .name { color: var(--ink-3); }
.fn-svc-row.locked .code { opacity: .6; }
/* a hatched left edge: the row is present but fenced */
.fn-svc-row.locked {
  background:
    repeating-linear-gradient(45deg, var(--line-2) 0 2px, transparent 2px 5px) left / 3px 100% no-repeat,
    var(--s-raised);
}
.fn-svc-row.open .name { color: var(--ink); }

.fn-feat li.locked { color: var(--ink-4); }
.fn-feat li.locked::before { content: ""; }
.fn-feat li.locked .fn-lock { margin-right: 2px; }

/* the paywall note at the top of pricing, when the gate sent someone here */
.fn-locked {
  border: 1px solid var(--line-solid); border-left-width: 4px;
  background: var(--s-raised); padding: 15px 17px;
}
.fn-locked .fn-lock { margin-bottom: 8px; }
.fn-locked b { color: var(--ink); font-weight: 600; }

/* ── pixel furniture ──────────────────────────────────────────────────────── */
/* The strip cells and tiles get a one-pixel corner tick, the way a bitmap UI
   marks a frame. Cheap, and it ties the panels to the mark. */
.fn-cell, .fn-tile { position: relative; }
.fn-cell::after, .fn-tile::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 3px; height: 3px; background: var(--line-solid);
}

/* Silkscreen sits high in its box; headings need their own leading here. */
h1.fn-h1 { letter-spacing: 0; line-height: 1.14; }
.fn-plan h2, .fn-card h1, .fn-tile h3 { letter-spacing: 0; }
.fn-price b { letter-spacing: 0; }

/* the header row of the comparison grid labels the columns, so it keeps its
   letter rather than drawing a block */
.fn-mark.hd { border-color: transparent; color: var(--ink-4); }
.fn-mark.hd::before { display: none; }

/* a locked line inside a plan card: the padlock replaces the bullet */
.fn-feat li.locked { color: var(--ink-4); align-items: center; }
.fn-feat li.locked svg { width: 9px; height: auto; flex: none; image-rendering: pixelated; }

/* the badge sits on its own line under the group name, not trailing it */
.fn-svc-row .grp .fn-lock { display: inline-flex; margin-top: 5px; }

/* ── reach ─────────────────────────────────────────────────────────────────
   Measured at 390px: footer links were 20px tall and the brand 21px. The text
   stays that size, because the footer is meant to be quiet; the target does
   not, because a 20px target is a miss. */
.fn-foot a, .fn-brand, .fn-alt a, .fn-link { position: relative; }
.fn-foot a::after, .fn-alt a::after, .fn-link::after {
  content: ""; position: absolute; inset: -12px -6px;
}
.fn-brand::after { content: ""; position: absolute; inset: -10px -4px; }
.fn-foot-in { gap: 18px 22px; }
@media (max-width: 520px) { .fn-foot-in { gap: 20px 18px; } }

/* The footer pads were painting behind the footer row, so a press just above a
   link landed on the container instead of the link. */
.fn-foot a, .fn-alt a, .fn-link { z-index: 1; }
/* No negative z-index here: behind the link means behind the footer's own
   background too, and elementFromPoint then answers with the container. The
   pad is transparent, so painting above costs nothing. */
.fn-foot a::after, .fn-alt a::after, .fn-link::after { inset: -13px -8px; }

/* ── breathing room ─────────────────────────────────────────────────────────
   Measured at 1440 and 390: a desk's group ran straight into its padlock with
   nothing between them, because .grp was a block and the badge an inline box
   inside it. Laying .grp out as a row gives the pair a real gap and lets the
   badge drop to its own line on a phone rather than being squeezed. The tier
   marks and the rank were 4px and 7px from their neighbours; both now clear
   the eight pixel minimum the rest of the interface keeps. */
.fn-svc-row .grp {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 10px; margin-top: 5px;
}
.fn-svc-row .grp .fn-lock { margin-top: 0; }
.fn-svc-row .rank { margin-left: 10px; }
.fn-tiers { gap: 6px; }
.fn-feat li.locked .fn-lock { margin-right: 0; margin-left: 4px; }
/* the plan chip beside the wordmark in the header */
.fn-brand b + span, .fn-brand > span:last-child:not(:first-child) { margin-left: 8px; }
.fn-lock { gap: 6px; padding: 4px 8px 4px 6px; }

/* ══ hero instrument ════════════════════════════════════════════════════════
   The hero used to be a column of text with half the screen empty beside it.
   The right half is now an instrument: BTC's last 96 hours drawn on the pixel
   grid, one cell at a time, with a scan line that keeps passing over it. */
.fn-hero-viz {
  margin: 30px 0 0; padding: 0;
  border: 1px solid var(--line); background: var(--s-canvas, #000);
  display: flex; flex-direction: column; min-width: 0;
}
.fn-hero-viz[hidden] { display: none; }
.hv-top, .hv-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; min-height: 40px; box-sizing: border-box;
}
.hv-top { border-bottom: 1px solid var(--line); }
.hv-foot { border-top: 1px solid var(--line); }
.hv-pair, .hv-lbl {
  font-family: var(--pixel-label); font-size: 10px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.hv-live { width: 6px; height: 6px; background: var(--up); flex: none; }
.hv-px {
  margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.hv-ch { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 7ch; text-align: end; }
.hv-ch.up { color: var(--up); } .hv-ch.down { color: var(--down); }
#hvCanvas { display: block; width: 100%; height: 240px; image-rendering: pixelated; }
.hv-cells { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; height: 10px; }
.hv-cells i { flex: 1 1 0; min-width: 2px; background: var(--line-2, #1a1a1a); }
.hv-cells i.up { background: var(--up); } .hv-cells i.down { background: var(--down); }
.hv-num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .hv-live { animation: hvBlink 1.6s steps(1, end) infinite; }
}
@keyframes hvBlink { 0%, 59% { opacity: 1 } 60%, 100% { opacity: .2 } }

/* Two columns once there is room: words on the left, the instrument on the
   right across the height of the heading, lede and buttons. The figures strip
   and the headline keep the full width underneath. */
@media (min-width: 1100px) {
  .fn-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px; align-items: start;
  }
  .fn-hero > * { grid-column: 1; }
  .fn-hero > .fn-hero-viz { grid-column: 2; grid-row: 1 / span 4; margin-top: 4px; align-self: center; }
  .fn-hero > .fn-strip, .fn-hero > #headline { grid-column: 1 / -1; }
  #hvCanvas { height: 300px; }
}
@media (min-width: 1100px) {
  /* grid items stretch by default; the eyebrow pill and the button row do not */
  .fn-hero > .fn-eyebrow, .fn-hero > .fn-cta { justify-self: start; }
}

/* ══ buying a plan: where you are ══════════════════════════════════════════ */
.fn-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line);
}
.fn-steps li {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 10px; color: var(--ink-4);
  font-family: var(--pixel-label); font-size: 9px; letter-spacing: .04em;
}
.fn-steps li + li { border-left: 1px solid var(--line); }
.fn-steps li b {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border: 1px solid var(--line-solid, #333);
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-3);
}
.fn-steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-steps li.on { color: var(--ink); background: var(--s-raised); }
.fn-steps li.on b { background: var(--ink); border-color: var(--ink); color: var(--s-canvas, #000); }
.fn-steps li.done { color: var(--ink-3); }
.fn-steps li.done b { border-color: var(--up); color: var(--up); }
.fn-intent {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 22px;
  font-size: 13px; color: var(--ink-3);
}
.fn-intent b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fn-intent a { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* ══ services hero: terminal map ════════════════════════════════════════════ */
.sv-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sv-map { padding: 18px 14px 12px; min-height: 230px; display: flex; align-items: flex-end; }
.sv-cols { display: flex; align-items: flex-end; gap: 10px; width: 100%; justify-content: space-between; }
.sv-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.sv-stack { display: flex; flex-direction: column-reverse; gap: 4px; align-items: center; }
.sv-c {
  display: block; width: 20px; height: 20px; box-sizing: border-box;
  border: 1px solid var(--line-solid, #333); background: transparent;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .2s steps(3, end), transform .2s steps(3, end), background .25s steps(2, end), border-color .25s steps(2, end);
}
.sv-c.in { opacity: 1; transform: none; }
/* open desks fill; the colour says which plan first opens them */
.sv-c.on.t-free { background: var(--ink-3, #9aa0a6); border-color: var(--ink-3, #9aa0a6); }
.sv-c.on.t-pro  { background: var(--ink, #fff); border-color: var(--ink, #fff); }
.sv-c.on.t-max  { background: var(--up); border-color: var(--up); }
/* locked: hatched, like the catalogue's locked marks */
.sv-c:not(.on) { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line, #262626) 3px 4px); }
.sv-c.cur { outline: 2px solid var(--ink, #fff); outline-offset: 2px; }
.sv-g { font-family: var(--pixel-label); font-size: 8px; color: var(--ink-4); white-space: nowrap; }
.sv-foot { flex-wrap: wrap; row-gap: 6px; }
.sv-tier {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--line); font-family: var(--pixel-label); font-size: 9px; color: var(--ink-4);
}
.sv-tier::before { content: ''; width: 8px; height: 8px; background: var(--ink-3); }
.sv-tier[data-t="pro"]::before { background: var(--ink); }
.sv-tier[data-t="max"]::before { background: var(--up); }
.sv-tier.now { color: var(--ink); border-color: var(--ink-3); background: var(--s-raised); }
.sv-read {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
  font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden;
}
.sv-read b { font-family: var(--mono); color: var(--ink); }
.sv-read span { overflow: hidden; text-overflow: ellipsis; }
.sv-read em { font-style: normal; font-family: var(--pixel-label); font-size: 9px; color: var(--ink-4); }
@media (max-width: 520px) {
  .sv-c { width: 14px; height: 14px; }
  .sv-cols { gap: 4px; }
  .sv-read { margin-left: 0; width: 100%; }
}

/* ══ pricing hero: LED matrix ══════════════════════════════════════════════
   After Base's dot-matrix hero: a quiet field of dots, three towers rising
   out of it, a few square accents. No frame chrome; the figure is the art. */
.fn-hero-viz.ul { border: 0; background: none; }
.ul-led { display: block; width: 100%; height: 280px; }
.ul-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.ul-lab { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ul-nm { font-family: var(--pixel-label); font-size: 10px; color: var(--ink-3); }
.ul-lab b { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ul-px { font-family: var(--mono); font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ul-lab.open .ul-px { color: var(--ink-2); }
.ul-lab[data-p="max"].open .ul-nm { color: var(--up); }
@media (min-width: 1100px) { .ul-led { height: 320px; } }
@media (max-width: 520px) { .ul-led { height: 200px; } .ul-lab b { font-size: 15px; } }

/* ══ pricing cards: pixel scenes ════════════════════════════════════════════
   After Cofounder's plan cards: each plan gets the same framed scene, and the
   scene grows with the plan. The card's full width, 16:9, nearest-neighbour. */
.fn-plan-art {
  margin: 0 0 18px; border: 1px solid var(--line); background: #04060a;
  aspect-ratio: 16 / 9; overflow: hidden;
}
.fn-scene { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* The desk stylesheet caps every <main> at 1680px with a selector that
   outranks .fn-wrap, so on Services and Pricing (whose <main> is the wrapper)
   the content ran to 1680px while the header kept the 1180px column: logo at
   170px, page at 40px. Funnel wrappers keep the funnel's column. */
html body.fn .fn-wrap { max-width: var(--fn-max); margin-inline: auto; }

/* checkout: the Terms of Use box sits right above the button it unlocks */
.fn-agree { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.fn-agree input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.fn-agree a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* terms page */
.fn-legal { max-width: 760px; padding: 34px 0 64px; }
.fn-legal h1 { margin: 0 0 8px; }
.fn-legal .fn-meta { color: var(--ink-4); font-size: 13px; margin: 0 0 28px; }
.fn-legal h2 { font-size: 17px; margin: 32px 0 10px; }
.fn-legal p, .fn-legal li { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.fn-legal ul { padding-left: 20px; margin: 8px 0; }
.fn-legal li + li { margin-top: 6px; }

/* ── welcome: the terminal, desk by desk (mt-tour.js) ─────────────────────── */
.tr-h { font-family: var(--serif) !important; font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; margin: 0 0 20px; }
.tr-tabs { display: flex; gap: 0; border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tr-tabs::-webkit-scrollbar { display: none; }
.tr-tabs button { flex: 1 0 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tr-tabs button + button { border-left: 1px solid var(--line); }
.tr-tabs button:hover { color: var(--ink); background: var(--s-raised); }
.tr-tabs button[aria-selected="true"] { background: var(--ink); color: var(--s-canvas); }
.tr-tabs button small { margin-left: 6px; font-family: var(--mono); font-size: 11px; opacity: .6; }
.tr-stage { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line); border-top: 0; }
.tr-list { list-style: none; margin: 0; padding: 8px 0; border-right: 1px solid var(--line); max-height: 560px; overflow-y: auto; }
.tr-list li { display: flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer; color: var(--ink-2); font-size: 14px; border-left: 2px solid transparent; }
.tr-list li:hover { background: var(--s-raised); color: var(--ink); }
.tr-list li[aria-selected="true"] { border-left-color: var(--ink); background: var(--s-raised); color: var(--ink); font-weight: 600; }
.tr-list li span { flex: 1; min-width: 0; }
.tr-tier { flex: none; font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 4px 6px; border: 1px solid var(--line-solid, #3D3D3D); color: var(--ink-3); font-weight: 500; }
.tr-tier.pro { color: var(--up); border-color: rgba(43,224,138,.45); }
.tr-tier.max { color: var(--warn, #FFB020); border-color: rgba(255,176,32,.45); }
.tr-shot { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tr-frame { position: relative; aspect-ratio: 16 / 9; background: #0b0b0b; border: 1px solid var(--line); overflow: hidden; }
.tr-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tr-shot figcaption { display: grid; gap: 6px; }
.tr-shot figcaption b { font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.tr-shot figcaption p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }
.tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tr-card { display: flex; flex-direction: column; background: var(--s-canvas); text-decoration: none; color: inherit; min-width: 0; }
.tr-card:hover { background: var(--s-raised); }
.tr-card .tr-frame { border: 0; border-bottom: 1px solid var(--line); }
.tr-card-b { padding: 14px 16px 16px; display: grid; gap: 6px; }
.tr-card-b b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tr-card-b b span { flex: 1; min-width: 0; }
.tr-card-b small { font-size: 12px; color: var(--ink-4); }
.tr-card-b p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .tr-stage { grid-template-columns: 1fr; }
  .tr-list { display: flex; max-height: none; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .tr-list li { flex: none; border-left: 0; border-bottom: 2px solid transparent; padding: 12px 14px; }
  .tr-list li[aria-selected="true"] { border-bottom-color: var(--ink); }
  .tr-shot { padding: 14px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .tr-grid { grid-template-columns: 1fr; } }

/* welcome is pure black: no raised grey panels, hairlines only */
.fn-welcome :is(.fn-cell, .fn-tile, .fn-plan, .fn-plan.pick, .tr-frame, .tr-card, .tr-list li, .tr-list li[aria-selected="true"], .tr-list li:hover, .tr-card:hover, .tr-tabs button:hover) { background: var(--s-canvas, #000) !important; }
.fn-welcome .fn-btn:not(.pri):not(.acc) { background: transparent; }
.fn-welcome .fn-btn:not(.pri):not(.acc):hover { background: transparent; border-color: var(--ink); }
.fn-welcome .tr-card:hover .tr-card-b b span { text-decoration: underline; text-underline-offset: 3px; }
.tr-more { justify-self: start; color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.fn-welcome .tr-tabs button { background: transparent !important; }
.fn-welcome .tr-tabs button[aria-selected="true"] { background: var(--ink) !important; color: var(--s-canvas, #000) !important; }
/* welcome: hairline grids drew lines with a grey container showing through the gap,
   so an unfilled last row became a grey block; draw the lines on the cells instead */
.fn-welcome :is(.fn-grid, .tr-grid, .fn-strip) { background: var(--s-canvas, #000) !important; }
.fn-welcome :is(.fn-grid, .tr-grid, .fn-strip) > * { box-shadow: 0 0 0 1px var(--line); }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN · a dark editorial front page, revealed through pixels
   ──────────────────────────────────────────────────────────────────────────
   Left is a front page: masthead with the day's edition, a headline in the
   display face that glitches from one line to the next (MTPixel.glitch),
   three numbers. Right is the form, set like the reply column.
   The page arrives under a black veil that lifts in dithered tiles
   (mt-pixel.js); the form follows in four beats; signing in drops the veil
   again before the terminal loads.
   ══════════════════════════════════════════════════════════════════════════ */
.mt-px-veil { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147483600; pointer-events: none; image-rendering: pixelated; }
html.lg-veiled, html.lg-veiled body { background: #000 !important; }
html.lg-veiled .fn-auth, html.lg-veiled #mt-boot { visibility: hidden !important; }

.fn-login .lg-side {
  display: none; flex-direction: column; gap: 28px; padding: 32px 40px 36px;
  background: var(--s-canvas, #000); border-right: 1px solid var(--line, #262626); min-height: 100dvh; box-sizing: border-box;
}
@media (min-width: 940px) { .fn-login .lg-side { display: flex; } }
/* on a phone the front page shrinks to its masthead and headline above the form */
@media (max-width: 939px) {
  .fn-login .lg-side { display: flex; min-height: 0; gap: 20px; padding: 24px 20px 8px; border-right: 0; }
  .fn-login .lg-lede { margin: 0; }
  .fn-login .lg-head { font-size: 34px !important; max-width: none; }
  .fn-login .lg-lede p, .fn-login .lg-stats, .fn-login .fn-card > .fn-brand { display: none; }
  .fn-login .fn-auth-main { place-items: start center; padding-top: 12px; }
}
.lg-mast { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink, #fff); }
.lg-issue { font: 500 12px/1 var(--mono, monospace); color: var(--ink-3, #A2A2A2); letter-spacing: .02em; }

.lg-lede { margin: auto 0; }
.lg-head {
  margin: 0; font-family: var(--pixel, 'Pixelify Sans') !important; font-weight: 400 !important;
  font-size: clamp(40px, 4.6vw, 76px) !important; line-height: 1.04 !important; letter-spacing: 0 !important;
  color: var(--ink, #fff); max-width: none;
}
.lg-lede p { margin: 18px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.7; color: var(--ink-3, #A2A2A2); }
.lg-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line, #262626); }
.lg-stats > div { padding: 14px 0 0; }
.lg-stats > div + div { padding-left: 20px; border-left: 1px solid var(--line, #262626); }
.lg-stats dt { font-size: 12px; color: var(--ink-4, #8C8C8C); }
.lg-stats dd { margin: 6px 0 0; font: 500 24px/1 var(--mono, monospace); color: var(--ink, #fff); }

/* the form: the reply column */
.fn-login .fn-auth-main { background: var(--s-canvas, #000); }
.fn-login .fn-card { background: transparent !important; border: 0 !important; padding: 0 !important; width: min(400px, 100%); }
.fn-login .fn-card h1 { font-family: var(--pixel, 'Pixelify Sans') !important; font-weight: 400 !important; font-size: 44px !important; line-height: 1 !important; margin: 0; }
.fn-login .fn-card > p.sub { font-size: 15px; margin: 12px 0 32px; }
.fn-login .fn-field input { height: 48px !important; font-size: 15px !important; }
.fn-login .fn-btn.pri.wide { height: 48px !important; font-size: 15px !important; }
@media (min-width: 940px) { .fn-login .fn-card > .fn-brand { display: none; } }

/* four beats after the veil: title, line, fields, the rest */
@media (prefers-reduced-motion: no-preference) {
  html.lg-in .fn-login .fn-card > * { animation: lgBeat .36s steps(6, end) both; }
  html.lg-in .fn-login .fn-card > h1 { animation-delay: .38s; }
  html.lg-in .fn-login .fn-card > .sub { animation-delay: .46s; }
  html.lg-in .fn-login .fn-card > form { animation-delay: .54s; }
  html.lg-in .fn-login .fn-card > .fn-alt { animation-delay: .62s; }
  html.lg-in .fn-login .lg-mast, html.lg-in .fn-login .lg-lede, html.lg-in .fn-login .lg-stats { animation: lgBeat .36s steps(6, end) both; }
  html.lg-in .fn-login .lg-lede { animation-delay: .2s; }
  html.lg-in .fn-login .lg-stats { animation-delay: .3s; }
}
@keyframes lgBeat { from { opacity: 0; transform: translateY(12px); } }

/* SIGN UP · the same front page (body.fn-login.fn-register), with the plan's list under the headline */
.fn-register .lg-tag { margin: 0 0 18px; }
.fn-register .lg-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ink-3, #A2A2A2); }
.fn-register .lg-list li { padding-left: 16px; position: relative; }
.fn-register .lg-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent, #D97706); }
.fn-register .lg-foot { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink-4, #8C8C8C); max-width: 46ch; padding-top: 14px; border-top: 1px solid var(--line, #262626); }
@media (max-width: 939px) { .fn-register :is(.lg-list, .lg-foot, .lg-tag) { display: none; } }


/* market switch in the funnel header (MF.top): Crypto | Forex, like the terminal's */
.fn-mkt { display: inline-flex; border: 1px solid var(--line-solid, #333); margin-left: 16px; margin-right: auto; flex: none; }
.fn-mkt button { height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-3, #A2A2A2); font: 500 13px/1 var(--sans, sans-serif); cursor: pointer; }
.fn-mkt button + button { border-left: 1px solid var(--line, #262626); }
.fn-mkt button:hover { color: var(--ink, #fff); }
.fn-mkt button[aria-pressed="true"] { background: var(--ink, #fff); color: var(--s-canvas, #000); }
.fn-mkt button:focus-visible { outline: 2px solid var(--accent, #D97706); outline-offset: 2px; }
@media (max-width: 560px) { .fn-mkt { margin-left: 10px; } .fn-mkt button { padding: 0 9px; font-size: 12px; } }

/* ══ SIGN IN / SIGN UP v2 · the form is a card, every action is a control ══
   Review: "Masuk", "Sudah punya akun?", "Lupa password", "Ubah" and "Buat
   akun" went unnoticed, and the page read like newsprint (a white rule under
   the masthead, hairlines between figures, grey small print for the links).
   Now: the form sits on a card (#161616, #313131 edge) on the #090909 canvas;
   labels are 14px near-white; "Lupa password?" sits on the password label in
   amber; the other way in (sign up / sign in) is a full-width outlined button
   under a labelled divider; "Ubah" is a button. Buttons are set in the sans,
   as in the terminal. The left page loses its white rule; its figures are
   small cards. */
.fn-login .fn-auth-main { background: #090909; }
.fn-login .lg-side { background: #090909; border-right-color: #262626; }
html body.fn-login .fn-card { background: #161616 !important; border: 1px solid #313131 !important; padding: 36px 36px 32px !important; width: min(440px, 100%); }
html body.fn-login .fn-card h1 { font-weight: 500 !important; font-size: 40px !important; color: #fff; }
.fn-login .fn-card > p.sub { font-size: 15.5px; line-height: 1.5; color: #D4D4D4 !important; margin: 12px 0 28px; }
.fn-login .fn-field { margin-bottom: 18px; }
html body.fn-login :is(.fn-field > span:not(.hint), .fn-lab) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 500 14px/1.3 var(--sans) !important; color: #EDEDED; margin-bottom: 8px; }
.fn-login .fn-lab label { color: inherit; font: inherit; }
html body.fn-login .fn-field input { background: #0C0C0C !important; border: 1px solid #3F3F3F !important; color: #fff !important; padding: 0 14px; }
html body.fn-login .fn-field input:hover { border-color: #5A5A5A !important; }
html body.fn-login .fn-field input:focus { outline: 2px solid var(--amber, #D97706) !important; outline-offset: 0; border-color: var(--amber, #D97706) !important; }
.fn-login .fn-field input::placeholder { color: #707070; }
html body.fn-login .fn-field .hint { font: 400 12.5px/1.5 var(--sans) !important; color: #A8A8A8; margin-top: 7px; }
html body .lg-forgot { font: 500 14px/1.3 var(--sans) !important; color: var(--amber, #D97706) !important; text-decoration: underline; text-underline-offset: 3px; }
html body .lg-forgot:hover { color: #F59E0B !important; }
html body.fn-login .fn-btn { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 16px !important; min-height: 50px; }
html body.fn-login .fn-btn * { font-family: inherit !important; }
.fn-login .fn-btn.pri.wide { height: 50px !important; margin-top: 6px; }
.fn-login .fn-msg { font-size: 14px; }

/* the other way in */
.lg-switch { margin-top: 28px; }
.lg-or { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font: 500 14px/1 var(--sans); color: #D4D4D4; white-space: nowrap; }
.lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: #333; }
html body.fn-login .lg-switch .fn-btn { background: transparent !important; color: #fff !important; border: 1px solid #6A6A6A !important; }
html body.fn-login .lg-switch .fn-btn:hover { background: #fff !important; color: #090909 !important; border-color: #fff !important; }
.lg-closed { margin: 0; font-size: 14px; line-height: 1.5; color: #A8A8A8; text-align: center; }

/* paying for a plan (sign-up): the steps and the plan line, legible */
.fn-login .fn-steps { border-color: #333; margin-bottom: 14px; }
html body.fn-login .fn-steps li { font: 500 13px/1.2 var(--sans) !important; color: #A8A8A8; padding: 11px 12px; }
.fn-login .fn-steps li + li { border-left-color: #333; }
.fn-login .fn-steps li.on { color: #fff; background: #242424; }
.fn-login .fn-steps li b { width: 20px; height: 20px; font-size: 11px; border-color: #555; color: #D4D4D4; }
.fn-login .fn-intent { align-items: center; padding: 12px 14px; background: #0C0C0C; border: 1px solid #333; margin: 0 0 28px; font-size: 14px; color: #D4D4D4; }
.fn-login .fn-intent b { font-size: 15px; }
html body.fn-login .fn-intent a { margin-left: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #6A6A6A;
  color: #fff !important; font: 600 13.5px/1 var(--sans) !important; text-decoration: none; }
html body.fn-login .fn-intent a:hover { background: #fff; color: #090909 !important; }

/* the front page on the left */
.lg-mast { border-bottom: 1px solid #262626; }
html body .lg-issue { font: 500 12.5px/1 var(--mono) !important; color: #A8A8A8 !important; }
html body .lg-head { font-weight: 500 !important; }
html body.fn-login .lg-lede p { font-size: 16px; color: #D4D4D4 !important; }
.lg-stats { gap: 12px; border-top: 0; }
.lg-stats > div, .lg-stats > div + div { background: #161616; border: 1px solid #313131; padding: 16px 18px; }
.lg-stats dt { font-size: 13px; color: #A8A8A8; }
.lg-stats dd { font-size: 26px; }
.fn-register .lg-list { font-size: 15px; color: #D4D4D4; gap: 12px; }
.fn-register .lg-foot { border-top: 0; padding-top: 0; font-size: 13px; color: #A8A8A8; }
html body.fn-register .lg-tag { font: 500 13px/1 var(--sans) !important; color: #D4D4D4; border-color: #333; }

@media (max-width: 939px) {
  html body.fn-login .fn-card { padding: 26px 20px 24px !important; }
  html body.fn-login .fn-card h1 { font-size: 34px !important; }
}
.fn-login .fn-steps li.on b { background: #fff; border-color: #fff; color: #090909; }
html body.fn-login .fn-steps li { font-size: 12.5px !important; padding: 10px 10px; gap: 7px; }
.fn-login .fn-steps li span { white-space: normal; overflow: visible; line-height: 1.2; }
html body.fn-login .fn-intent a { text-decoration: none !important; }