/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL — core design system
   Loaded by every layout (public, auth, dashboard) as the base layer.

   Three jobs:
   1. Define Terminal's own tokens + components (--tm-*, .tm-*).
   2. ALIAS the platform's token names (--bg, --card, --gold, --text, --red …)
      onto this palette, so a view that falls back to the default theme — and
      the notification dropdown, whose CSS is injected at runtime by
      assets/js/notifications.js and references var(--gold)/var(--blue) — render
      in Terminal's colours rather than the stock dark-gold ones.
   3. Style the shared platform classes that come out of core helpers and the
      SEEDED DATABASE CONTENT: .alert (flash_html), .badge (status_badge),
      .form-* (built by the deposit/withdraw field renderers) and .fd-pay*
      (the payment-instruction HTML in install.sql, which every theme receives).

   The look: near-black instrument panel, one signal colour, IBM Plex Mono for
   every figure, hairline 1px grids instead of drop shadows.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ─────────────────────────────────────────────────────────────
   Dark is the native mode. Light is a real second mode, not an inversion:
   --tm-lime becomes a deep olive there, because the signal lime is a *fill*
   colour and lands at roughly 1.4:1 as text on paper. --tm-lime-fill stays
   bright in both modes and always carries --tm-on-lime ink on top of it. */
:root,
:root[data-theme="dark"] {
  --tm-bg:        #0a0d12;
  --tm-bg-2:      #111620;
  --tm-bg-3:      #171d29;
  --tm-line:      #232b3a;
  --tm-line-2:    #2e394d;
  --tm-txt:       #e6ebf2;
  --tm-txt-2:     #8d9aad;
  --tm-txt-3:     #5d6878;

  --tm-lime:      #c3f53c;   /* signal — text, borders, active states */
  --tm-lime-fill: #c3f53c;   /* signal — filled surfaces */
  --tm-lime-dim:  rgba(195, 245, 60, .13);
  --tm-cyan:      #4dd8e8;
  --tm-cyan-dim:  rgba(77, 216, 232, .13);
  --tm-amber:     #ffb545;
  --tm-red:       #ff5f6d;
  --tm-red-dim:   rgba(255, 95, 109, .13);
  --tm-green:     #3ddc97;
  --tm-green-dim: rgba(61, 220, 151, .13);
  --tm-on-lime:   #0a0d12;

  --tm-glow:      0 28px 70px rgba(0, 0, 0, .5);
  --tm-glow-sm:   0 12px 30px rgba(0, 0, 0, .35);
  --tm-r:         12px;
  --tm-r-sm:      8px;
  --tm-max:       1200px;

  --tm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tm-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --tm-bg:        #f6f7f3;
  --tm-bg-2:      #ffffff;
  --tm-bg-3:      #edefe7;
  --tm-line:      #dde0d5;
  --tm-line-2:    #c4c9b8;
  --tm-txt:       #10141a;
  --tm-txt-2:     #4d5763;
  --tm-txt-3:     #79838f;

  --tm-lime:      #4a6708;   /* deep olive — the signal colour, made legible */
  --tm-lime-fill: #c3f53c;
  --tm-lime-dim:  rgba(122, 168, 20, .16);
  --tm-cyan:      #0d7280;
  --tm-cyan-dim:  rgba(13, 114, 128, .12);
  --tm-amber:     #96590a;
  --tm-red:       #c22a37;
  --tm-red-dim:   rgba(194, 42, 55, .1);
  --tm-green:     #0b7448;
  --tm-green-dim: rgba(11, 116, 72, .11);
  --tm-on-lime:   #0a0d12;

  --tm-glow:      0 22px 54px rgba(16, 20, 26, .12);
  --tm-glow-sm:   0 10px 24px rgba(16, 20, 26, .08);

  color-scheme: light;
}

