/* ==========================================================================
   Tradelines Network — Financial Services Theme  ("Emerald Prestige")
   Applied to public marketing pages only. Loaded last so it governs the
   final look: flat colour, thin rules, serif headlines, no gradients.
   ========================================================================== */

:root,
body {
  --tf-ink:        #0b1f18;   /* body copy */
  --tf-deep:       #064e3b;   /* header / primary */
  --tf-emerald:    #0d7a5f;   /* action */
  --tf-emerald-dk: #0a604a;
  --tf-gold:       #d8bd70;   /* accessible accent on deep emerald */
  --tf-gold-ink:   #735d1d;   /* accessible gold-derived text on light */
  --tf-cream:      #f5f0e0;
  --tf-page:       #f7f9f8;
  --tf-surface:    #ffffff;
  --tf-line:       #dde5e1;
  --tf-line-soft:  #eaefec;
  --tf-muted:      #56675f;

  /* Re-map legacy tokens used across the marketing pages */
  --ink: var(--tf-ink);
  --ink-light: var(--tf-muted);
  --sky: var(--tf-emerald);
  --sky-pale: #eef5f1;
  --gold: var(--tf-gold);
  --gold-light: #faf6ea;
  --mint: var(--tf-emerald);
  --surface: var(--tf-page);
  --white: var(--tf-surface);
  --border: var(--tf-line);
  --radius: 4px;
  --shadow: 0 1px 2px rgba(11, 31, 24, .06);
  --shadow-lg: 0 6px 24px rgba(11, 31, 24, .09);

  /* Re-map the previous TLS theme tokens so every rule keyed to them
     inherits the financial-services palette. */
  --tls-navy: #064e3b;
  --tls-navy-dark: #053f30;
  --tls-slate: #0d7a5f;
  --tls-slate-dark: #0a604a;
  --tls-yellow: #c9a84c;
  --tls-yellow-dark: #b8963c;
  --tls-text: #33443d;
  --tls-head: #064e3b;
  --tls-line: #dde5e1;
  --tls-soft: #f7f9f8;
}

