/* =====================================================================
   Site theme B (dark): homepage and /articles/ index only.
   Loaded after styles.css on those two pages, and every rule is scoped to
   body.site-theme-dark-b, so the shared header, legal, tool, landing and
   /compare/ pages are untouched. Same recipe as the article theme
   (motorbook-articles.css, .article-theme-dark-b): deep green band merging
   into near-black, mint (#5FD39B) for text accents, deep green (#0B3D2E)
   for surfaces with a mint edge. Gradients only, no new images or hosts.
   ===================================================================== */
.site-theme-dark-b{
  --cream:#0A0B0F; --paper:#0E1115; --card:#14181D;
  --ink:#E7EAEE;            /* 16.3:1 on #0A0B0F */
  --muted:#A9B1BA;          /* 9.1:1 on #0A0B0F, 7.6:1 on #14181D */
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.08);
  --brand:#0B3D2E; --brand-hover:#0F4A38; --mint:#5FD39B;
  --brand-edge:rgba(95,211,155,.55);  /* 3.8:1 against #0A0B0F */
  --green:#5FD39B;          /* text and icon uses of --green become mint; surfaces are reset below */
  --red-on-dark:#FF8A94;    /* Motorbook red lifted for dark surfaces, 7.6:1 on #14181D */
  --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-sm:0 6px 20px rgba(0,0,0,.35);
  color-scheme:dark; background:#0A0B0F; color:var(--ink); overflow-x:clip;
}
.site-theme-dark-b ::selection{background:rgba(95,211,155,.35);color:#fff}

/* Focus: always a visible mint ring */
.site-theme-dark-b a:focus-visible,.site-theme-dark-b button:focus-visible,
.site-theme-dark-b summary:focus-visible,.site-theme-dark-b select:focus-visible,
.site-theme-dark-b input:focus-visible,.site-theme-dark-b textarea:focus-visible{outline:2px solid #5FD39B;outline-offset:3px}

/* Skip link sits on white: brand text, not mint */
.site-theme-dark-b .skip-link{background:#fff;color:var(--brand)}

/* Header and nav: green band (scoped, the shared header elsewhere is unchanged) */
.site-theme-dark-b header{background:rgba(11,61,46,.94);border-bottom-color:rgba(95,211,155,.25)}
.site-theme-dark-b .brand,.site-theme-dark-b .nav-links a{color:#fff}
.site-theme-dark-b .nav-links a:hover{color:#5FD39B;text-decoration:underline;text-underline-offset:4px}
.site-theme-dark-b .brand .dot{background:#5FD39B;box-shadow:2px 2px 0 var(--red-on-dark)}

/* Buttons: brand surface plus mint edge so they read on green and on black */
.site-theme-dark-b .btn{background:var(--brand);color:#fff;box-shadow:inset 0 0 0 1.5px var(--brand-edge)}
.site-theme-dark-b .btn:hover{background:var(--brand-hover)}
.site-theme-dark-b .btn.ghost{background:transparent;color:#5FD39B;border-color:#5FD39B;box-shadow:none}
.site-theme-dark-b .btn.ghost:hover{background:rgba(95,211,155,.10);color:#5FD39B}
.site-theme-dark-b .dl-card .share-airdrop,.site-theme-dark-b .dl-card .share-airdrop:hover,.site-theme-dark-b .dl-card .share-airdrop:focus-visible{color:#fff}
.site-theme-dark-b .store-badge{background:#fff;color:#0A0B0F}
.site-theme-dark-b .store-badge:hover{background:#E7EAEE}

/* Hero: green band, soft mint glow where it meets the black */
.site-theme-dark-b .hero,.site-theme-dark-b .cmp-hero{background:
  radial-gradient(60% 220px at 50% 100%,rgba(95,211,155,.20),transparent 70%),
  linear-gradient(180deg,var(--brand) 0,var(--brand) 62%,rgba(11,61,46,.55) 85%,#0A0B0F 100%)}
.site-theme-dark-b .cmp-hero:before{display:none}
.site-theme-dark-b .hero h1,.site-theme-dark-b .cmp-hero h1{color:#fff}
.site-theme-dark-b .hero .lead,.site-theme-dark-b .cmp-hero .lead{color:#E2EEE8}
.site-theme-dark-b .hero-proof,.site-theme-dark-b .cmp-hero .crumb{color:#BFD8CB}
.site-theme-dark-b .hero-proof a{color:#fff;text-decoration:underline;text-decoration-color:#5FD39B;text-underline-offset:3px;text-decoration-thickness:1.5px}
.site-theme-dark-b .hero-proof a:hover{color:#5FD39B}
.site-theme-dark-b .dl-h{color:#fff}

/* QR: dark modules need a light field. White tile, 12px padding on top of the
   SVG's own 3-module margin gives about 5 modules of quiet zone. */
.site-theme-dark-b .dl-qr{background:#fff;padding:12px;border-radius:16px;box-sizing:content-box;
  box-shadow:0 0 0 1px rgba(95,211,155,.35),0 0 0 7px rgba(95,211,155,.10),0 18px 40px rgba(0,0,0,.35)}

/* App screenshot device: the black bezel would vanish on black, so it gets a
   light hairline, a mint halo ring and a green spotlight stage behind it.
   The cream screenshot itself is shown as-is, framed, not recoloured. */
.site-theme-dark-b .rf-visual{background:radial-gradient(closest-side,rgba(95,211,155,.16),rgba(11,61,46,.35) 55%,transparent 100%);padding:26px 0}
.site-theme-dark-b .device{background:#050608;border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 6px rgba(95,211,155,.10),0 30px 70px rgba(0,0,0,.6)}
.site-theme-dark-b .device img{outline:1px solid rgba(0,0,0,.6)}

/* Sections: near-black, green bands keep the brand with a mint rule */
.site-theme-dark-b .showcase,.site-theme-dark-b .latest-guides{background:#0E1115;border-color:var(--line)}
.site-theme-dark-b .band,.site-theme-dark-b .story,.site-theme-dark-b .cta-band,.site-theme-dark-b .strip{
  background:var(--brand);color:#fff;border-top:1px solid var(--brand-edge);border-bottom:1px solid var(--brand-edge)}
.site-theme-dark-b .band .muted,.site-theme-dark-b .band p{color:#CFE5D9}
.site-theme-dark-b .band h2,.site-theme-dark-b .band h3{color:#fff}
.site-theme-dark-b .band a:not(.btn){color:#fff}
.site-theme-dark-b .band .ic-tile,.site-theme-dark-b .privacy .ic-tile{background:rgba(255,255,255,.12);color:#fff}
.site-theme-dark-b .pfeature{background:rgba(0,0,0,.18);border-color:rgba(95,211,155,.30)}
.site-theme-dark-b .ic-tile{background:rgba(95,211,155,.12);color:#5FD39B}
.site-theme-dark-b .ticks .ic,.site-theme-dark-b .trust-row .ic{color:#5FD39B}

/* Cards */
.site-theme-dark-b .feature,.site-theme-dark-b .vs-card,.site-theme-dark-b .tier,
.site-theme-dark-b .faq details,.site-theme-dark-b .mini-card,.site-theme-dark-b .deadline{background:var(--card);border-color:var(--line)}
.site-theme-dark-b .feature:hover,.site-theme-dark-b .vs-card:hover{border-color:var(--brand-edge);box-shadow:none}
.site-theme-dark-b .tier.best{border-color:#5FD39B;box-shadow:0 0 0 1px rgba(95,211,155,.35)}
.site-theme-dark-b .tier.best .flag{background:#C8102E;color:#fff}
.site-theme-dark-b .guide-kicker{color:var(--red-on-dark)}
.site-theme-dark-b .guide-teaser h3,.site-theme-dark-b .vs-h{color:#fff}
.site-theme-dark-b .faq summary{color:var(--ink)}
.site-theme-dark-b .hp.ok,.site-theme-dark-b .dl-pill.ok{background:rgba(95,211,155,.14);color:#5FD39B}
.site-theme-dark-b .hp.bad,.site-theme-dark-b .dl-pill.bad{background:rgba(255,138,148,.14);color:var(--red-on-dark)}

/* /articles/ index cards and filters (their base styles are inline on that page) */
.site-theme-dark-b .art-card{background:var(--card);border-color:var(--line)}
.site-theme-dark-b .art-card:hover{border-color:var(--brand-edge)}
.site-theme-dark-b .art-kicker{color:var(--red-on-dark)}
.site-theme-dark-b .art-h{color:#fff}
.site-theme-dark-b .art-p{color:var(--muted)}
.site-theme-dark-b .art-go{color:#5FD39B}
.site-theme-dark-b .art-filter{background:transparent;border-color:rgba(255,255,255,.22);color:var(--ink)}
.site-theme-dark-b .art-filter:hover{background:rgba(95,211,155,.10);border-color:#5FD39B;color:#fff}
.site-theme-dark-b .art-filter[aria-pressed="true"]{background:var(--brand);border-color:#5FD39B;color:#fff}

/* Forms: dark fields, light labels, mint focus, clear success and error */
.site-theme-dark-b .field label{color:var(--ink)}
.site-theme-dark-b .field input,.site-theme-dark-b .field select,.site-theme-dark-b .field textarea,
.site-theme-dark-b .wl-input{background:#14181D;border-color:rgba(255,255,255,.28);color:var(--ink)}
.site-theme-dark-b .field input:focus,.site-theme-dark-b .field select:focus,.site-theme-dark-b .field textarea:focus,
.site-theme-dark-b .wl-input:focus{border-color:#5FD39B;box-shadow:0 0 0 3px rgba(95,211,155,.25)}
.site-theme-dark-b .field input[aria-invalid="true"],.site-theme-dark-b .field textarea[aria-invalid="true"]{border-color:var(--red-on-dark)}
.site-theme-dark-b .contact-status.ok{color:#5FD39B}
.site-theme-dark-b .contact-status.err{color:var(--red-on-dark)}

/* Footer and mobile dock */
.site-theme-dark-b footer{background:#06070A;border-top:1px solid rgba(95,211,155,.25)}
.site-theme-dark-b .dockbar{background:rgba(10,11,15,.94);border-top-color:var(--line)}
.site-theme-dark-b .db-mark{background:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-edge)}
.site-theme-dark-b .db-text b{color:#fff}

/* ---- Mobile hero and iOS header (homepage) ---- */
/* Tighter gap between the header and the H1 on phones (was 74px). Desktop unchanged. */
@media (max-width:767px){
  .site-theme-dark-b .hero{padding-top:28px}
}
/* iOS: Safari's Smart App Banner (apple-itunes-app meta, homepage only) already offers
   the app, so the header button is hidden. html.is-ios is set by an inline head script
   before first paint, so nothing shifts. With only the brand left on phones it is centred;
   from 821px the nav links fill the right-hand side as before. */
.is-ios .site-theme-dark-b .nav .btn.sm{display:none}
@media (max-width:820px){
  .is-ios .site-theme-dark-b .nav{justify-content:center}
}
/* Phones and touch-only devices: no QR (you cannot scan your own screen). The App Store
   badge becomes the call to action, left-aligned under the copy with no empty gap. */
@media (max-width:767px), (hover:none) and (pointer:coarse){
  .site-theme-dark-b .dl-qr,.site-theme-dark-b .dl-h{display:none}
  .site-theme-dark-b .hero-visual{justify-content:flex-start}
  .site-theme-dark-b .dl-card{max-width:none;margin:0;padding:0;text-align:left}
  .site-theme-dark-b .dl-card .store-badge{display:inline-flex;margin:0}
  .site-theme-dark-b .dl-card .share-airdrop{display:none}
}
/* Touch tablets (two-column hero, no QR): keep the right-hand column as tall as the QR
   block was, so the hero height does not follow the text column when web fonts swap. */
@media (min-width:768px) and (hover:none) and (pointer:coarse){
  .site-theme-dark-b .hero-visual{min-height:330px;justify-content:center}
  .site-theme-dark-b .dl-card{text-align:center}
}
@media (max-width:767px){
  .site-theme-dark-b .hero .grid{gap:22px}
  .site-theme-dark-b .hero-copy .hero-proof{margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){.site-theme-dark-b *{transition:none!important}}
@media (forced-colors:active){
  .site-theme-dark-b .hero,.site-theme-dark-b .cmp-hero,.site-theme-dark-b .rf-visual{background:Canvas}
  .site-theme-dark-b .dl-qr{forced-color-adjust:none;background:#fff}
}