/* Platform aliases — see the header note. Any fallback view or injected
   stylesheet that asks for --gold gets Terminal's signal colour. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg:        var(--tm-bg);
  --bg2:       var(--tm-bg-2);
  --sidebar:   var(--tm-bg-2);
  --card:      var(--tm-bg-2);
  --card2:     var(--tm-bg-3);
  --border:    var(--tm-line);
  --gold:      var(--tm-lime);
  --gold2:     var(--tm-lime-fill);
  --teal:      var(--tm-cyan);
  --teal2:     var(--tm-cyan);
  --red:       var(--tm-red);
  --green:     var(--tm-green);
  --blue:      var(--tm-cyan);
  --purple:    #a78bfa;
  --text:      var(--tm-txt);
  --text2:     var(--tm-txt-2);
  --text3:     var(--tm-txt-3);
  --nav-bg:    var(--tm-bg-2);
  --glow-gold: var(--tm-glow-sm);
  --glow-teal: var(--tm-glow-sm);
  --shadow:    rgba(0, 0, 0, .4);
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--tm-bg);
  color: var(--tm-txt);
  font-family: var(--tm-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--tm-lime-fill); color: var(--tm-on-lime); }

:focus-visible {
  outline: 2px solid var(--tm-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Every figure in this theme is tabular mono. It is the single strongest
   signal that the product is an instrument, and it stops columns of money
   from jittering as digits change. */
.mono,
.tm-num {
  font-family: var(--tm-mono);
  font-variant-numeric: tabular-nums;
}

.tm-wrap { max-width: var(--tm-max); margin: 0 auto; padding: 0 26px; }
.tm-up { color: var(--tm-green); }
.tm-dn { color: var(--tm-red); }

/* ══ Buttons ══════════════════════════════════════════════════════════════
   .btn is the platform's own class name and is kept so fallback views and
   seeded content keep working; .tm-btn is an alias for this theme's markup. */
.btn, .tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tm-lime-fill); color: var(--tm-on-lime);
  border: 1px solid var(--tm-lime-fill); border-radius: var(--tm-r-sm);
  padding: 12px 18px; font-size: .85rem; font-weight: 600; font-family: inherit;
  line-height: 1.2; min-height: 46px; cursor: pointer; text-align: center;
  transition: transform .16s, filter .16s, border-color .16s, background-color .16s, color .16s;
}
.btn:hover, .tm-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active, .tm-btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .tm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

.btn-ghost, .tm-btn.ghost, .btn.ghost {
  background: transparent; color: var(--tm-txt); border-color: var(--tm-line);
}
.btn-ghost:hover, .tm-btn.ghost:hover, .btn.ghost:hover {
  border-color: var(--tm-lime); color: var(--tm-lime); filter: none; transform: none;
}
.tm-btn.cyan, .btn.btn-cyan {
  background: transparent; color: var(--tm-cyan); border-color: var(--tm-cyan);
}
.tm-btn.cyan:hover, .btn.btn-cyan:hover { background: var(--tm-cyan-dim); filter: none; }
.tm-btn.danger, .btn.danger { color: var(--tm-red); border-color: var(--tm-red); background: transparent; }
.tm-btn.danger:hover, .btn.danger:hover { background: var(--tm-red-dim); filter: none; }

/* The platform's default theme calls its primary button btn-gold. */
.btn-gold { background: var(--tm-lime-fill); color: var(--tm-on-lime); border-color: var(--tm-lime-fill); }

.btn-sm, .tm-btn.btn-sm, .btn.btn-sm { padding: 9px 14px; font-size: .79rem; min-height: 40px; }
.btn-lg, .tm-btn.btn-lg, .btn.btn-lg { padding: 15px 26px; font-size: .94rem; min-height: 52px; }
.tm-btn.block, .btn.block { width: 100%; }

/* ══ Forms ════════════════════════════════════════════════════════════════
   .form-input / .form-select / .form-textarea are built at runtime by the
   deposit and withdraw field renderers, so these names are contract. */