/* ---------- Base ---------- */
html body, html body p, html body li, html body span, html body a,
html body div, html body label, html body input, html body select,
html body textarea, html body button {
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif !important;
}
body {
  background: var(--tf-page);
  color: var(--tf-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
html body [style*="monospace"], html body code, html body pre {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important;
}

html body h1, html body h2, html body h3, html body h4,
html body h1 em, html body h2 em, html body h3 em {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}
html body h1, html body h2, html body h3, html body h4 {
  color: var(--tf-deep);
}


/* Kill every decorative gradient / glow — the "vibe coded" tells. */
html body .hero-glow, html body .hero-glow2, html body .hero-grid-bg { display: none !important; }
.hero, .cta-band, .trust-bar, .page-hero, .page-hero-overlay,
.section, .trust-panel, .opp-card, .step-card, .use-card, .value-card,
.req-card, .sell-step, .contact-channel, .blog-card, .article-card,
html body .tradeline-card, html body footer, html body header, html body .topbar, html body .mission-stat {
  background-image: none !important;
}

/* ---------- Top announcement bar ---------- */
html body .topbar {
  background: var(--tf-deep) !important;
  color: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(201, 168, 76, .4);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
html body .topbar a { color: #fff !important; text-decoration-color: var(--tf-gold) !important; }

/* ---------- Header ---------- */
html body header {
  background: var(--tf-deep) !important;
  border-bottom: 3px solid var(--tf-gold) !important;
  box-shadow: none !important;
}
html body .logo { color: #fff !important; letter-spacing: -0.01em; }
html body .logo span { color: #fff !important; }
html body .logo-icon {
  background: var(--tf-gold) !important;
  color: var(--tf-deep) !important;
  border-radius: 3px !important;
}
html body .logo-icon svg, html body .logo-icon path { stroke: var(--tf-deep); }
html body .nav-links a {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
  border-radius: 2px !important;
}
html body .nav-links a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}
html body .nav-cta, html body .nav-links a.nav-cta {
  background: #fff !important;
  color: var(--tf-deep) !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
}
html body .nav-cta:hover { background: var(--tf-cream) !important; }
html body .mobile-nav { background: var(--tf-deep) !important; }

/* ---------- Buttons ---------- */
html body .btn-primary, html body .submit-btn, html body .cart-btn, html body .co-btn, html body button.btn-primary {
  background: var(--tf-emerald) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--tf-emerald) !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: none !important;
  transition: background .15s ease;
}
html body .btn-primary:hover, html body .submit-btn:hover, html body .cart-btn:hover {
  background: var(--tf-emerald-dk) !important;
  transform: none !important;
}
html body .btn-ghost {
  background: transparent !important;
  color: var(--tf-deep) !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
html body .btn-ghost:hover { border-color: var(--tf-deep) !important; background: #fff !important; }

/* ---------- Hero ---------- */
html body .hero {
  background: var(--tf-deep) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html body .hero, html body .hero h1, html body .hero-content h1 { color: #fff !important; }
html body .hero p, html body .hero-content p { color: rgba(255, 255, 255, .74) !important; }
html body .hero-tag, html body .hero-sub-tag, html body .section-tag {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(201, 168, 76, .55) !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body .section-tag { color: var(--tf-emerald-dk) !important; border-color: rgba(13, 122, 95, .35) !important; }
html body .hero-stat-num { color: #fff !important; font-family: 'Libre Baskerville', Georgia, serif; }
html body .hero-stat-label { color: rgba(255, 255, 255, .6) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; }

/* ---------- Page heroes (interior pages) ---------- */
html body .page-hero { background: var(--tf-deep) !important; }
html body .page-hero-bg { opacity: .14 !important; filter: grayscale(1); }
html body .page-hero-overlay { background: rgba(6, 78, 59, .82) !important; }
html body .page-hero h1 { color: #fff !important; }
html body .page-hero p { color: rgba(255, 255, 255, .74) !important; }
html body .breadcrumb, html body .breadcrumb a { color: rgba(255, 255, 255, .6) !important; }

/* ---------- Sections ---------- */
html body .section { background: var(--tf-page) !important; }
html body .section:nth-of-type(even) { background: var(--tf-surface) !important; }
html body .section-title { position: relative; font-size: clamp(2rem, 4vw, 3.4rem) !important; line-height: 1.04 !important; max-width: 780px; }
html body .section-sub { color: var(--tf-muted) !important; }

/* ---------- Cards / panels ---------- */
.opp-card, .step-card, .use-card, .value-card, .req-card, .sell-step,
.contact-channel, .blog-card, .article-card, .tradeline-card, .trust-panel,
html body .res-panel, html body .faq-item, html body .mission-stat, html body .timeline-content {
  background: var(--tf-surface) !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.opp-card:hover, .use-card:hover, .value-card:hover, .req-card:hover,
html body .blog-card:hover, html body .article-card:hover, html body .tradeline-card:hover, html body .contact-channel:hover {
  border-color: #c3d2cb !important;
  box-shadow: 0 4px 18px rgba(11, 31, 24, .07) !important;
  transform: none !important;
}
html body .tradeline-card.featured { border: 1px solid var(--tf-gold) !important; }
html body .card-badge {
  background: var(--tf-cream) !important;
  color: #7a6320 !important;
  border: 1px solid rgba(201, 168, 76, .5) !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700 !important;
}
html body .card-price, html body .earn-row-value, html body .mission-stat-num, html body .trust-stat {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--tf-deep) !important;
}

/* Icon tiles: flat cream squares, never candy-coloured circles */
html body .use-icon, html body .value-icon, html body .req-icon, html body .sell-step-icon, html body .contact-channel-icon, html body .step-num {
  background: var(--tf-cream) !important;
  background-image: none !important;
  color: var(--tf-deep) !important;
  border: 1px solid rgba(201, 168, 76, .45) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
html body .step-num { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; }
html body .ico-svg { stroke-width: 1.6; }

/* ---------- Trust bar / stats ---------- */
html body .trust-bar { background: var(--tf-surface) !important; border-block: 1px solid var(--tf-line) !important; }
html body .trust-badge { color: var(--tf-muted) !important; font-weight: 600; }
html body .trust-bar-fill { background: var(--tf-emerald) !important; }

/* ---------- Timeline ---------- */
html body .timeline-dot { background: var(--tf-gold) !important; border: 2px solid var(--tf-deep) !important; box-shadow: none !important; }
html body .timeline-year { color: var(--tf-emerald) !important; font-weight: 700; letter-spacing: .06em; }

/* ---------- Tabs ---------- */
html body .res-tab {
  border-radius: 2px !important;
  border: 1px solid var(--tf-line) !important;
  background: var(--tf-surface) !important;
  color: var(--tf-muted) !important;
  font-weight: 600 !important;
}
html body .res-tab.active {
  background: var(--tf-deep) !important;
  border-color: var(--tf-deep) !important;
  color: #fff !important;
}

/* ---------- Forms ---------- */
html body .form-label {
  color: var(--tf-deep) !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
html body .form-input, html body .form-select, html body textarea.form-input {
  border: 1px solid var(--tf-line) !important;
  border-radius: 3px !important;
  background: var(--tf-surface) !important;
  color: var(--tf-ink) !important;
  box-shadow: none !important;
}
html body .form-input:focus, html body .form-select:focus {
  outline: 2px solid var(--tf-deep) !important;
  outline-offset: 2px !important;
  border-color: var(--tf-emerald) !important;
  box-shadow: none !important;
}

/* ---------- FAQ ---------- */
html body .faq-q { color: var(--tf-deep) !important; font-weight: 600 !important; }
html body .faq-a { color: var(--tf-muted) !important; }
html body .faq-arrow { color: var(--tf-emerald) !important; }

/* ---------- Prose ---------- */
html body .prose p, html body .prose li { color: #2a3a34; }
html body .prose a { color: var(--tf-emerald); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CTA band ---------- */
html body .cta-band { background: var(--tf-deep) !important; border-top: 3px solid var(--tf-gold) !important; }
html body .cta-band h2 { color: #fff !important; }
html body .cta-band p { color: rgba(255, 255, 255, .74) !important; }
html body .cta-band .btn-primary { background: var(--tf-gold) !important; border-color: var(--tf-gold) !important; color: var(--tf-deep) !important; }
html body .cta-band .btn-ghost { color: #fff !important; border-color: rgba(255, 255, 255, .38) !important; }
html body .cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .08) !important; }

/* ---------- Carousel ---------- */
html body #showcase-carousel .carousel-slide figcaption {
  background: rgba(6, 78, 59, .9) !important;
  border-top: 2px solid var(--tf-gold);
}
#showcase-carousel .carousel-slide figcaption strong,
#showcase-carousel .carousel-slide figcaption span,
html body #showcase-carousel .carousel-slide figcaption p { color: #fff !important; }
html body #showcase-carousel .carousel-dot { border-radius: 50% !important; width: 8px !important; height: 8px !important; flex: 0 0 8px; background: rgba(6, 78, 59, .25) !important; }
html body #showcase-carousel .carousel-dot.active { background: var(--tf-gold) !important; }

/* ---------- Footer ---------- */
html body footer {
  background: var(--tf-deep) !important;
  color: rgba(255, 255, 255, .68) !important;
  border-top: 3px solid var(--tf-gold) !important;
}
html body footer h4, html body .footer-col h4 { color: #fff !important; letter-spacing: .06em; text-transform: uppercase; font-size: 12px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
html body footer a { color: rgba(255, 255, 255, .68) !important; }
html body footer a:hover { color: var(--tf-gold) !important; }
html body .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12) !important; }

/* ---------- Floating support buttons ---------- */
html body .support-btn { border-radius: 3px !important; box-shadow: 0 4px 16px rgba(11, 31, 24, .22) !important; }

/* ---------- Tables on marketing pages ---------- */
html body table { border-collapse: collapse; }
html body table th {
  background: var(--tf-cream) !important;
  color: var(--tf-deep) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11.5px !important;
  border-bottom: 1px solid var(--tf-line) !important;
}
html body table td { border-bottom: 1px solid var(--tf-line-soft) !important; color: var(--tf-ink) !important; }


/* ---------- Specificity fixes over the previous theme layer ---------- */
html body h1, html body h2, html body h3, html body h4 {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tf-deep) !important;
}
html body .hero-inner h1, html body .page-hero h1, html body .cta-band h2 { color: #fff !important; text-shadow: none !important; }
html body .hero-inner h1 { font-weight: 700 !important; }
html body .hero-tag, html body .hero-sub-tag, html body .section-tag,
html body .card-badge, html body .trust-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 5px 12px !important;
}
html body .hero-sub-tag { border: none !important; color: rgba(255,255,255,.72) !important; text-shadow: none !important; }
html body .hero-btns .btn-primary, html body .success-btn, html body .add-cart-btn,
html body .checkout-btn, html body .auth-submit, html body .place-order-btn, html body button.primary {
  background: var(--tf-emerald) !important;
  border: 1px solid var(--tf-emerald) !important;
  color: #fff !important;
  border-radius: 3px !important;
}
html body .hero-btns .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  color: #fff !important;
}
html body .hero-stat-num { color: #fff !important; }
html body .hero-stat-label { color: rgba(255,255,255,.65) !important; }
html body header { background: var(--tf-deep) !important; border-bottom: 3px solid var(--tf-gold) !important; box-shadow: none !important; }
html body p, html body li, html body td, html body label, html body small { color: var(--tf-ink); }
html body .hero p, html body .page-hero p, html body .cta-band p, html body footer p,
html body footer a, html body footer li, html body .nav-links a { color: inherit; }

/* ---------- Company fact sheet (about / sell / contact / blog) ---------- */
html body .fact-sheet {
  background: var(--tf-surface) !important;
  border: 1px solid var(--tf-line);
  border-top: 3px solid var(--tf-deep);
  border-radius: 4px;
  padding: 32px;
  color: var(--tf-ink);
}
html body .fact-sheet-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--tf-emerald); margin-bottom: 18px;
}
html body .fact-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--tf-line-soft);
}
html body .fact-row:last-child { border-bottom: none; }
html body .fact-key { font-size: 12.5px; color: var(--tf-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 !important; }
html body .fact-val { font-weight: 700; color: var(--tf-deep) !important; text-align: right; }

/* ---------- Icon tiles: fixed square, never full-bleed ---------- */
html body .use-icon, html body .value-icon, html body .req-icon,
html body .sell-step-icon, html body .contact-channel-icon, html body .step-num {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  max-width: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
}
html body .use-icon .ico-svg, html body .value-icon .ico-svg, html body .req-icon .ico-svg,
html body .sell-step-icon .ico-svg, html body .contact-channel-icon .ico-svg {
  width: 20px !important; height: 20px !important;
}

/* ==========================================================================
   Application surfaces — checkout flow, dashboard, admin, auth pages.
   Same Emerald Prestige language as the marketing pages.
   ========================================================================== */

/* Checkout token remap (checkout.css :root vars) */
html body.co-body,
html body {
  --co-sky: var(--tf-emerald);
  --co-gold: var(--tf-gold);
  --co-mint: var(--tf-emerald);
  --co-ink: var(--tf-ink);
  --co-ink-light: var(--tf-muted);
  --co-line: var(--tf-line);
  --co-soft: var(--tf-page);
}

/* Chrome shared by checkout + app pages */
html body header { background: var(--tf-deep) !important; border-bottom: 3px solid var(--tf-gold) !important; box-shadow: none !important; }
html body .logo span { color: var(--tf-gold) !important; }
html body .logo-icon { background: var(--tf-emerald) !important; border-radius: 3px !important; }
html body .nav-cta { background: var(--tf-gold) !important; color: #21200f !important; border-radius: 3px !important; }
html body .mobile-nav { background: var(--tf-deep) !important; }
html body footer { background: var(--tf-deep) !important; }

/* Checkout cards, steps, buttons */
html body .co-card,
html body .co-item,
html body .co-au,
html body .co-pay-tab,
html body .co-crypto-tab,
html body .co-stepper { border-radius: 4px !important; border-color: var(--tf-line) !important; box-shadow: none !important; }
html body .co-title .ico,
html body .co-item-ico { background: var(--tf-cream) !important; border-radius: 3px !important; color: var(--tf-deep) !important; }
html body .co-btn { background: var(--tf-emerald) !important; border: 1px solid var(--tf-emerald) !important; color: #fff !important; border-radius: 3px !important; }
html body .co-btn:hover { background: var(--tf-emerald-dk) !important; border-color: var(--tf-emerald-dk) !important; }
html body .co-btn-ghost { background: #fff !important; color: var(--tf-ink) !important; border: 1px solid var(--tf-line) !important; }
html body .co-price,
html body .co-au-head .co-au-price { color: var(--tf-deep) !important; }
html body .co-step.active .co-step-num { background: var(--tf-emerald) !important; }
html body .co-step.done .co-step-num { background: var(--tf-deep) !important; }
html body .co-line.done { background: var(--tf-deep) !important; }
html body .co-pay-tab.active,
html body .co-crypto-tab.active { border-color: var(--tf-emerald) !important; background: var(--tf-cream) !important; }
html body .co-field input:focus,
html body .co-field select:focus { border-color: var(--tf-emerald) !important; }

/* Dashboard / account */
html body .dash-nav-item.active { background: var(--tf-cream) !important; color: var(--tf-deep) !important; border-radius: 3px !important; }
html body .dash-nav-item.active .nav-icon { color: var(--tf-deep) !important; }
html body .dash-panel,
html body .dash-sidebar { box-shadow: none !important; }
html body .dash-panel-title { color: var(--tf-deep) !important; }

/* Marketplace cards */
html body .tl-card,
html body .filter-card,
html body .listing-card { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--tf-line) !important; }
html body .add-cart-btn { background: var(--tf-emerald) !important; border-radius: 3px !important; color: #fff !important; }

/* Standalone auth cards (reset password) */
html body .card { background: var(--tf-surface) !important; border: 1px solid var(--tf-line) !important; border-radius: 4px !important; color: var(--tf-ink) !important; backdrop-filter: none !important; }
html body .card h1, html body .card label, html body .card .logo { color: var(--tf-deep) !important; }
html body .card .sub { color: var(--tf-muted) !important; }
html body .card input { background: #fff !important; border: 1px solid var(--tf-line) !important; color: var(--tf-ink) !important; border-radius: 3px !important; }
html body .card button { background: var(--tf-emerald) !important; border-radius: 3px !important; }
html body .card .link { color: var(--tf-deep) !important; }

/* Marketplace / app hero bands */
html body .mk-hero,
html body .vault-hero,
html body .co-hero,
html body section[class*="hero"] { background: var(--tf-deep) !important; }

/* ==========================================================================
   Modern Institutional Financial — final system layer
   ========================================================================== */
html { scroll-behavior: smooth; }
html body, html body input, html body select, html body textarea, html body button {
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0;
}
html body nav { max-width: 1240px !important; }
html body .logo { font-family: 'Libre Baskerville', Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0 !important; }
html body .hero-inner { max-width: 1180px !important; }
html body .hero-inner h1 { max-width: 820px; margin-inline: auto; font-size: clamp(3rem, 7vw, 5.5rem) !important; line-height: .98 !important; }
html body .hero-inner > .hero-content > p { max-width: 680px; font-size: 17px !important; }
html body .section { padding-block: clamp(72px, 8vw, 112px) !important; }
html body .section-header { margin-bottom: clamp(34px, 5vw, 58px) !important; }

/* Clear, consistent keyboard focus for every interactive control. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible {
  outline: 3px solid var(--tf-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--tf-deep) !important;
}

/* Professional mobile menu control. */
html body .hamburger {
  appearance: none;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 3px !important;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
html body .hamburger span { flex: 0 0 auto; }

/* Marketplace: editorial filter rail and highly scannable inventory. */
html body .mk-hero { padding: 58px 20px 48px !important; border-bottom: 3px solid var(--tf-gold); }
html body .mk-hero h1 { font-size: clamp(2.7rem, 5vw, 4.5rem) !important; font-weight: 400 !important; }
html body .mk-hero p { max-width: 720px; font-size: 16px; }
html body .mk-badges { margin-top: 24px; gap: 0; }
html body .mk-badges span { padding: 7px 16px; border: 0; border-right: 1px solid rgba(255,255,255,.28); border-radius: 0; background: transparent; font-size: 12px; }
html body .mk-badges span:last-child { border-right: 0; }
html body .mk-wrap { max-width: 1240px; padding-top: 32px; }
html body .mk-bar { border-radius: 4px; padding: 18px; gap: 16px; border-top: 3px solid var(--tf-deep); box-shadow: none; }
html body .mk-bar select, html body .mk-bar input { min-height: 44px; border-radius: 3px; border: 1px solid var(--tf-line); background: var(--tf-surface); }
html body .mk-count { padding: 10px 0 14px; color: var(--tf-muted); border-bottom: 1px solid var(--tf-line); }
html body .mk-grid { gap: 18px; }
html body .mk-card { border-radius: 4px; padding: 20px; border-top: 3px solid var(--tf-deep); box-shadow: none; }
html body .mk-card-top { padding-bottom: 14px; border-bottom: 1px solid var(--tf-line); }
html body .mk-ico { width: 48px; height: 48px; border-radius: 3px; background: var(--tf-surface); border: 1px solid var(--tf-line); }
html body .mk-bank { font-size: 16px; color: var(--tf-deep); }
html body .mk-rows { border-top: 0; padding-top: 4px; }
html body .mk-row { padding: 7px 0; border-bottom: 1px solid var(--tf-line-soft); }
html body .mk-row:last-child { border-bottom: 0; }
html body .mk-price { color: var(--tf-deep); font-family: 'Libre Baskerville', Georgia, serif; font-size: 28px; font-weight: 400; }
html body .mk-add { min-height: 44px; border-radius: 3px; background: var(--tf-emerald); color: #fff; border: 1px solid var(--tf-emerald); }
html body .mk-add:hover { background: var(--tf-emerald-dk); }
html body .mk-stock { color: var(--tf-emerald-dk); }
html body .mk-stock.low { color: #895e00; }
html body .mk-cartbar { border-top: 2px solid var(--tf-deep); box-shadow: 0 -6px 20px rgba(11,31,24,.08); }

/* Cart confirmation: sober dialog with a clear next action. */
html body .gtc-overlay { background: rgba(6, 35, 27, .68); }
html body .gtc-card { border-radius: 4px; border-top: 4px solid var(--tf-gold); box-shadow: 0 20px 60px rgba(6,35,27,.24); }
html body .gtc-check { border-radius: 50%; background: var(--tf-cream); color: var(--tf-deep); border: 1px solid rgba(115,93,29,.25); }
html body .gtc-title { font-family: 'Libre Baskerville', Georgia, serif; color: var(--tf-deep); font-size: 25px; font-weight: 400; }
html body .gtc-go, html body .gtc-stay { border-radius: 3px; min-height: 44px; }
html body .gtc-go { background: var(--tf-emerald); color: #fff !important; }
html body .gtc-stay { background: var(--tf-surface); color: var(--tf-deep); border: 1px solid var(--tf-line); }

/* Account and checkout: flatter hierarchy and denser, trustworthy records. */
html body .dash-layout { max-width: 1240px; gap: 32px; }
html body .dash-sidebar { border-radius: 4px !important; border-top: 3px solid var(--tf-deep) !important; }
html body .dash-panel-title { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 30px !important; font-weight: 400 !important; }
html body .stats-row { gap: 12px; }
html body .stat-card { border-radius: 4px !important; border-top: 2px solid var(--tf-deep) !important; }
html body .stat-icon { color: var(--tf-emerald-dk); }
html body .stat-num { font-family: 'Libre Baskerville', Georgia, serif !important; font-weight: 400 !important; }
html body .orders-table { border-radius: 4px !important; }
html body .pf-head { border-top: 3px solid var(--tf-deep); }
html body .pf-mark { background: var(--tf-deep); }
html body .pf-section-head { color: var(--tf-deep); }
html body .co-wrap { max-width: 1120px; gap: 28px; padding-top: 38px; }
html body .co-card, html body .co-summary { border-radius: 4px !important; border-top: 3px solid var(--tf-deep) !important; }
html body .co-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 26px; font-weight: 400; }
html body .co-guarantee { border-top: 1px solid var(--tf-line); padding-top: 14px; }

@media (max-width: 940px) {
  html body .mk-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .co-aside { order: 0; }
}
@media (max-width: 640px) {
  html body .section { padding-block: 58px !important; }
  html body .mk-hero { text-align: left; padding: 42px 18px 36px !important; }
  html body .mk-hero h1 { font-size: 40px !important; }
  html body .mk-badges { display: grid; grid-template-columns: 1fr 1fr; }
  html body .mk-badges span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); padding-inline: 0; }
  html body .mk-bar { grid-template-columns: 1fr; padding: 16px; }
  html body .mk-wrap { padding-inline: 14px; }
  html body .mk-card { padding: 17px; }
  html body .mk-foot { align-items: flex-end; }
  html body .mk-add { min-width: 132px; }
  html body .gtc-actions { flex-direction: column; }
  html body .gtc-go, html body .gtc-stay { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
  html body .dash-layout { padding: 24px 14px 116px !important; }
  html body .stats-row { grid-template-columns: 1fr 1fr !important; }
  html body .orders-table tr { border-radius: 4px !important; }
  html body .orders-table td { align-items: flex-start; }
  html body .orders-table td::before { flex: 0 0 42%; }
  html body .pf-head { align-items: flex-start; }
  html body .co-wrap { padding: 22px 14px 58px; }
  html body .co-card { padding: 20px 16px; }
}
@media (max-width: 390px) {
  html body .stats-row { grid-template-columns: 1fr !important; }
  html body .mk-badges { grid-template-columns: 1fr; }
  html body .mk-foot { display: grid; grid-template-columns: 1fr; }
  html body .mk-add { width: 100%; }
}

/* ---------- Final typography authority (beats legacy tls-theme rules) ---------- */
html body:not(#tf):not(#tf),
html body *:not(#tf):not(#tf):not(h1):not(h2):not(h3):not(h4):not(code):not(pre):not(kbd):not(samp):not([style*="monospace"]):not(.mono):not(.wallet-address) {
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif !important;
}
html body h1:not(#tf):not(#tf),
html body h2:not(#tf):not(#tf),
html body h3:not(#tf):not(#tf),
html body h4:not(#tf):not(#tf),
html body .logo:not(#tf):not(#tf) {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body code:not(#tf), html body pre:not(#tf), html body .mono:not(#tf),
html body .wallet-address:not(#tf), html body [style*="monospace"]:not(#tf) {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important;
}

/* Password visibility toggle — static, no shifting */
html body .password-field {
  display: flex !important;
  align-items: center !important;
}
html body .pw-toggle, html body .pw-toggle:hover {
  position: absolute !important;
  top: 0 !important;
  right: 6px !important;
  bottom: 0 !important;
  left: auto !important;
  margin: auto 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #5b6b66 !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-transform: none !important;
  transform: none !important;
  transition: none !important;
}
html body .pw-toggle svg, html body .pw-toggle:hover svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: none !important;
}
html body .pw-toggle:hover { color: var(--tf-deep) !important; }

/* Premium editorial finish: one shared authority over legacy presentation. */
:root, body {
  --tf-on-dark: oklch(1 0 0);
  --tf-on-dark-muted: oklch(0.88 0.015 160);
  --tf-photo-scrim: oklch(0.2 0.025 160 / .6);
  --tf-photo-base: oklch(0.19 0.025 250);
  --tf-hover: oklch(0.97 0.008 160);
  --tf-shadow-dialog: 0 16px 48px oklch(0.2 0.03 160 / .16);
}
html body *:not(#tf):not(#tf) { letter-spacing: 0 !important; }
html body::before, html body::after { display: none !important; }
html body header:not(#tf) {
  background: var(--tf-surface) !important;
  border-bottom: 1px solid var(--tf-line) !important;
}
html body nav:not(#tf) { min-height: 78px; height: auto; padding-block: 12px; gap: 8px; }
html body header .logo:not(#tf) { color: var(--tf-deep) !important; font-size: 23px !important; white-space: nowrap; gap: 8px; }
html body header .logo span:not(#tf) { color: var(--tf-deep) !important; }
html body header .logo-icon:not(#tf) { background: transparent !important; border: 1px solid var(--tf-line); color: var(--tf-deep) !important; }
html body header .logo-icon svg, html body header .logo-icon path { stroke: var(--tf-deep) !important; }
html body header .nav-links a:not(#tf) {
  color: var(--tf-muted) !important; font-size: 11px !important;
  text-transform: none !important; padding: 10px 7px !important;
}
html body header .nav-links a.active:not(#tf), html body header .nav-links a:hover:not(#tf) {
  color: var(--tf-deep) !important; background: var(--tf-hover) !important;
}
html body header .nav-cta:not(#tf) { background: var(--tf-deep) !important; color: var(--tf-on-dark) !important; text-transform: none !important; font-size: 12px !important; padding: 11px 14px !important; margin-left: 4px; }
html body header .cart-btn:not(#tf) { background: var(--tf-surface) !important; color: var(--tf-deep) !important; border-color: var(--tf-line) !important; min-width: 44px; min-height: 40px; }
html body .hamburger:not(#tf) { border-color: var(--tf-line) !important; }
html body .hamburger span:not(#tf) { background: var(--tf-deep) !important; }

/* Full-bleed card photography, with a flat scrim rather than a gradient. */
html body .hero:not(#tf) {
  background: var(--tf-photo-base) url('hero-cards.jpg') center / cover no-repeat !important;
  border-radius: 0 !important; min-height: min(640px, calc(100svh - 154px)) !important;
  padding: 0 !important; isolation: isolate;
}
html body .hero::before { display: block !important; background: var(--tf-photo-scrim) !important; z-index: 0; }
html body .hero::after { display: none !important; }
html body .hero-inner:not(#tf) { width: 100%; padding: 60px 32px !important; text-align: left !important; }
html body .hero-content:not(#tf) { max-width: 550px; }
html body .hero-tag:not(#tf) { padding: 0 !important; border: 0 !important; color: var(--tf-on-dark-muted) !important; font-size: 12px !important; text-transform: none !important; margin-bottom: 20px; }
html body .hero-tag::before { display: none !important; }
html body .hero-sub-tag:not(#tf) { display: none !important; }
html body .hero-inner h1:not(#tf):not(#tf), html body .hero-inner h1 em:not(#tf):not(#tf) {
  font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 56px !important;
  line-height: 1.04 !important; font-weight: 400 !important; margin: 0 0 22px !important;
  color: var(--tf-on-dark) !important; text-shadow: none !important;
}
html body .hero-inner h1 em:not(#tf):not(#tf):not(#tf):not(#tf) { font-family: 'Libre Baskerville', Georgia, serif !important; }
html body .hero-inner > .hero-content > p:not(#tf) { max-width: 475px; margin: 0 0 28px !important; font-size: 15px !important; line-height: 1.8; color: var(--tf-on-dark-muted) !important; text-shadow: none !important; }
html body .hero-btns:not(#tf) { justify-content: flex-start !important; gap: 12px; }
html body .hero-btns .btn-primary:not(#tf) { background: var(--tf-on-dark) !important; border-color: var(--tf-on-dark) !important; color: var(--tf-deep) !important; }
html body .hero-btns a:not(#tf) { text-transform: none !important; font-size: 13px !important; min-height: 46px; padding: 12px 18px !important; }
html body .hero-stats:not(#tf) { justify-content: flex-start !important; gap: 36px; margin-top: 34px !important; padding-top: 22px !important; border-color: var(--tf-on-dark-muted) !important; }
html body .hero-stat-num:not(#tf):not(#tf) { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 30px !important; font-weight: 400 !important; line-height: 1.1; }
html body .hero-stat-label:not(#tf) { font-size: 10px !important; color: var(--tf-on-dark-muted) !important; text-transform: none !important; }

html body .section:not(#tf) { border-radius: 0 !important; padding-block: 80px !important; }
html body .section-inner:not(#tf) { max-width: 1180px; }
html body .section-title:not(#tf):not(#tf) { font-size: 44px !important; line-height: 1.12 !important; }
html body .section-sub:not(#tf) { font-size: 15px !important; line-height: 1.8; max-width: 620px; }
html body .section-tag:not(#tf) { border: 0 !important; padding: 0 !important; margin-bottom: 14px; font-size: 11px !important; }
html body .section-header:not(#tf) { margin-bottom: 36px !important; }
html body .step-card:not(#tf), html body .use-card:not(#tf), html body .value-card:not(#tf), html body .sell-step:not(#tf) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--tf-line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 28px 0 !important;
}
html body .step-num:not(#tf) { background: transparent !important; border: none !important; width: 36px !important; height: 36px !important; font-size: 30px !important; margin-bottom: 18px; }
html body .step-title:not(#tf) { font-size: 17px !important; margin-bottom: 12px; }
html body .step-desc:not(#tf) { font-size: 14px !important; line-height: 1.8; }
html body #showcase-carousel:not(#tf) { border: 1px solid var(--tf-line) !important; border-radius: 4px !important; box-shadow: none !important; }
html body #showcase-carousel .carousel-arrow:not(#tf) { background: var(--tf-surface) !important; color: var(--tf-deep) !important; border: 1px solid var(--tf-line) !important; width: 40px; height: 40px; border-radius: 50% !important; }
html body #showcase-carousel .carousel-slide figcaption:not(#tf) { background: var(--tf-deep) !important; border-top: 0 !important; padding: 24px 30px 32px !important; }

/* Clear records and calm, consistent purchase surfaces. */
html body .mk-hero:not(#tf) { background: var(--tf-hover) !important; border-bottom: 1px solid var(--tf-line) !important; }
html body .mk-hero h1:not(#tf):not(#tf) { color: var(--tf-deep) !important; font-size: 52px !important; }
html body .mk-hero p:not(#tf), html body .mk-badges span:not(#tf) { color: var(--tf-muted) !important; }
html body .mk-badges span:not(#tf) { border-color: var(--tf-line) !important; }
html body .mk-bar:not(#tf) { border: 0 !important; border-bottom: 1px solid var(--tf-line) !important; border-radius: 0 !important; background: transparent !important; padding-inline: 0 !important; }
html body .mk-card:not(#tf) { border: 1px solid var(--tf-line) !important; background: var(--tf-surface) !important; display: flex; flex-direction: column; }
html body .mk-card:hover:not(#tf) { border-color: var(--tf-emerald) !important; transform: none !important; box-shadow: none !important; }
html body .mk-foot:not(#tf) { margin-top: auto; padding-top: 18px; }
html body .mk-price:not(#tf):not(#tf), html body .co-price:not(#tf) { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body .mk-row strong, html body table td { font-variant-numeric: tabular-nums; }
html body .gtc-card:not(#tf) { box-shadow: var(--tf-shadow-dialog) !important; }
html body .stat-card:not(#tf), html body .dash-sidebar:not(#tf), html body .co-card:not(#tf), html body .co-summary:not(#tf) { border-top: 1px solid var(--tf-line) !important; }
html body .orders-table th:not(#tf) { background: var(--tf-hover) !important; }
html body .orders-table tbody tr:hover { background: var(--tf-hover) !important; }
html body .co-step-num { font-variant-numeric: tabular-nums; }
html body .co-step.upcoming .co-step-num { border: 1px solid var(--tf-line); background: var(--tf-surface); color: var(--tf-muted); }
html body header .logo-icon:not(#tf) { box-shadow: none !important; }
html body header .cart-btn svg { display: block !important; width: 18px !important; height: 18px !important; color: var(--tf-deep) !important; }
html body .auth-card:not(#tf) { border-radius: 4px !important; box-shadow: none !important; }
html body .auth-logo-text:not(#tf):not(#tf):not(#tf) { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 28px !important; font-weight: 400 !important; color: var(--tf-deep) !important; }
html body .auth-logo-text span:not(#tf):not(#tf):not(#tf) { font-family: inherit !important; color: inherit !important; }
html body .auth-logo-icon:not(#tf) { border-radius: 4px !important; background: var(--tf-deep) !important; }
html body .auth-tabs:not(#tf), html body .auth-tab:not(#tf) { border-radius: 3px !important; box-shadow: none !important; }
html body .auth-card .btn-primary:not(#tf), html body .auth-submit:not(#tf) { box-shadow: none !important; transform: none !important; }
html body .auth-card .google-btn:disabled:not(#tf), html body .auth-card .google-btn:disabled:hover:not(#tf) { background: var(--tf-surface) !important; color: var(--tf-ink) !important; border: 1px solid var(--tf-line) !important; border-radius: 3px !important; opacity: 1 !important; box-shadow: none !important; }
html body .support-btn:not(#tf) { width: 44px; height: 44px; box-shadow: none !important; transform: none !important; }
html body footer:not(#tf), html body .cta-band:not(#tf) { border-top: 1px solid var(--tf-line) !important; border-radius: 0 !important; }

@media (max-width: 1150px) {
  html body header .nav-links { display: none !important; }
  html body header .hamburger { display: flex !important; }
}
@media (max-width: 640px) {
  html body nav:not(#tf) { min-height: 66px; padding-inline: 16px; }
  html body header .logo:not(#tf) { font-size: 20px !important; gap: 6px; }
  html body header .nav-cta { display: none !important; }
  html body .hero:not(#tf) { min-height: 0 !important; background-position: 58% center !important; }
  html body .hero-inner:not(#tf) { padding: 38px 22px !important; }
  html body .hero-content:not(#tf) { max-width: 100%; }
  html body .hero-inner h1:not(#tf):not(#tf), html body .hero-inner h1 em:not(#tf):not(#tf) { font-size: 46px !important; }
  html body .hero-inner > .hero-content > p:not(#tf) { font-size: 14px !important; line-height: 1.7; margin-bottom: 22px !important; }
  html body .hero-stats:not(#tf) { gap: 26px; margin-top: 26px !important; padding-top: 18px !important; flex-wrap: nowrap; }
  html body .hero-btns a:not(#tf) { padding: 11px 12px !important; font-size: 12px !important; }
  html body .section:not(#tf) { padding: 48px 22px !important; }
  html body .section-title:not(#tf):not(#tf) { font-size: 30px !important; }
  html body .mk-hero h1:not(#tf):not(#tf) { font-size: 40px !important; }
  html body #showcase-carousel .carousel-slide figcaption:not(#tf) { padding: 16px 18px 30px !important; }
  html body .mk-cartbar { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body *, html body *::before, html body *::after { animation: none !important; transition: none !important; }
}