/* ══════════════════════════════════════════════════════════════════════════
   METRA — the front door: welcome, services, pricing (body.fr)
   ──────────────────────────────────────────────────────────────────────────
   Built on mt-funnel.css (header, footer, buttons, hero instrument). Same
   instrument language as the terminal: black canvas, hairlines instead of
   boxes, mono labels sitting on rules, the pixel face only for headlines,
   colour only where it carries data (green up, red down, amber = the plan
   we suggest). References: Fey's product bento, Hex's ticked grid, Linear's
   joined plan columns and grouped comparison, Homerun's feature index.
   ══════════════════════════════════════════════════════════════════════════ */

body.fr { --fr-line: var(--line, #262626); --fr-head: 58px; }
.fr section { scroll-margin-top: calc(var(--fr-head) + 12px); }

/* a section label: mono caps on a hairline, a count on the right */
.fr-label { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--fr-line); padding-top: 12px; margin: 88px 0 28px; }
.fr-label > span { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.fr-label > b { margin-left: auto; font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink-4); }
.fr-h2 { font-family: var(--pixel) !important; font-weight: 400 !important; font-size: clamp(26px, 3.4vw, 40px) !important; line-height: 1.12 !important; letter-spacing: 0 !important; margin: 0 0 14px; max-width: 22ch; }
.fr-sub { color: var(--ink-3); font-size: 15px; line-height: 1.65; max-width: 60ch; margin: 0 0 30px; }

/* tier pill: text first, colour second */
.fr-tier { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border: 1px solid var(--line-solid, #333); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }
.fr-tier svg { width: 9px; height: 9px; }
.fr-tier.pro { color: var(--accent-text, #F59E0B); border-color: color-mix(in srgb, var(--accent, #D97706) 55%, transparent); }
.fr-tier.max { color: var(--ink, #fff); border-color: var(--ink-3, #999); }

/* ── welcome: hero ───────────────────────────────────────────────────────── */
.fr-hero { padding-top: 40px; display: grid; gap: 34px; }
@media (min-width: 1040px) { .fr-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 60px; padding-top: 84px; align-items: center; } }
.fr-hero .fn-h1 { margin-bottom: 20px; }
.fr-hero .fn-lede { max-width: 54ch; }
.fr-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 400 12px/1.4 var(--mono); color: var(--ink-4); }
.fr-meta span::before { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--ink-4); margin-right: 8px; vertical-align: 2px; }
.fr-hero .fn-hero-viz { margin: 0; }

/* figures: one hairline row, no boxes */
.fr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); margin-top: 52px; }
.fr-stats > div { padding: 18px 18px 18px 0; }
.fr-stats > div + div { padding-left: 18px; border-left: 1px solid var(--fr-line); }
.fr-stats > div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--fr-line); }
.fr-stats > div:nth-child(4) { border-top: 1px solid var(--fr-line); }
@media (min-width: 760px) {
  .fr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fr-stats > div:nth-child(3) { border-left: 1px solid var(--fr-line); padding-left: 18px; border-top: 0; }
  .fr-stats > div:nth-child(4) { border-top: 0; }
}
.fr-stats dt { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.fr-stats dd { margin: 10px 0 0; font: 600 28px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.fr-stats dd.up { color: var(--up); } .fr-stats dd.down { color: var(--down); }
.fr-stats small { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-4); }
.fr-read { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 80ch; }
.fr-read[hidden] { display: none; }
.fr-read small { display: block; margin-top: 4px; font: 400 11px/1.4 var(--mono); color: var(--ink-4); }

/* two markets side by side */
.fr-two { display: grid; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-two { grid-template-columns: 1fr 1fr; } .fr-two > div + div { border-left: 1px solid var(--fr-line); } }
.fr-two > div { padding: 28px 0; }
@media (min-width: 900px) { .fr-two > div { padding: 30px 32px 30px 0; } .fr-two > div + div { padding: 30px 0 30px 32px; } }
.fr-two > div + div { border-top: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-two > div + div { border-top: 0; } }
.fr-two h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 600 20px/1.2 var(--sans); }
.fr-two h3 .fr-now { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--live, var(--up)); }
.fr-two p { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 48ch; }
.fr-desks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fr-line); }
.fr-desks li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; border-bottom: 1px solid var(--fr-line); }
.fr-desks .c { font: 500 11px/1 var(--mono); color: var(--ink-4); }
.fr-desks .n { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-two .fn-btn { margin-top: 18px; }

/* product bento: the strongest desks, real screenshots */
.fr-bento { display: grid; gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); }
@media (min-width: 760px) { .fr-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fr-shot { background: var(--s-canvas, #000); display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 760px) {
  .fr-shot { grid-column: span 2; }
  .fr-shot.big { grid-column: span 4; grid-row: span 2; }
  .fr-shot.wide { grid-column: span 3; }
}
.fr-shot figure { margin: 0; flex: 1 1 auto; overflow: hidden; background: #050505; aspect-ratio: 16 / 9; }
.fr-shot.big figure { aspect-ratio: auto; min-height: 260px; }
.fr-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fr-shot .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px 16px; border-top: 1px solid var(--fr-line); }
.fr-shot .cap b { font-weight: 600; font-size: 14px; }
.fr-shot .cap b i { font: 500 11px/1 var(--mono); font-style: normal; color: var(--ink-4); margin-right: 8px; }
.fr-shot .cap p { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fr-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 16px 0 0; }
.fr-more span { font: 500 11px/1 var(--mono); color: var(--ink-4); border: 1px solid var(--fr-line); padding: 6px 8px; }
.fr-more a { margin-left: auto; font-size: 14px; color: var(--ink); }

/* ticked grid: hairlines with small crosses where they meet */
.fr-ticked { position: relative; display: grid; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
@media (min-width: 760px) { .fr-ticked { grid-template-columns: 1fr 1fr; } }
.fr-ticked > article { position: relative; padding: 30px 0; border-bottom: 1px solid var(--fr-line); }
.fr-ticked > article:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .fr-ticked > article { padding: 34px 34px 34px 0; }
  .fr-ticked > article:nth-child(even) { padding: 34px 0 34px 34px; border-left: 1px solid var(--fr-line); }
  .fr-ticked > article:nth-last-child(-n+2) { border-bottom: 0; }
  .fr-ticked > article:nth-child(even)::before { content: ''; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px;
    background: linear-gradient(var(--ink-3), var(--ink-3)) center / 1px 9px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) center / 9px 1px no-repeat; }
}
.fr-ticked .k { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text, #F59E0B); }
.fr-ticked h3 { margin: 14px 0 10px; font: 600 19px/1.3 var(--sans); }
.fr-ticked p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.7; max-width: 54ch; }

/* plan columns, joined (welcome teaser and pricing) */
.fr-plans { display: grid; border: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fr-plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 28px; min-width: 0; }
.fr-plan + .fr-plan { border-top: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-plan + .fr-plan { border-top: 0; border-left: 1px solid var(--fr-line); } }
.fr-plan.pick { background: var(--s-raised, #0f0f0f); box-shadow: inset 0 2px 0 var(--accent, #D97706); }
.fr-plan .tag { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); min-height: 10px; }
.fr-plan.pick .tag { color: var(--accent-text, #F59E0B); }
.fr-plan h3 { margin: 14px 0 0; font-family: var(--pixel) !important; font-weight: 400 !important; font-size: 26px !important; line-height: 1 !important; }
.fr-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 4px; }
.fr-price b { font: 600 32px/1 var(--mono); font-variant-numeric: tabular-nums; }
.fr-price span { color: var(--ink-4); font-size: 13px; }
.fr-plan .note { color: var(--ink-4); font-size: 13px; min-height: 20px; }
.fr-plan .open { margin: 18px 0 0; font: 500 12px/1.4 var(--mono); color: var(--ink-2); }
.fr-plan .open b { color: var(--ink); font-size: 15px; }
.fr-meter { display: flex; gap: 2px; height: 8px; margin-top: 10px; }
.fr-meter i { flex: 1 1 0; background: var(--line-2, #1c1c1c); }
.fr-meter i.on { background: var(--ink-2, #ddd); }
.fr-plan.pick .fr-meter i.on { background: var(--accent, #D97706); }
.fr-plan .fn-btn { margin-top: 22px; width: 100%; }
.fr-plan ul { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--fr-line); display: grid; gap: 10px; font-size: 14px; }
.fr-plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); line-height: 1.45; }
.fr-plan li svg { width: 12px; height: 12px; margin-top: 4px; color: var(--up); }
.fr-plan li.off { color: var(--ink-4); }
.fr-plan li.off svg { color: var(--ink-4); }
.fr-plan .summary { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.55; }

/* closing band with the candles (LottieFiles, recoloured to the brand's up/down) */
.fr-close { display: grid; gap: 24px; align-items: center; margin-top: 88px; padding: 40px 0; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-close { grid-template-columns: minmax(0, 1fr) 260px; } }
.fr-close .fr-h2 { max-width: 18ch; }
.fr-close .fn-cta { margin-top: 22px; }
.fr-candles { width: 220px; height: 220px; justify-self: center; }
@media (max-width: 899px) { .fr-candles { width: 160px; height: 160px; justify-self: start; } }

/* ── services: the index ─────────────────────────────────────────────────── */
.fr-index-head { padding-top: 40px; }
@media (min-width: 900px) { .fr-index-head { padding-top: 76px; } }
.fr-tools { position: sticky; top: var(--fr-head); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 0; margin-top: 30px;
  background: var(--s-canvas, #000); border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
.fr-tools input { height: 38px; flex: 1 1 220px; min-width: 0; max-width: 360px; padding: 0 12px; background: var(--s-raised, #0f0f0f); border: 1px solid var(--line-solid, #333); color: var(--ink); font: inherit; font-size: 15px; }
.fr-tools input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fr-seg { display: inline-flex; border: 1px solid var(--line-solid, #333); }
.fr-seg button { height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-3); font: 500 13px/1 var(--sans); cursor: pointer; }
.fr-seg button + button { border-left: 1px solid var(--fr-line); }
.fr-seg button[aria-pressed="true"] { background: var(--ink); color: var(--s-canvas, #000); }
.fr-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fr-tools .fr-n { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-4); }

.fr-cat { display: grid; gap: 0; margin-top: 8px; }
@media (min-width: 1000px) { .fr-cat { grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; } }
.fr-catnav { display: none; }
@media (min-width: 1000px) {
  .fr-catnav { display: block; position: sticky; top: calc(var(--fr-head) + 76px); align-self: start; padding-top: 28px; }
  .fr-catnav a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; color: var(--ink-3); text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; }
  .fr-catnav a:hover { color: var(--ink); }
  .fr-catnav a.on { color: var(--ink); border-bottom-color: var(--ink); }
  .fr-catnav a span { font: 400 11px/1.6 var(--mono); color: var(--ink-4); }
}
.fr-dom { padding-top: 28px; }
.fr-dom + .fr-dom { margin-top: 26px; }
.fr-dom > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink-3); }
.fr-dom h2 { margin: 0; font-family: var(--pixel) !important; font-weight: 400 !important; font-size: 26px !important; line-height: 1.1 !important; }
.fr-dom header p { margin: 0; color: var(--ink-4); font-size: 13.5px; }
.fr-dom header b { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--ink-4); }
.fr-list { display: grid; }
@media (min-width: 760px) { .fr-list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.fr-desk { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--fr-line); align-content: start; }
.fr-desk .c { font: 500 11px/1.9 var(--mono); color: var(--ink-4); }
.fr-desk h3 { margin: 0; font: 600 15px/1.45 var(--sans); }
.fr-desk h3 small { font: 400 11px/1 var(--mono); color: var(--ink-4); margin-left: 6px; }
.fr-desk p { grid-column: 2 / -1; margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.fr-desk[hidden], .fr-dom[hidden] { display: none; }
.fr-empty { padding: 40px 0; color: var(--ink-4); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.fr-price-head { padding-top: 40px; display: grid; gap: 22px; align-items: end; }
@media (min-width: 900px) { .fr-price-head { padding-top: 76px; grid-template-columns: minmax(0, 1fr) auto; } }
.fr-price-head .fn-lede { max-width: 58ch; }
.fr-gate { border-left: 2px solid var(--accent); padding: 10px 14px; margin-bottom: 24px; background: var(--accent-wash, rgba(217,119,6,.08)); font-size: 14px; }
.fr-gate[hidden] { display: none; }
.fr-period { display: flex; align-items: center; gap: 12px; }
.fr-period small { font: 400 12px/1 var(--mono); color: var(--ink-4); }

/* comparison: plans along the top (sticky), desks grouped by area */
.fr-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.fr-cmp thead th { position: sticky; top: var(--fr-head); z-index: 3; background: var(--s-canvas, #000); padding: 14px 10px; border-bottom: 1px solid var(--ink-3); text-align: center; font: 500 13px/1 var(--sans); }
.fr-cmp thead th:first-child { text-align: left; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.fr-cmp thead th span { display: block; margin-top: 6px; font: 400 11px/1 var(--mono); color: var(--ink-4); }
.fr-cmp th.pick, .fr-cmp td.pick { background: color-mix(in srgb, var(--s-raised, #0f0f0f) 100%, transparent); }
.fr-cmp thead th.pick { background: var(--s-raised, #0f0f0f); box-shadow: inset 0 2px 0 var(--accent, #D97706); }
.fr-cmp tbody th { text-align: left; font-weight: 400; padding: 12px 10px 12px 0; color: var(--ink-2); }
.fr-cmp tbody th small { display: block; font: 400 11px/1.3 var(--mono); color: var(--ink-4); margin-top: 3px; }
.fr-cmp td { text-align: center; padding: 12px 10px; border-bottom: 1px solid var(--fr-line); width: 16%; }
.fr-cmp tbody th { border-bottom: 1px solid var(--fr-line); }
.fr-cmp tr.grp th { padding: 26px 0 10px; border-bottom: 1px solid var(--ink-3); font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.fr-cmp tr.grp td { border-bottom: 1px solid var(--ink-3); }
.fr-cmp .y svg { width: 14px; height: 14px; color: var(--up); }
.fr-cmp .n svg { width: 12px; height: 12px; color: var(--ink-4); opacity: .7; }
.fr-cmp td b { font: 600 13px/1 var(--mono); }
@media (max-width: 640px) { .fr-cmp { font-size: 13px; } .fr-cmp td { padding: 11px 4px; } .fr-cmp thead th { padding: 12px 4px; } }

.fr-notes { display: grid; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
@media (min-width: 760px) { .fr-notes { grid-template-columns: 1fr 1fr; } .fr-notes > div + div { border-left: 1px solid var(--fr-line); padding-left: 32px; } .fr-notes > div { padding-right: 32px; } }
.fr-notes > div { padding-top: 26px; padding-bottom: 26px; }
.fr-notes > div + div { border-top: 1px solid var(--fr-line); }
@media (min-width: 760px) { .fr-notes > div + div { border-top: 0; } }
.fr-notes h3 { margin: 0 0 8px; font: 600 16px/1.35 var(--sans); }
.fr-notes p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.65; }
@media (min-width: 1040px) { .fr-hero #hvCanvas { height: 300px; } }

/* the brand sets one face everywhere (mt-brand.css); codes and figures opt back into mono */
.fr :is(.fr-desks .c, .fr-desk .c, .fr-shot .cap b i, .fr-more span, .fr-stats dd, .fr-price b, .fr-plan .open,
  .fr-cmp td b, .fr-cmp thead th span, .fr-tools .fr-n, .fr-dom header b, .fr-catnav a span, .fr-tier, .fr-meta, .fr-read small) { font-family: var(--mono) !important; }
.fr .fr-label > span, .fr .fr-label > b { font-size: 11px; }
.fr .fr-plan p.summary { font-size: 14px !important; line-height: 1.55 !important; }
/* the terminal's global table header style (small tracked caps) does not belong on the front door */
.fr .fr-cmp thead th { font: 600 14px/1.2 var(--sans) !important; color: var(--ink) !important; background: var(--s-canvas, #000) !important; text-align: center; }
.fr .fr-cmp thead th:first-child { font: 400 12px/1.2 var(--sans) !important; color: var(--ink-4) !important; text-align: left; }
.fr .fr-cmp thead th.pick { background: var(--s-raised, #0f0f0f) !important; }
.fr .fr-cmp thead th span { font-weight: 400 !important; }
/* the breadth readout wraps under its cells on a phone instead of sitting on them */
.fr .hv-foot { flex-wrap: wrap; row-gap: 6px; }
.fr .hv-cells { min-width: 140px; }

/* ══ v2: the selling front door ═════════════════════════════════════════════ */

/* the radar: what Metra detected, newest first */
.fr-radar { border: 1px solid var(--line-solid, #333); background: var(--s-canvas, #000); display: flex; flex-direction: column; min-width: 0; }
.fr-radar-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--fr-line); }
.fr-radar-top b { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.fr-radar-top b i { width: 7px; height: 7px; background: var(--down, #FF4D4D); }
@media (prefers-reduced-motion: no-preference) { .fr-radar-top b i { animation: hvBlink 1.2s steps(1, end) infinite; } }
.fr-radar-top .fr-seg { margin-left: auto; }
.fr-radar-top .fr-seg button { height: 28px; padding: 0 10px; font-size: 12px; }
.fr-radar ol { list-style: none; margin: 0; padding: 0; min-height: 360px; }
.fr-radar li { display: grid; grid-template-columns: 52px 72px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 12px; border-bottom: 1px solid var(--fr-line); font-size: 13.5px; line-height: 1.45; }
.fr-radar li .tm { font-family: var(--mono) !important; font-size: 11.5px; color: var(--ink-4); padding-top: 2px; }
.fr-radar li .kd { font-family: var(--mono) !important; font-size: 10.5px; padding: 3px 6px; border: 1px solid var(--line-solid, #333); color: var(--ink-3); text-align: center; white-space: nowrap; }
.fr-radar li .kd.red { color: #fff; background: var(--down, #FF4D4D); border-color: var(--down, #FF4D4D); }
.fr-radar li .kd.mv { color: var(--accent-text, #F59E0B); border-color: color-mix(in srgb, var(--accent, #D97706) 55%, transparent); }
.fr-radar li .kd.ev { color: var(--ink); border-color: var(--ink-3); }
.fr-radar li .tx { color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fr-radar li .tx b { color: var(--ink); font-weight: 600; }
.fr-radar li .tx .up { color: var(--up); } .fr-radar li .tx .down { color: var(--down); }
.fr-radar li .ds { font-family: var(--mono) !important; font-size: 11px; color: var(--ink-4); text-decoration: none; padding-top: 2px; }
.fr-radar li .ds:hover { color: var(--ink); }
.fr-radar-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; font-size: 12px; color: var(--ink-4); }
.fr-radar-foot a { margin-left: auto; color: var(--ink); }
@media (max-width: 560px) {
  .fr-radar li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .fr-radar li .kd { grid-column: 2; justify-self: start; }
  .fr-radar li .tx { grid-column: 2 / -1; }
  .fr-radar li .ds { grid-column: 3; grid-row: 1; }
}

/* problem → answer rows */
.fr-pain { border-top: 1px solid var(--fr-line); }
.fr-pain > div { display: grid; gap: 8px 40px; padding: 24px 0; border-bottom: 1px solid var(--fr-line); }
@media (min-width: 900px) { .fr-pain > div { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.fr-pain .q { font-size: 19px; line-height: 1.4; color: var(--ink-4); }
.fr-pain .q b { color: var(--ink-2); font-weight: 600; }
.fr-pain .a { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.fr-pain .a strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }
.fr-pain .a code { font-family: var(--mono) !important; font-size: 11.5px; padding: 1px 5px; border: 1px solid var(--line-solid, #333); color: var(--ink-3); margin-right: 3px; }

/* four reasons around the product */
.fr-four { display: grid; gap: 0; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); }
@media (min-width: 1000px) { .fr-four { grid-template-columns: 1fr 1.35fr 1fr; } }
.fr-four .side { display: grid; }
.fr-four .side > div { padding: 26px 0; border-bottom: 1px solid var(--fr-line); }
.fr-four .side > div:last-child { border-bottom: 0; }
@media (min-width: 1000px) {
  .fr-four .side.l > div { padding-right: 28px; }
  .fr-four .side.r > div { padding-left: 28px; }
  .fr-four .mid { border-left: 1px solid var(--fr-line); border-right: 1px solid var(--fr-line); padding: 26px; display: flex; align-items: center; }
}
.fr-four .mid img { display: block; width: 100%; height: auto; border: 1px solid var(--fr-line); }
.fr-four .n { font-family: var(--mono) !important; font-size: 11px; color: var(--accent-text, #F59E0B); }
.fr-four h3 { margin: 10px 0 8px; font-size: 19px !important; line-height: 1.3 !important; }
.fr-four p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.65; }

/* consolidation: what it replaces */
.fr-swap { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fr-swap th { text-align: left; font: 400 12px/1.2 var(--sans) !important; color: var(--ink-4) !important; padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink-3); background: none !important; }
.fr-swap td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--fr-line); vertical-align: top; line-height: 1.5; }
.fr-swap td:first-child { color: var(--ink); font-weight: 600; width: 24%; }
.fr-swap td.old { color: var(--ink-4); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--down, #FF4D4D) 70%, transparent); width: 30%; }
.fr-swap td.new { color: var(--ink-2); }
.fr-swap td.new code { font-family: var(--mono) !important; font-size: 11px; color: var(--up, #2BE08A); margin-right: 6px; }
.fr-swap tfoot td { border-bottom: 0; padding-top: 18px; font-size: 15px; color: var(--ink); }
@media (max-width: 720px) {
  .fr-swap thead { display: none; }
  .fr-swap tr { display: grid; padding: 14px 0; border-bottom: 1px solid var(--fr-line); }
  .fr-swap td { border: 0; padding: 2px 0; width: auto !important; }
}

/* per-day price, under the plan price */
.fr-plan .perday { font: 400 12px/1.4 var(--mono) !important; color: var(--accent-text, #F59E0B); margin-top: 6px; min-height: 17px; }
.fr-plan .who { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* hover on product shots */
.fr-shot { overflow: hidden; }

/* phone: a buy bar once the hero has scrolled away */
.fr-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; gap: 10px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--s-canvas, #000) 94%, transparent); border-top: 1px solid var(--line-solid, #333); }
.fr-buybar span { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.fr-buybar .fn-btn { margin-left: auto; min-height: 40px; }
@media (max-width: 760px) { .fr-buybar.on { display: flex; } }

/* questions */
.fr-faq { border-top: 1px solid var(--fr-line); }
.fr-faq details { border-bottom: 1px solid var(--fr-line); }
.fr-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.fr-faq summary::-webkit-details-marker { display: none; }
.fr-faq summary::after { content: '+'; font-family: var(--mono) !important; color: var(--ink-4); }
.fr-faq details[open] summary::after { content: '−'; }
.fr-faq details p { margin: 0 0 18px; color: var(--ink-3); font-size: 14.5px; line-height: 1.7; max-width: 72ch; }
.fr-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* v2 fixes: global table styles off the swap table; a taller product shot; a wider radar tag column */
.fr .fr-swap thead th { background: none !important; font: 400 12px/1.2 var(--sans) !important; color: var(--ink-4) !important; padding: 0 16px 12px 0 !important; }
.fr .fr-swap td { font-family: var(--sans) !important; font-size: 14.5px !important; padding: 16px 16px 16px 0 !important; letter-spacing: 0 !important; }
.fr .fr-swap td.new code { font-family: var(--mono) !important; }
.fr .fr-swap tbody tr:hover td { background: color-mix(in srgb, var(--s-raised, #0f0f0f) 70%, transparent); }
@media (min-width: 1000px) {
  .fr-four { grid-template-columns: 1fr 1.5fr 1fr; }
  .fr-four .mid { padding: 0; align-items: stretch; }
  .fr-four .mid img { height: 100%; min-height: 440px; object-fit: cover; object-position: left top; border: 0; }
}
.fr-radar li { grid-template-columns: 46px 88px minmax(0, 1fr) auto; }
.fr-radar li .kd { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .fr-radar li { grid-template-columns: 44px minmax(0, 1fr) auto; } }
/* the brand's mono rule for table cells carries an id in its :is() list; outrank it */
#main .fr-swap td { font-family: var(--sans) !important; letter-spacing: 0 !important; }
#main .fr-swap td.new code, #main .fr-cmp td b { font-family: var(--mono) !important; }
/* room under the page for the phone buy bar */
@media (max-width: 760px) { body.fr { padding-bottom: 76px; } }
@media (max-width: 640px) {
  .fr .fr-cmp thead th span { display: none; }
  .fr .fr-cmp thead th { font-size: 13px !important; padding: 12px 2px !important; }
  .fr .fr-cmp tbody th { font-size: 13px; padding-right: 6px; word-break: break-word; }
  .fr .fr-cmp td { width: 15%; padding: 10px 2px !important; }
}

/* ══ v4 · a terminal, not a poster ═════════════════════════════════════════
   v3 boxed every section, set every headline in bold bitmap at 56px and kept
   the page moving; it read as cramped and tiring. This layer goes back to how
   the terminal itself feels:

   · Open space with hairlines between things. A panel (#0E0E0E, #262626
     edge, a header row) only where there is an instrument: the radar, the
     figures, the plans, the chart. Never a box inside a box.
   · Pixelify Sans at medium weight and moderate size for page and section
     titles, the way the terminal sets "Hari ini". Plex Sans for everything
     read; Plex Mono for figures, codes and the date line. No Silkscreen, no
     filled label blocks.
   · Contrast from tone: white titles, light-grey prose (#D4D4D4), nothing
     readable darker than #8F8F8F. Amber only for the one action, the
     suggested plan and where you are.
   · Motion only where it carries information, once: screenshots resolve
     from blocks, figures decode, the chart prints. Nothing loops but the
     live dot, the last candle and the headline, all slow.
   ══════════════════════════════════════════════════════════════════════════ */
body.fr {
  --ink-2: #D4D4D4; --ink-3: #A8A8A8; --ink-4: #8F8F8F;
  --fr-line: #222222; --fr-edge: #2E2E2E; --fr-panel: #0E0E0E;
  --fr-amber: var(--amber, #D97706);
  --fr-d: 'Pixelify Sans', 'IBM Plex Sans', monospace;
  font-size: 16px;
}
.fr .rv { animation: none !important; }
.fr main.fn-wrap { padding-bottom: 40px; }

/* ── type ─────────────────────────────────────────────────────────────── */
html body.fr :is(h1.fn-h1, .fr-h2) { font-family: var(--fr-d) !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--ink); text-wrap: balance; }
html body.fr article.fr-plan h3, html body.fr section.fr-dom h2 { font-family: var(--fr-d) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html body.fr h1.fn-h1 { font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.12 !important; max-width: 20ch; margin: 0 0 22px; }
html body.fr h1.fn-h1 em { display: block; font-style: normal; color: var(--fr-amber) !important; font-size: .82em; margin-top: .1em; }
html body.fr .fr-h2 { font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.2 !important; max-width: 28ch; margin: 0 0 12px; }
html body.fr .fr-h2 em { font-style: normal; color: var(--fr-amber); }
html body.fr :is(h3, .fn-btn, .fn-top nav a, .fr-seg button, .fn-mkt button, summary) { font-family: var(--sans) !important; }
html body.fr :is(h3, .fn-btn) * { font-family: inherit !important; }
html body.fr .fn-lede { font-size: 18px !important; line-height: 1.65; color: var(--ink-2) !important; max-width: 54ch; }
html body.fr .fr-sub { font-size: 16px; line-height: 1.65; color: var(--ink-3); max-width: 62ch; margin-bottom: 40px; }
html body.fr .fn-brand b { font-family: var(--fr-d) !important; font-weight: 500 !important; font-size: 17px; }
html body.fr .fn-brand span { font-size: 10px; color: var(--ink-4); }

/* ── header: the terminal's bar ───────────────────────────────────────── */
.fr .fn-top { border-bottom-color: var(--fr-line); }
html body.fr .fn-top nav a:not(.fn-btn) { font-size: 14px; font-weight: 500; color: var(--ink-3); min-height: 58px; padding: 0 12px; border-bottom: 2px solid transparent; background: none; }
html body.fr .fn-top nav a:not(.fn-btn):hover { color: var(--ink); background: none; }
html body.fr .fn-top nav a[aria-current] { color: var(--ink); border-bottom-color: var(--fr-amber); }
html body.fr .fn-top nav .fn-btn { min-height: 36px; font-size: 14px; margin-left: 6px; padding: 0 14px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
html body.fr .fn-btn { min-height: 46px; padding: 0 20px; font-size: 15px; font-weight: 600; }
html body.fr .fn-btn.ghost, html body.fr .fn-btn:not(.acc):not(.pri) { background: transparent; color: var(--ink) !important; border: 1px solid var(--fr-edge) !important; }
html body.fr .fn-btn.ghost:hover, html body.fr .fn-btn:not(.acc):not(.pri):hover { background: #161616 !important; border-color: #4A4A4A !important; }
html body.fr .fn-btn.acc::after {
  content: ''; width: 10px; height: 10px; margin-left: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
html body.fr .fn-top nav .fn-btn::after { display: none; }
html body.fr .fn-cta { gap: 10px; margin-top: 30px; }

/* ── the date line above each title (was a boxed eyebrow) ─────────────── */
html body.fr .fn-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; border: 0; background: none; padding: 0; margin: 0 0 22px;
  font: 400 13px/1.4 var(--sans) !important; color: var(--ink-2); }
html body.fr .fn-eyebrow > i { width: 7px; height: 7px; background: var(--up); margin-right: -10px; }
.fr .fr-sess { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; flex-basis: 100%; }
html body.fr .fr-sess > span { font: 400 12.5px/1.4 var(--mono) !important; color: var(--ink-4); }
html body.fr .fr-sess > span.s { font-family: var(--sans) !important; font-size: 13px; color: var(--ink-4); display: inline-flex; align-items: center; gap: 7px; }
.fr .fr-sess > span.s::before { content: ''; width: 6px; height: 6px; background: #3A3A3A; }
html body.fr .fr-sess > span.s.on { color: var(--ink-2); }
.fr .fr-sess > span.s.on::before { background: var(--up); }

/* ── section heads: a quiet label on the hairline ─────────────────────── */
.fr main { counter-reset: frsec; }
.fr .fr-label { counter-increment: frsec; border-top: 1px solid var(--fr-line); padding-top: 14px; margin: 128px 0 22px; gap: 12px; align-items: baseline; }
.fr .fr-label::before { content: counter(frsec, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--fr-amber); }
html body.fr .fr-label > span { font: 500 13px/1 var(--sans) !important; color: var(--ink-2); letter-spacing: 0; }
html body.fr .fr-label > b { font: 400 13px/1 var(--sans) !important; color: var(--ink-4); }
@media (max-width: 760px) { .fr .fr-label { margin-top: 88px; } }

/* ── hero ─────────────────────────────────────────────────────────────── */
@media (min-width: 1040px) { .fr .fr-hero { padding-top: 88px; column-gap: 72px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
html body.fr .fr-meta { font: 400 13px/1.4 var(--sans) !important; color: var(--ink-3); gap: 8px 20px; margin-top: 20px; }
.fr .fr-meta span::before { width: 5px; height: 5px; background: var(--ink-4); vertical-align: 2px; }

/* figures: the terminal's stat strip, one panel, hairline cells */
.fr .fr-stats { gap: 0; background: var(--fr-panel); border: 1px solid var(--fr-line); margin-top: 72px; }
.fr .fr-stats > div, .fr .fr-stats > div + div, .fr .fr-stats > div:nth-child(3), .fr .fr-stats > div:nth-child(4) { background: none; padding: 20px 22px; border: 0; }
@media (min-width: 760px) { .fr .fr-stats > div + div { border-left: 1px solid var(--fr-line) !important; } }
@media (max-width: 759px) { .fr .fr-stats > div:nth-child(even) { border-left: 1px solid var(--fr-line) !important; } .fr .fr-stats > div:nth-child(n+3) { border-top: 1px solid var(--fr-line) !important; } }
html body.fr .fr-stats dt { font: 400 13px/1.2 var(--sans) !important; color: var(--ink-3); }
html body.fr .fr-stats dd { font: 500 30px/1 var(--mono) !important; color: var(--ink); margin-top: 12px; }
html body.fr .fr-stats small { font-size: 12.5px; color: var(--ink-4); margin-top: 8px; }
html body.fr .fr-read { border-left: 2px solid var(--fr-amber); background: none; padding: 4px 0 4px 16px; font-size: 16px; color: var(--ink-2); margin-top: 26px; }
html body.fr .fr-read small { font-size: 12px; color: var(--ink-4); margin-top: 6px; }

/* ── radar: a terminal panel ──────────────────────────────────────────── */
.fr .fr-radar { background: var(--fr-panel); border: 1px solid var(--fr-line); }
.fr .fr-radar-top { padding: 12px 16px; border-bottom: 1px solid var(--fr-line); background: none; }
html body.fr .fr-radar-top b { font: 600 15px/1 var(--sans) !important; color: var(--ink); gap: 10px; }
.fr .fr-radar-top b i { width: 7px; height: 7px; background: var(--down); }
@media (prefers-reduced-motion: no-preference) { .fr .fr-radar-top b i { animation: fn-beat 2.4s steps(1, end) infinite; } }
.fr .fr-radar li { padding: 12px 16px; font-size: 14px; border-bottom-color: #1A1A1A; }
.fr .fr-radar li:last-child { border-bottom: 0; }
html body.fr .fr-radar li .tm { font-size: 12px; color: var(--ink-4); }
html body.fr .fr-radar li .kd { font: 500 11.5px/1.2 var(--sans) !important; padding: 3px 6px; background: none; border: 1px solid var(--fr-edge); color: var(--ink-3); }
html body.fr .fr-radar li .kd.red { background: none; border-color: color-mix(in srgb, var(--down) 60%, transparent); color: var(--down); }
html body.fr .fr-radar li .kd.mv { color: var(--fr-amber); border-color: color-mix(in srgb, var(--fr-amber) 55%, transparent); }
html body.fr .fr-radar li .kd.ev { color: var(--ink-2); border-color: var(--fr-edge); }
.fr .fr-radar li .tx { color: var(--ink-2); }
html body.fr .fr-radar li .ds { font-size: 11.5px; color: var(--ink-4); text-decoration: none; }
html body.fr .fr-radar li .ds:hover { color: var(--ink); }
.fr .fr-radar li.new .tm { color: var(--fr-amber); }
.fr .fr-radar-foot { border-top: 1px solid var(--fr-line); font-size: 12.5px; color: var(--ink-4); padding: 12px 16px; }

/* ── problem → answer: open rows ──────────────────────────────────────── */
.fr .fr-pain { border-top: 1px solid var(--fr-line); }
.fr .fr-pain > div { padding: 30px 0; gap: 14px 56px; border-bottom-color: var(--fr-line); }
.fr .fr-pain .q { font-size: 19px; line-height: 1.45; color: var(--ink-3); }
.fr .fr-pain .q b { color: var(--ink); font-weight: 500; }
.fr .fr-pain .q::before, .fr .fr-pain .a strong::before { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); margin-bottom: 12px; }
.fr .fr-pain .q::before { content: 'Tanpa Metra'; color: var(--down); }
.fr .fr-pain .a strong::before { content: 'Dengan Metra'; color: var(--up); }
.fr .fr-pain .a { font-size: 15.5px; color: var(--ink-3); }
.fr .fr-pain .a strong { font-size: 17px; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
html body.fr .fr-pain .a code { font-size: 11.5px; color: var(--ink-3); border-color: var(--fr-edge); background: none; }

/* ── four reasons ─────────────────────────────────────────────────────── */
.fr .fr-four .side > div { padding: 28px 0; }
@media (min-width: 1000px) { .fr .fr-four .side.l > div { padding-right: 32px; } .fr .fr-four .side.r > div { padding-left: 32px; } }
html body.fr .fr-four .n { font: 500 12px/1 var(--mono) !important; color: var(--fr-amber); }
.fr .fr-four h3 { font-size: 18px !important; color: var(--ink); margin: 12px 0 8px; }
.fr .fr-four p { color: var(--ink-3); font-size: 15px; }

/* ── swap table ───────────────────────────────────────────────────────── */
#main .fr-swap td { font-size: 15px !important; padding: 18px 20px 18px 0 !important; }
#main .fr-swap td:first-child { font-weight: 500; }
#main .fr-swap td.old { color: var(--ink-4); text-decoration-color: color-mix(in srgb, var(--down) 55%, transparent); }
#main .fr-swap td.new { color: var(--ink-2); }
#main .fr-swap td.new code { font-size: 11.5px; color: var(--up); margin-right: 8px; }
#main .fr-swap tfoot td { font-size: 16px !important; color: var(--ink-2); padding-top: 22px !important; }
#main .fr-swap tfoot td b { color: var(--ink); }

/* ── bento: panels with room between them ─────────────────────────────── */
.fr .fr-bento { gap: 16px; background: none; border: 0; }
.fr .fr-shot { background: var(--fr-panel); border: 1px solid var(--fr-line); }
@media (hover: hover) { .fr .fr-shot:hover { border-color: #444; } }
.fr .fr-shot figure { position: relative; background: #050505; }
.fr .fr-shot .cap { padding: 14px 16px 16px; border-top-color: var(--fr-line); }
.fr .fr-shot .cap b { font-size: 15px; color: var(--ink); }
html body.fr .fr-shot .cap b i { font-size: 11.5px; color: var(--ink-4); margin-right: 10px; }
.fr .fr-shot .cap p { font-size: 13.5px; color: var(--ink-3); }
html body.fr .fr-more span { font-size: 11.5px; color: var(--ink-3); border-color: var(--fr-edge); }
.fr-pxi { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }

/* ── trust grid: the hairline grid from v1, with readable greys ───────── */
html body.fr .fr-ticked .k { font: 500 12px/1 var(--mono) !important; color: var(--fr-amber); letter-spacing: 0; }
.fr .fr-ticked h3 { font-size: 18px; color: var(--ink); }
.fr .fr-ticked p { color: var(--ink-3); font-size: 15px; }

/* ── plans ────────────────────────────────────────────────────────────── */
.fr .fr-plans { gap: 16px; border: 0; }
.fr .fr-plan, .fr .fr-plan + .fr-plan { background: var(--fr-panel); border: 1px solid var(--fr-line); padding: 26px 24px 28px; }
.fr .fr-plan.pick { border-top: 2px solid var(--fr-amber); }
html body.fr .fr-plan .tag { font: 500 12px/1 var(--mono) !important; color: var(--ink-4); }
html body.fr .fr-plan.pick .tag { color: var(--fr-amber); }
html body.fr .fr-plan h3 { font-size: 26px !important; margin-top: 14px; }
html body.fr .fr-price b { font: 500 34px/1 var(--mono) !important; }
.fr .fr-price span { color: var(--ink-4); font-size: 13px; }
html body.fr .fr-plan .perday { font-size: 12.5px !important; color: var(--fr-amber); }
html body.fr .fr-plan .open { font-size: 12.5px; color: var(--ink-3); }
.fr .fr-meter { height: 6px; gap: 2px; }
.fr .fr-meter i { background: #1E1E1E; }
.fr .fr-plan .who { font-size: 14.5px; color: var(--ink-2); }
.fr .fr-plan li { color: var(--ink-2); font-size: 14.5px; }
.fr .fr-plan li.off { color: var(--ink-4); }

/* ── closing band, the market on the right ────────────────────────────── */
.fr .fr-close { background: none; border: 0; border-top: 1px solid var(--fr-line); padding: 64px 0 24px; gap: 56px; margin-top: 128px; }
@media (min-width: 900px) { .fr .fr-close { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
html body.fr .fr-close .fr-h2 { font-size: clamp(28px, 3vw, 40px) !important; }
.fr-px { display: flex; flex-direction: column; min-width: 0; margin: 0; background: var(--fr-panel); border: 1px solid var(--fr-line); }
.fr-px canvas { display: block; width: 100%; height: 220px; image-rendering: pixelated; order: 2; }
.fr-px-cap { order: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px; border-bottom: 1px solid var(--fr-line); font-size: 13px; color: var(--ink-3); }
html body.fr .fr-px-cap b { font: 600 14px/1 var(--sans) !important; color: var(--ink); }
html body.fr .fr-px-cap span { font: 500 14px/1 var(--mono) !important; color: var(--ink); }
html body.fr .fr-px-cap span.up { color: var(--up); } html body.fr .fr-px-cap span.down { color: var(--down); }
.fr-px-cap small { margin-left: auto; font-size: 12px; color: var(--ink-4); }

/* ── services ─────────────────────────────────────────────────────────── */
.fr .fr-tools { border-color: var(--fr-line); background: var(--s-canvas, #090909); }
html body.fr .fr-tools input { height: 42px; font-size: 15px; background: var(--fr-panel); border-color: var(--fr-edge); }
html body.fr .fr-seg button { height: 40px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
html body.fr .fr-seg button[aria-pressed="true"] { background: var(--ink); color: #090909; }
.fr .fr-radar-top .fr-seg button { height: 30px; font-size: 12.5px; }
html body.fr .fr-dom h2 { font-size: 26px !important; }
.fr .fr-dom { padding-top: 40px; }
.fr .fr-dom > header { border-bottom: 1px solid var(--fr-edge); padding-bottom: 14px; }
.fr .fr-dom header p { font-size: 14.5px; color: var(--ink-3); }
.fr .fr-desk { padding: 18px 0; border-bottom-color: var(--fr-line); }
html body.fr .fr-desk .c { font-size: 11.5px; color: var(--ink-4); }
.fr .fr-desk h3 { font-size: 15.5px; color: var(--ink); }
.fr .fr-desk p { font-size: 14px; color: var(--ink-3); }
html body.fr .fr-catnav a { font-size: 14px; color: var(--ink-3); }
html body.fr .fr-catnav a.on { color: var(--ink); border-bottom-color: var(--fr-amber); }
html body.fr .fr-tier { font-size: 11px; color: var(--ink-3); border-color: var(--fr-edge); }
html body.fr .fr-tier.pro { color: var(--fr-amber); border-color: color-mix(in srgb, var(--fr-amber) 55%, transparent); }
html body.fr .fr-tier.max { color: var(--ink); border-color: #555; }

/* ── pricing ──────────────────────────────────────────────────────────── */
.fr .fr-cmp thead th.pick, .fr .fr-cmp td.pick { background: var(--fr-panel) !important; }
.fr .fr-cmp thead th.pick { border-top: 2px solid var(--fr-amber); }
.fr .fr-cmp tbody th { color: var(--ink-2); }
html body.fr .fr-cmp tbody th small { color: var(--ink-4); }
html body.fr .fr-cmp tr.grp th { font: 500 13px/1 var(--sans) !important; color: var(--ink); border-bottom-color: var(--fr-edge); padding-top: 32px; }
.fr .fr-cmp tr.grp td { border-bottom-color: var(--fr-edge); }
.fr .fr-faq summary { font-size: 16.5px; font-weight: 500; padding: 20px 0; }
.fr .fr-faq details p { font-size: 15px; color: var(--ink-3); }
.fr .fr-notes p { color: var(--ink-3); }

/* ── phone ────────────────────────────────────────────────────────────── */
.fr .fr-buybar { background: #090909; border-top: 1px solid var(--fr-edge); }
.fr .fr-buybar span { font-size: 13px; color: var(--ink-2); }
html body.fr .fr-buybar .fn-btn { min-height: 42px; padding: 0 16px; }
@media (max-width: 560px) {
  html body.fr .fn-top nav .fn-btn { padding: 0 12px; margin-left: 0; font-size: 13px; min-height: 34px; }
  html body.fr .fn-brand b { font-size: 14px; }
  .fr .fn-top-in { gap: 8px; }
  .fr .fn-mkt { margin-left: 4px; }
  .fr .fn-mkt button { padding: 0 8px; }
  .fr .fr-plan, .fr .fr-plan + .fr-plan { padding: 22px 18px; }
  #main .fr-swap td { padding: 3px 0 !important; }
}
@media (max-width: 380px) { html body.fr .fn-brand b { display: none; } }

/* plan names in the display face (after the sans rule for h3, which would otherwise win the tie) */
html body.fr article.fr-plan h3 { font-family: var(--fr-d) !important; font-weight: 500 !important; }

/* ══ v5 · cards, not columns of newsprint ═══════════════════════════════════
   v4's open hairline layout read like a newspaper: rules between everything
   and nothing that looked like a thing you could pick up. Content now sits on
   cards, the terminal's panel: a #121212 surface on the #090909 canvas, a
   #262626 edge, 16px between cards, padding inside. Sections are separated by
   space alone: no rule above a section label, no rule between rows. A card
   never holds another card. Inside a table, row lines stay, faint (#1C1C1C),
   because a table needs them. */
body.fr { --fr-card: #121212; --fr-card-edge: #262626; --fr-card-hover: #3A3A3A; --fr-gap: 16px; --fr-row: #1C1C1C; }
.fr .fr-card-base, .fr :is(.fr-stats > div, .fr-pain > div, .fr-four .side > div, .fr-four .mid, .fr-shot, .fr-ticked > article,
  .fr-plan, .fr-radar, .fr-px, .fr-desk, .fr-faq details, .fr-notes > div) {
  background: var(--fr-card) !important; border: 1px solid var(--fr-card-edge) !important;
}
@media (hover: hover) {
  .fr :is(.fr-pain > div, .fr-four .side > div, .fr-shot, .fr-ticked > article, .fr-plan:not(.pick), .fr-desk, .fr-faq details):hover { border-color: var(--fr-card-hover) !important; }
}

/* section heads: no rule, only space */
.fr .fr-label { border-top: 0; padding-top: 0; margin-top: 112px; }
@media (max-width: 760px) { .fr .fr-label { margin-top: 80px; } }

/* figures: four cards */
.fr .fr-stats { gap: var(--fr-gap); background: none; border: 0; }
.fr .fr-stats > div, .fr .fr-stats > div + div, .fr .fr-stats > div:nth-child(3), .fr .fr-stats > div:nth-child(4) { padding: 20px 22px; border-left-width: 1px !important; border-top-width: 1px !important; }
html body.fr .fr-read { background: var(--fr-card); border: 1px solid var(--fr-card-edge); border-left: 3px solid var(--fr-amber); padding: 16px 20px; margin-top: var(--fr-gap); }

/* problem → answer: one card per pair */
.fr .fr-pain { border-top: 0; display: grid; gap: var(--fr-gap); }
.fr .fr-pain > div { padding: 26px 28px; border-bottom: 1px solid var(--fr-card-edge); }

/* four reasons: four cards around the product card */
.fr .fr-four { gap: var(--fr-gap); border: 0; background: none; }
.fr .fr-four .side { gap: var(--fr-gap); }
.fr .fr-four .side > div, .fr .fr-four .side.l > div, .fr .fr-four .side.r > div { padding: 24px 24px; border-bottom: 1px solid var(--fr-card-edge); }
.fr .fr-four .mid { padding: 0 !important; overflow: hidden; position: relative; display: block; }
.fr .fr-four .mid img { border: 0 !important; }
@media (max-width: 999px) { .fr .fr-four .mid img { min-height: 0; } }

/* tables are cards with faint row lines */
#main :is(.fr-swap, .fr-cmp) { background: var(--fr-card); border: 1px solid var(--fr-card-edge); border-collapse: separate; border-spacing: 0; }
#main .fr-swap thead th { padding: 16px 20px 14px !important; border-bottom: 1px solid var(--fr-card-edge); }
#main .fr-swap td { padding: 18px 20px !important; border-bottom: 1px solid var(--fr-row); }
#main .fr-swap tbody tr:last-child td { border-bottom: 1px solid var(--fr-card-edge); }
#main .fr-swap tfoot td { padding: 18px 20px 20px !important; border: 0; }
#main .fr-swap tbody tr:hover td { background: #161616; }
@media (max-width: 720px) {
  #main .fr-swap tr { padding: 14px 18px; border-bottom: 1px solid var(--fr-row); }
  #main .fr-swap td { padding: 3px 0 !important; border: 0; }
  #main .fr-swap tfoot td { padding: 16px 18px !important; }
}
#main .fr-cmp thead th { border-bottom: 1px solid var(--fr-card-edge); background: var(--fr-card) !important; }
#main .fr-cmp thead th:first-child, #main .fr-cmp tbody th { padding-left: 20px; }
#main .fr-cmp :is(td, tbody th) { border-bottom: 1px solid var(--fr-row); }
#main .fr-cmp tr.grp :is(th, td) { border-bottom: 1px solid var(--fr-card-edge); background: #0E0E0E; padding-top: 14px; padding-bottom: 12px; }
#main .fr-cmp :is(th, td).pick { background: #171717 !important; }
#main .fr-cmp thead th.pick { border-top: 2px solid var(--fr-amber); }

/* bento and trust grid: cards with gaps */
.fr .fr-bento { gap: var(--fr-gap); }
.fr .fr-ticked { gap: var(--fr-gap); border: 0; }
.fr .fr-ticked > article, .fr .fr-ticked > article:nth-child(even) { padding: 26px 26px !important; border-bottom: 1px solid var(--fr-card-edge); }
.fr .fr-ticked > article::before { display: none !important; }

/* plans: the suggested card lit along its top */
.fr .fr-plans { gap: var(--fr-gap); }
.fr .fr-plan.pick { border-top: 2px solid var(--fr-amber) !important; background: #151515 !important; }

/* closing: the text on the canvas, the chart as the card */
.fr .fr-close { border-top: 0; padding-top: 0; margin-top: 112px; }

/* services: the search bar is a card; each desk is a card */
.fr .fr-tools { background: var(--fr-card); border: 1px solid var(--fr-card-edge); padding: 12px 14px; margin-top: 36px; }
.fr .fr-dom { padding-top: 44px; }
.fr .fr-dom > header { border-bottom: 0; padding-bottom: 16px; }
.fr .fr-list { gap: 12px; column-gap: 12px; }
.fr .fr-desk { padding: 18px 18px 20px; border-bottom: 1px solid var(--fr-card-edge); }
html body.fr .fr-catnav a.on { border-bottom-color: transparent; color: var(--ink); }
html body.fr .fr-catnav a { padding: 8px 12px; border-left: 2px solid transparent; }
html body.fr .fr-catnav a.on { border-left-color: var(--fr-amber); background: var(--fr-card); }

/* pricing: questions and payment notes are cards */
.fr .fr-faq { border-top: 0; display: grid; gap: 10px; }
.fr .fr-faq details { padding: 0 22px; border-bottom: 1px solid var(--fr-card-edge); }
.fr .fr-notes { gap: var(--fr-gap); border: 0; }
.fr .fr-notes > div, .fr .fr-notes > div + div { padding: 26px; border-left-width: 1px !important; border-top-width: 1px !important; }

/* ── v5.1 · cards that read as cards; plans aligned row by row ────────────
   #121212 on #090909 was too close to see on many screens: the surface goes
   to #161616 with a #313131 edge. The plans share one row grid (subgrid), so
   tag, name, price, notes, meter, the line about who it is for and the button
   sit at the same height in all three cards whatever each one says. */
body.fr { --fr-card: #161616; --fr-card-edge: #313131; --fr-card-hover: #4A4A4A; }
@media (min-width: 900px) {
  .fr .fr-plans { grid-template-rows: repeat(10, auto); row-gap: 0; }
  .fr .fr-plans > .fr-plan { display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .fr .fr-plan > .fn-btn { align-self: start; }
  .fr .fr-plan > .who { align-self: start; }
}
.fr .fr-plan .who { margin-bottom: 0; }
.fr .fr-plan > .fn-btn { margin-top: 22px; }
html body.fr .fr-plans > .fr-plan.pick { border: 1px solid color-mix(in srgb, var(--fr-amber) 70%, transparent) !important; border-top: 3px solid var(--fr-amber) !important; background: #1A1A1A !important; }
/* the meter: lit cells were losing to the unlit colour */
.fr .fr-plan .fr-meter i { background: #262626; }
.fr .fr-plan .fr-meter i.on { background: var(--ink-2); }
.fr .fr-plan.pick .fr-meter i.on { background: var(--fr-amber); }
.fr .fr-plan > ul { align-content: start; align-self: start; }

/* ── v6 · conversion pass on the welcome page ──────────────────────────────
   Z reading line: brand → sign-in/CTA top right → headline → CTA → product.
   The hero shows the product (a real chart screenshot) with the live radar
   laid over its corner, the header carries no menu, and every proof block
   ends in a way in. */
.fn-welcome .fn-top nav { gap: 4px; }
html body.fn-welcome .fr-hero .fn-lede { max-width: 46ch; }
@media (min-width: 1040px) { html body.fn-welcome .fr-hero { padding-top: 72px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 56px; } }

/* the primary action: larger, the brightest thing on the page */
html body.fr .fr-go .fn-btn.acc { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
html body.fr .fr-go .fn-btn.ghost { min-height: 54px; }
html body.fr .fr-go .fn-btn.acc { position: relative; }
html body.fr .fr-go .fn-btn.acc::before { content: ''; position: absolute; inset: -5px; border: 1px solid color-mix(in srgb, var(--fr-amber) 45%, transparent); pointer-events: none; }
.fr-go { align-items: center; }
.fr-go-note { font-size: 13px; color: var(--ink-4); }
section > .fr-go { margin-top: 32px; }
.fr-planfoot { margin-top: 16px !important; font-size: 13.5px !important; }
.fr-planfoot a { color: var(--ink); }

/* the stage: screenshot, radar on top of its lower left */
.fr-stage { position: relative; min-width: 0; }
.fr-shotx { margin: 0; border: 1px solid var(--fr-edge); background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.fr-shotx img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fr-stage .fr-radar ol { min-height: 0; }
.fr-stage .fr-radar li .tx { -webkit-line-clamp: 1; }
.fr-stage .fr-radar-foot { margin-top: 0; }
@media (min-width: 1040px) {
  .fr-stage { padding-bottom: 210px; }
  .fr-stage .fr-radar { position: absolute; left: -32px; right: 96px; bottom: 0; background: color-mix(in srgb, #0E0E0E 96%, transparent);
    outline: 1px solid #000; }
}
@media (max-width: 1039px) { .fr-stage .fr-radar { margin: -36px 12px 0; position: relative; } }
@media (max-width: 560px) { .fr-stage .fr-radar { margin: -24px 0 0 10px; } html body.fr :is(.fr-hero, .fr-index-head) .fr-go .fn-btn { flex: 1 1 100%; } }

/* ── v6.1 · pricing and catalogue, same pass ─────────────────────────────── */
/* pricing: a shorter head so the three plans and their buttons reach the first screen */
@media (min-width: 900px) { html body.fr .fr-price-head { padding-top: 52px; grid-template-columns: minmax(0, 1fr); gap: 18px; } html body.fr .fr-price-head h1.fn-h1 { max-width: none; } html body.fr .fr-price-head .fn-lede { max-width: 80ch; } }
html body.fr .fr-price-head .fn-lede { font-size: 17px !important; }
.fr-price-head + .fr-plans { margin-top: 32px; }
.fr-save { margin-left: 8px; padding: 2px 6px; font: 600 11px/1.2 var(--mono); color: var(--accent-ink, #000); background: var(--fr-amber); }
.fr-plan .note b { color: var(--up); font-weight: 600; }
html body.fr .fr-plan .perday { font-size: 13px !important; }
/* the recommended plan first on a phone, where only one card shows at a time */
@media (max-width: 899px) { .fr .fr-plans > .fr-plan.pick { order: -1; } }
/* what removes the risk, right under the buttons */
.fr-assure { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px 24px; font-size: 13.5px; color: var(--ink-3); }
@media (min-width: 760px) { .fr-assure { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-assure li { display: flex; gap: 8px; align-items: baseline; }
.fr-assure li::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--up); transform: translateY(-1px); }
.fr-assure b { color: var(--ink); font-weight: 600; }
/* the desk-by-desk table opens on demand */
/* rows hidden, not clipped: an overflow box would trap the sticky plan header */
.fr-cmpwrap { position: relative; }
.fr-cmpwrap:not(.open) tbody tr:nth-child(n+11) { display: none; }
.fr-cmpwrap:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, var(--s-canvas, #090909)); pointer-events: none; }
.fr-cmpmore { margin-top: 16px; }
/* catalogue: a locked desk says how to open it; the side list carries the way in */
.fr-unlock { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--fr-amber); text-decoration: none; }
.fr-unlock:hover { text-decoration: underline; }
.fr-navcta { margin-top: 24px; padding: 16px; border: 1px solid var(--fr-card-edge, #313131); background: var(--fr-card, #161616); display: grid; gap: 4px; }
.fr-navcta b { font-size: 15px; color: var(--ink); }
.fr-navcta span { font-size: 12.5px; color: var(--ink-4); }
html body.fr .fr-navcta .fn-btn { margin-top: 10px; min-height: 42px; font-size: 14px; }
html body.fr .fr-index-head .fr-go { margin-top: 26px; }
.fr-desk .fr-unlock { grid-column: 2 / -1; justify-self: start; }
/* phone header on the landing page: brand, market switch, Masuk and the CTA must share 390px */
@media (max-width: 440px) {
  html body.fn-welcome .fn-top .fn-brand span, html body.fn-welcome .fn-top .fn-brand b { display: none; }   /* the mark alone, as below 380px everywhere */
  html body.fn-welcome .fn-top nav .fn-btn { padding: 0 10px; margin-left: 4px; font-size: 13px; }
  html body.fn-welcome .fn-top nav .fn-btn.ghost { border-color: transparent !important; padding: 0 6px; }
  html body.fn-welcome .fn-top .fn-mkt button { padding: 0 8px; }
}
@media (max-width: 560px) { html body.fr .fr-go .fn-btn.acc::before { inset: -4px 0; } }   /* full-width button: the ring stays inside the gutter */