.form-label, .tm-label {
  display: block; font-family: var(--tm-mono); font-size: .68rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--tm-txt-3);
  margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea, .tm-input {
  width: 100%; background: var(--tm-bg-3); color: var(--tm-txt);
  border: 1px solid var(--tm-line); border-radius: var(--tm-r-sm);
  padding: 13px 14px; font-size: .92rem; min-height: 48px;
  transition: border-color .16s, background-color .16s;
}
.form-textarea, textarea.form-input { min-height: 110px; resize: vertical; line-height: 1.6; }
.form-input:focus, .form-select:focus, .form-textarea:focus, .tm-input:focus {
  outline: none; border-color: var(--tm-lime); background: var(--tm-bg-2);
}
.form-input::placeholder, .form-textarea::placeholder, .tm-input::placeholder { color: var(--tm-txt-3); }
.form-input:disabled, .tm-input:disabled { opacity: .55; cursor: not-allowed; }
.form-select, select.form-input {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type="file"].form-input { padding: 11px 12px; min-height: 46px; font-size: .82rem; }
input[type="file"]::file-selector-button {
  background: var(--tm-bg-2); color: var(--tm-txt); border: 1px solid var(--tm-line);
  border-radius: 6px; padding: 7px 12px; margin-right: 12px; cursor: pointer; font-size: .8rem;
}

/* ══ Alerts (flash_html) & badges (status_badge) ══════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--tm-line); border-left-width: 3px;
  background: var(--tm-bg-2); border-radius: var(--tm-r-sm);
  padding: 13px 15px; font-size: .87rem; margin-bottom: 16px; line-height: 1.55;
}
.alert-success { border-left-color: var(--tm-green); background: var(--tm-green-dim); }
.alert-danger  { border-left-color: var(--tm-red);   background: var(--tm-red-dim); }
.alert-warning { border-left-color: var(--tm-amber); background: rgba(255, 181, 69, .12); }
.alert-info    { border-left-color: var(--tm-cyan);  background: var(--tm-cyan-dim); }

.badge, .tm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tm-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--tm-line); background: var(--tm-bg-3); color: var(--tm-txt-2);
  white-space: nowrap;
}
.badge-success, .tm-pill.ok   { color: var(--tm-green); border-color: var(--tm-green); background: var(--tm-green-dim); }
.badge-warning, .tm-pill.warn { color: var(--tm-amber); border-color: var(--tm-amber); background: rgba(255, 181, 69, .12); }
.badge-danger,  .tm-pill.bad  { color: var(--tm-red);   border-color: var(--tm-red);   background: var(--tm-red-dim); }
.badge-info,    .tm-pill.info { color: var(--tm-cyan);  border-color: var(--tm-cyan);  background: var(--tm-cyan-dim); }
.badge-muted { color: var(--tm-txt-3); }

/* The notice block used by a couple of auth views. */
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--tm-line); border-radius: var(--tm-r-sm);
  padding: 13px 15px; font-size: .85rem; line-height: 1.55; background: var(--tm-bg-3);
}
.notice-warn { border-color: var(--tm-amber); background: rgba(255, 181, 69, .1); }
.notice-info { border-color: var(--tm-cyan);  background: var(--tm-cyan-dim); }

/* ══ Terminal window chrome ═══════════════════════════════════════════════
   The signature component. A bordered panel with a title bar carrying three
   inert dots and a monospace "filename". Used for the homepage calculator,
   the auth panel and the dashboard's framed sections. */
.tm-term {
  border: 1px solid var(--tm-line); border-radius: var(--tm-r);
  background: var(--tm-bg-2); overflow: hidden; box-shadow: var(--tm-glow);
}
.tm-term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-bottom: 1px solid var(--tm-line); background: var(--tm-bg-3);
}
.tm-term-bar em { width: 9px; height: 9px; border-radius: 50%; background: var(--tm-line-2); display: block; }
.tm-term-bar strong {
  margin-left: 8px; font-family: var(--tm-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .05em; color: var(--tm-txt-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-term-body { padding: 20px 18px; }

/* ══ Theme toggle ═════════════════════════════════════════════════════════
   No icon font dependency: the glyph is drawn from the ::before content so it
   works before Font Awesome has loaded. */
.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--tm-line); border-radius: 10px;
  background: var(--tm-bg-2); color: var(--tm-txt-2);
  display: grid; place-items: center; cursor: pointer;
  font-size: .95rem; line-height: 1; transition: .16s;
}
.theme-toggle::before { content: '\25D0'; }        /* half-filled circle */
:root[data-theme="light"] .theme-toggle::before { content: '\25D1'; }
.theme-toggle:hover { border-color: var(--tm-lime); color: var(--tm-lime); }

/* ══ Market tape ══════════════════════════════════════════════════════════ */
.tm-tape {
  border-bottom: 1px solid var(--tm-line); background: var(--tm-bg-2);
  overflow: hidden; min-height: 40px;
}
.tm-tape > div { max-width: 100%; }

/* ══ Public nav ═══════════════════════════════════════════════════════════ */
.tm-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--tm-bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tm-line);
}
@supports not (backdrop-filter: blur(1px)) { .tm-nav { background: var(--tm-bg); } }
.tm-nav.scrolled { box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
.tm-nav-in { display: flex; align-items: center; gap: 22px; height: 66px; }

.tm-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; flex-shrink: 0;
}
.tm-logo i {
  width: 26px; height: 26px; background: var(--tm-lime-fill); border-radius: 6px;
  display: grid; place-items: center; color: var(--tm-on-lime);
  font-style: normal; font-weight: 700; font-size: .8rem; font-family: var(--tm-mono);
  flex-shrink: 0;
}
.tm-logo img { height: 30px; width: auto; display: block; }

.tm-nav-links { display: flex; gap: 22px; margin-left: auto; font-size: .86rem; color: var(--tm-txt-2); list-style: none; }
.tm-nav-links a { transition: color .15s; padding: 4px 0; }
.tm-nav-links a:hover, .tm-nav-links a.active { color: var(--tm-lime); }
.tm-nav-right { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.tm-nav-links + .tm-nav-right { margin-left: 0; }

.tm-burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--tm-line);
  border-radius: 10px; background: var(--tm-bg-2); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0;
}
.tm-burger span { width: 16px; height: 1.5px; background: var(--tm-txt); transition: .2s; display: block; }
.tm-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.tm-burger.open span:nth-child(2) { opacity: 0; }
.tm-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.tm-mobile-nav {
  display: none; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--tm-line); background: var(--tm-bg-2);
  padding: 12px 17px 18px; position: sticky; top: 66px; z-index: 39;
}
.tm-mobile-nav.open { display: flex; }
.tm-mobile-nav > a {
  display: flex; align-items: center; gap: 12px; padding: 13px 12px;
  border-radius: var(--tm-r-sm); font-size: .92rem; color: var(--tm-txt-2); min-height: 48px;
}
.tm-mobile-nav > a:hover { background: var(--tm-bg-3); color: var(--tm-lime); }
.tm-mobile-nav .tm-mobile-btns { display: flex; gap: 9px; margin-top: 10px; }
.tm-mobile-nav .tm-mobile-btns > * { flex: 1; }
.tm-translate-slot:not(:empty) { padding: 10px 12px; }

/* ══ Public page furniture ════════════════════════════════════════════════ */
.tm-section { padding-block: 62px; border-bottom: 1px solid var(--tm-line); }
.tm-section.tight { padding-block: 48px; }
.tm-section.flush { padding-top: 0; }
.tm-section.alt { background: var(--tm-bg-2); }

.tm-sec-head { margin-bottom: 32px; }
.tm-eyebrow {
  font-family: var(--tm-mono); font-size: .72rem; color: var(--tm-lime);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 11px;
}
.tm-h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; }
.tm-h1 mark { background: none; color: var(--tm-lime); }
.tm-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.14; }
.tm-h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; }
.tm-lede { color: var(--tm-txt-2); font-size: 1.03rem; max-width: 34em; margin-top: 20px; line-height: 1.75; }
.tm-sec-sub { color: var(--tm-txt-2); margin-top: 11px; max-width: 46em; font-size: .95rem; }

.tm-pill-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--tm-line); background: var(--tm-bg-2);
  border-radius: 100px; padding: 6px 14px; font-size: .74rem; color: var(--tm-txt-2);
  font-family: var(--tm-mono);
}
.tm-pill-badge i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tm-green);
  box-shadow: 0 0 0 3px var(--tm-green-dim); font-style: normal; flex-shrink: 0;
}

/* ── Hero ── */
.tm-hero { padding-block: 62px 52px; border-bottom: 1px solid var(--tm-line); }
.tm-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: center; }
.tm-hero-cta { display: flex; gap: 11px; margin-top: 28px; flex-wrap: wrap; }
.tm-trust-line {
  display: flex; gap: 22px; margin-top: 26px; font-size: .75rem;
  color: var(--tm-txt-3); flex-wrap: wrap; font-family: var(--tm-mono);
}
.tm-trust-line b { color: var(--tm-txt-2); font-weight: 500; }

/* ── Calculator panel (inside the terminal chrome) ── */
.tm-calc-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.tm-calc-row label,
.tm-calc-lab { font-family: var(--tm-mono); font-size: .68rem; color: var(--tm-txt-3); letter-spacing: .11em; text-transform: uppercase; }
.tm-calc-row .v { font-family: var(--tm-mono); font-size: 1rem; font-weight: 600; text-align: right; }

.tm-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 3px; background: var(--tm-bg-3); border: 1px solid var(--tm-line);
  margin: 6px 0 8px; cursor: pointer;
}
.tm-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tm-lime-fill); border: 3px solid var(--tm-bg-2); cursor: pointer;
}
.tm-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--tm-bg-2);
  background: var(--tm-lime-fill); cursor: pointer;
}
.tm-range-ends {
  display: flex; justify-content: space-between; font-family: var(--tm-mono);
  font-size: .68rem; color: var(--tm-txt-3); margin-bottom: 16px;
}
.tm-calc-tabs { display: flex; gap: 2px; background: var(--tm-bg-3); border: 1px solid var(--tm-line); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.tm-calc-tab {
  flex: 1; min-height: 38px; border: 0; background: transparent; color: var(--tm-txt-2);
  border-radius: 7px; font-family: var(--tm-mono); font-size: .74rem; font-weight: 500;
  cursor: pointer; transition: .15s; padding: 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-calc-tab.on { background: var(--tm-bg-2); color: var(--tm-lime); }

.tm-payout { border-top: 1px solid var(--tm-line); padding-top: 17px; }
.tm-payout-l { font-family: var(--tm-mono); font-size: .68rem; color: var(--tm-txt-3); letter-spacing: .11em; text-transform: uppercase; }
.tm-big {
  font-family: var(--tm-mono); font-size: clamp(1.9rem, 6vw, 2.4rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; margin-top: 8px; color: var(--tm-lime);
}
.tm-payout-s { font-family: var(--tm-mono); font-size: .78rem; color: var(--tm-txt-2); margin-top: 9px; }

/* ── Hairline grids ────────────────────────────────────────────────────────
   The 1px-gap-over-a-line-coloured-background trick: children paint their own
   surface, the gap shows the container through, and the result is a table of
   cells divided by true hairlines that never double up at the joins. */
.tm-grid-hair {
  display: grid; gap: 1px; background: var(--tm-line);
  border: 1px solid var(--tm-line); border-radius: var(--tm-r); overflow: hidden;
}
.tm-grid-hair > * { background: var(--tm-bg-2); }

.tm-term-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--tm-line); border-top: 1px solid var(--tm-line); }
.tm-tf { background: var(--tm-bg-2); padding: 14px 15px; }
.tm-tf b { display: block; font-family: var(--tm-mono); font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; }
.tm-tf span { font-family: var(--tm-mono); font-size: .63rem; color: var(--tm-txt-3); letter-spacing: .09em; text-transform: uppercase; display: block; margin-top: 5px; }

/* ── Trust strip ── */
.tm-strip { grid-template-columns: repeat(5, 1fr); }
.tm-strip > div { padding: 20px 16px; text-align: center; }
.tm-strip b { display: block; font-family: var(--tm-mono); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.tm-strip span { font-family: var(--tm-mono); font-size: .63rem; color: var(--tm-txt-3); letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; display: block; }

/* ── Plans ── */
.tm-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tm-plan {
  border: 1px solid var(--tm-line); border-radius: var(--tm-r); background: var(--tm-bg-2);
  padding: 22px 20px; display: flex; flex-direction: column; position: relative;
  transition: transform .2s, border-color .2s;
}
.tm-plan:hover { border-color: var(--tm-line-2); transform: translateY(-3px); }
.tm-plan.hot { border-color: var(--tm-lime); box-shadow: 0 0 0 1px var(--tm-lime-dim); }
.tm-plan-tag {
  position: absolute; top: -9px; left: 20px; background: var(--tm-lime-fill); color: var(--tm-on-lime);
  font-family: var(--tm-mono); font-size: .58rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
}
.tm-plan-head { display: flex; align-items: baseline; gap: 9px; }
.tm-plan-glyph { font-family: var(--tm-mono); color: var(--tm-lime); font-size: .95rem; }
.tm-plan-n { font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; }
.tm-plan-r {
  font-family: var(--tm-mono); font-size: 2.1rem; font-weight: 600; color: var(--tm-lime);
  letter-spacing: -.03em; line-height: 1; margin: 14px 0 4px;
}
.tm-plan-r small { font-size: .8rem; color: var(--tm-txt-3); font-weight: 400; }
.tm-plan-t { font-family: var(--tm-mono); font-size: .76rem; color: var(--tm-txt-3); }
.tm-plan-eg {
  margin-top: 16px; border: 1px dashed var(--tm-line-2); border-radius: var(--tm-r-sm);
  padding: 11px 13px; background: var(--tm-bg-3);
}
.tm-plan-eg-lab { font-family: var(--tm-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tm-txt-3); }
.tm-plan-eg-row { display: flex; gap: 14px; margin-top: 7px; }
.tm-plan-eg-row > span { display: flex; flex-direction: column; min-width: 0; }
.tm-plan-eg-row b { font-family: var(--tm-mono); font-size: .95rem; font-weight: 600; }
.tm-plan-eg-row em { font-family: var(--tm-mono); font-size: .6rem; font-style: normal; color: var(--tm-txt-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* Fixed five-row spec table, so every card in the row is the same height by
   construction rather than by whatever the data happened to produce. */
.tm-plan-specs { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--tm-line); flex: 1; }
.tm-plan-specs > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .8rem; }
.tm-plan-specs dt { color: var(--tm-txt-3); }
.tm-plan-specs dd { font-family: var(--tm-mono); font-weight: 500; text-align: right; }

/* ── Steps ── */
.tm-steps { grid-template-columns: repeat(4, 1fr); }
.tm-step { padding: 26px 22px; }
.tm-step b { font-family: var(--tm-mono); font-size: .72rem; color: var(--tm-lime); display: block; margin-bottom: 13px; letter-spacing: .08em; }
.tm-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.tm-step p { font-size: .85rem; color: var(--tm-txt-2); line-height: 1.68; }

/* ── Capital allocation ── */
.tm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.tm-alloc { display: flex; flex-direction: column; gap: 1px; background: var(--tm-line); border: 1px solid var(--tm-line); border-radius: var(--tm-r); overflow: hidden; }
.tm-al { background: var(--tm-bg-2); padding: 17px 19px; }
.tm-al-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tm-al-h b { font-size: .92rem; font-weight: 600; }
.tm-al-h span { font-family: var(--tm-mono); font-size: .95rem; color: var(--tm-lime); font-weight: 600; }
.tm-al p { font-size: .79rem; color: var(--tm-txt-3); margin-top: 5px; line-height: 1.6; }
.tm-al-bar { height: 4px; background: var(--tm-bg-3); border-radius: 2px; margin-top: 11px; overflow: hidden; }
.tm-al-bar i { display: block; height: 100%; border-radius: 2px; background: var(--tm-lime-fill); }

.tm-reserve { grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.tm-rv { padding: 20px; }
.tm-rv b { display: block; font-family: var(--tm-mono); font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; }
.tm-rv span { font-family: var(--tm-mono); font-size: .63rem; color: var(--tm-txt-3); letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; display: block; }

/* ── Safeguard cards ── */
.tm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tm-card {
  border: 1px solid var(--tm-line); border-radius: var(--tm-r);
  background: var(--tm-bg-2); padding: 22px 20px;
}
.tm-card-ico {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tm-lime-dim); color: var(--tm-lime); font-size: .95rem; margin-bottom: 14px;
}
.tm-card-ico.cyan { background: var(--tm-cyan-dim); color: var(--tm-cyan); }
.tm-card-ico.amber { background: rgba(255, 181, 69, .13); color: var(--tm-amber); }
.tm-card h3 { font-size: .98rem; font-weight: 600; margin-bottom: 7px; }
.tm-card p { font-size: .84rem; color: var(--tm-txt-2); line-height: 1.65; }

/* ── Comparison ── */
.tm-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.tm-vs-col { border: 1px solid var(--tm-line); border-radius: var(--tm-r); background: var(--tm-bg-2); padding: 22px 20px; }
.tm-vs-col.muted { opacity: .72; }
.tm-vs-col:not(.muted) { border-color: var(--tm-lime); }
.tm-vs-head { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--tm-line); }
.tm-vs-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tm-vs-col li { display: flex; gap: 10px; font-size: .85rem; color: var(--tm-txt-2); line-height: 1.55; }
.tm-vs-col li i { flex-shrink: 0; margin-top: 4px; font-size: .78rem; }
.tm-vs-col.muted li i { color: var(--tm-txt-3); }
.tm-vs-col:not(.muted) li i { color: var(--tm-lime); }
.tm-vs-sep { font-family: var(--tm-mono); font-size: .72rem; color: var(--tm-txt-3); letter-spacing: .1em; text-transform: uppercase; }

/* ── FAQ ── */
.tm-faq { display: flex; flex-direction: column; gap: 1px; background: var(--tm-line); border: 1px solid var(--tm-line); border-radius: var(--tm-r); overflow: hidden; }
.tm-faq details { background: var(--tm-bg-2); }
.tm-faq summary {
  cursor: pointer; list-style: none; padding: 17px 20px; font-weight: 600; font-size: .95rem;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 56px;
}
.tm-faq summary::-webkit-details-marker { display: none; }
.tm-faq summary::after { content: '+'; font-family: var(--tm-mono); color: var(--tm-lime); font-size: 1.2rem; flex-shrink: 0; transition: transform .2s; }
.tm-faq details[open] summary::after { transform: rotate(45deg); }
.tm-faq details > *:not(summary) { padding: 0 20px 18px; font-size: .88rem; color: var(--tm-txt-2); line-height: 1.72; }
.tm-faq-cat { font-family: var(--tm-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tm-lime); margin: 30px 0 12px; }
.tm-faq-cat:first-of-type { margin-top: 0; }

/* ── Testimonials ── */
.tm-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tm-quote { border: 1px solid var(--tm-line); border-radius: var(--tm-r); background: var(--tm-bg-2); padding: 22px 20px; display: flex; flex-direction: column; }
.tm-quote-stars { color: var(--tm-lime); font-size: .75rem; letter-spacing: 2px; margin-bottom: 12px; }
.tm-quote blockquote { font-size: .9rem; color: var(--tm-txt-2); line-height: 1.7; flex: 1; }
.tm-quote figcaption { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--tm-line); }
.tm-quote-ava {
  width: 34px; height: 34px; border-radius: 8px; background: var(--tm-bg-3); border: 1px solid var(--tm-line);
  display: grid; place-items: center; font-family: var(--tm-mono); font-weight: 600; font-size: .8rem;
  color: var(--tm-lime); flex-shrink: 0;
}
.tm-quote-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tm-quote-who b { font-size: .86rem; font-weight: 600; }
.tm-quote-who em { font-family: var(--tm-mono); font-size: .68rem; font-style: normal; color: var(--tm-txt-3); }
.tm-quote-amt { font-family: var(--tm-mono); font-size: .86rem; font-weight: 600; color: var(--tm-green); text-align: right; }
.tm-quote-amt small { display: block; font-size: .58rem; color: var(--tm-txt-3); letter-spacing: .08em; text-transform: uppercase; }

/* ── Contact ── */
.tm-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 26px; align-items: start; }
.tm-contact-item {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px 0;
  border-bottom: 1px solid var(--tm-line);
}
.tm-contact-item > i { color: var(--tm-lime); width: 20px; text-align: center; margin-top: 4px; flex-shrink: 0; }
.tm-contact-item b { display: block; font-family: var(--tm-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-txt-3); }
.tm-contact-item span { font-size: .9rem; word-break: break-word; }
.tm-hours-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--tm-line); font-size: .84rem; }
.tm-hours-row span:first-child { color: var(--tm-txt-2); }
.tm-hours-row span:last-child { font-family: var(--tm-mono); }

/* ── CTA ── */
.tm-cta { text-align: center; border: 1px solid var(--tm-line); border-radius: var(--tm-r); background: var(--tm-bg-2); padding: 46px 26px; }
.tm-cta h2 { max-width: 17em; margin: 0 auto 14px; }
.tm-cta > p { color: var(--tm-txt-2); max-width: 36em; margin: 0 auto 26px; }
.tm-cta-row { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; }
.tm-risk { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tm-line); line-height: 1.7; font-size: .74rem; color: var(--tm-txt-3); text-align: left; }
.tm-risk strong { color: var(--tm-txt-2); }

/* ── Footer ── */
.tm-footer { background: var(--tm-bg-2); border-top: 1px solid var(--tm-line); padding-block: 40px 28px; font-size: .8rem; color: var(--tm-txt-3); }
.tm-fgrid { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.tm-fcol a { display: block; color: var(--tm-txt-2); margin-bottom: 8px; font-size: .82rem; }
.tm-fcol a:hover { color: var(--tm-lime); }
.tm-fh { font-family: var(--tm-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tm-txt); font-weight: 600; margin-bottom: 13px; }
.tm-fbrand { max-width: 22em; }
.tm-fbrand p { line-height: 1.7; margin-top: 13px; color: var(--tm-txt-3); }
.footer-socials { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.social-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--tm-line);
  background: var(--tm-bg-3); display: grid; place-items: center; color: var(--tm-txt-2);
  transition: .16s; font-size: .9rem;
}
.social-btn:hover { border-color: var(--tm-lime); color: var(--tm-lime); }
.tm-fbottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tm-line);
  font-size: .76rem; line-height: 1.6;
}
.tm-fbadges { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--tm-mono); font-size: .68rem; }
.tm-fbadges span { display: inline-flex; align-items: center; gap: 6px; }

#backToTop {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--tm-line); background: var(--tm-bg-2); color: var(--tm-lime);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  transform: translateY(8px);
}
#backToTop.visible { opacity: 1; pointer-events: auto; transform: none; }

/* ── Google Translate combo ── */
.goog-te-combo {
  background: var(--tm-bg-3) !important; color: var(--tm-txt) !important;
  border: 1px solid var(--tm-line) !important; border-radius: 8px !important;
  padding: .45rem .6rem !important; font-size: .78rem !important;
  font-family: var(--tm-mono) !important; cursor: pointer !important;
}
.goog-te-combo:hover, .goog-te-combo:focus { border-color: var(--tm-lime) !important; outline: none !important; }

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   The class is applied by JS, never in the markup — so with no script, an old
   browser, or a reduced-motion preference, nothing is ever hidden. */
.tm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tm-reveal.tm-in { opacity: 1; transform: none; }

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .tm-hero-grid, .tm-split { grid-template-columns: 1fr; gap: 36px; }
  .tm-plans, .tm-cards { grid-template-columns: 1fr 1fr; }
  .tm-steps, .tm-reserve { grid-template-columns: 1fr 1fr; }
  .tm-strip { grid-template-columns: repeat(3, 1fr); }
  .tm-quotes { grid-template-columns: 1fr; }
  .tm-contact-grid { grid-template-columns: 1fr; }
  .tm-vs { grid-template-columns: 1fr; }
  .tm-vs-sep { text-align: center; }
}

@media (max-width: 900px) {
  .tm-nav-links { display: none; }
  .tm-burger { display: flex; }
  .tm-nav-right { margin-left: auto; }
}

@media (max-width: 620px) {
  .tm-wrap { padding: 0 17px; }
  .tm-section { padding-block: 44px; }
  .tm-hero { padding-block: 40px 36px; }
  .tm-plans, .tm-steps, .tm-reserve, .tm-cards, .tm-term-foot { grid-template-columns: 1fr; }
  .tm-strip { grid-template-columns: 1fr 1fr; }
  .tm-nav-right .tm-hide-xs { display: none; }
  .tm-cta { padding: 34px 20px; }
  .tm-fgrid { gap: 26px; }
  .tm-fcol { min-width: 44%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .tm-reveal { opacity: 1; transform: none; }
}