/* b20miner.xyz landing, "professional and plain" (approved 27 Oct 2026; preview: design-preview/pro/). After the
   shared design system (ds/b20.css); only this page's own layout. Direction from the owner: Stripe / Linear, very little
   motion. One column of clear type, thin lines, the real product, one brand colour (azure = act and
   the brand; ink and white carry the rest; brand colour rule, 8 Nov 2026, amber before). Motion (1 Nov 2026 pass, plan §8): cards fade in once (300 ms), the steps line and the fee bar draw once,
   FAQ answers fade in, the menu pill follows the pointer; the hero never waits on motion. Only the hero's light drifts
   (3 Nov 2026, owner), by transform on one layer. */

:root { --page: 1200px; --hair: color-mix(in srgb, var(--line) 70%, transparent); }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 16px; }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--text); }
p { margin: 0; }
h1, h2 { text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.028em; }
.sl { margin-top: 16px; max-width: 600px; font-size: 17px; line-height: 1.6; color: var(--text-2); }
/* Small links get a 24 px+ hit area without moving the layout (padding-block, cancelled by a negative margin). */
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; padding-block: 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.more::after { content: "→"; transition: transform 160ms var(--ease); }
.inline { padding-block: 4px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .inline:hover { text-decoration-color: currentColor; } }

/* Header: the design system's bar, transparent until the page moves. */
header.top { background: var(--bg); border-bottom-color: transparent; transition: border-color 200ms; }
header.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { height: 64px; gap: 40px; }
.brand .logo { width: 140px; height: 42px; }
nav.main { position: relative; gap: 2px; }
nav.main a { position: relative; z-index: 1; padding: 7px 12px; background: none !important; transition: color 120ms; }
nav.main a[aria-current] { color: var(--text); background: none; }
nav.main .pill { --x: 0px; --w: 0px; position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 6px; background: var(--bg-2); opacity: 0; transform: translateX(var(--x)); width: var(--w); transition: transform 240ms var(--ease), width 240ms var(--ease), opacity 160ms; }
nav.main.hover .pill { opacity: 1; }
.docs { padding-block: 6px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .docs:hover { color: var(--text); } }
.icon.menu { display: none; }
.sheet { display: none; }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: clip; padding: 104px 0 0; }
/* The hero's background (owner, 3 Nov 2026): a fine grid that fades out, and under it two soft azure lights (the second amber until 8 Nov 2026)
   that drifts slowly. Pure CSS, nothing to fetch; the light is one layer that moves by transform only, so the
   compositor runs it (no layout or paint per frame), and site.js pauses it when the hero is off screen. */
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::after {
  inset: 0 0 auto; height: 760px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 80% at 70% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 70% 0%, #000 0%, transparent 75%);
  opacity: .7;
}
.hero::before {
  z-index: -2; top: -260px; left: 30%; width: 1100px; height: 900px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--azure) 30%, transparent), transparent) 18% 30% / 620px 520px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--azure) 14%, transparent), transparent) 82% 62% / 520px 440px no-repeat;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.hero.rest::before { animation-play-state: paused; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-140px, 50px, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(60px, 90px, 0) rotate(-6deg) scale(.96); }
}
.hero h1 { max-width: 900px; font-size: clamp(44px, 7vw, 84px); line-height: 1.0; letter-spacing: -0.045em; }
.hero .lede { margin-top: 26px; max-width: 580px; font-size: 19px; line-height: 1.6; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.actions .btn.lg { height: 46px; padding: 0 22px; font-size: 15.5px; }
/* The testnet note: plain text under the buttons, with a still dot (no pulse on this page). */
.note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--text-2); }
.note i { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--trade-fill); }

/* What is different: three plain sentences, then one worked example of the price. */
.facts { padding: 96px 0 0; }
.facts ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { padding: 28px 28px 0 0; }
.facts li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.facts b { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.facts span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.example { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.facts .example b { display: inline; font-size: inherit; font-weight: 600; letter-spacing: 0; color: var(--text); }

/* Sections */
.sec { padding: 144px 0 0; }
.head { max-width: 720px; }

/* The tour video (3 Nov 2026), under the three facts and the price example (below the fold, so the h1 stays the
   largest first paint): silent, always looping, no controls. Nothing of it loads
   before the page has loaded (site.js sets the poster and sources then). */
.film { margin: 64px 0 0; }
html:not(.js) .film { display: none; }
.film .frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0B0B0C; aspect-ratio: 16 / 9; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 56px 0 0; padding: 0; list-style: none; }
.steps { position: relative; border-top: 1px solid var(--line); }
/* The dark line over the steps draws once, left to right, when they come into view (site.js adds .in). */
.steps::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--text); transform-origin: left; transition: transform 600ms var(--ease); }
.js .steps:not(.in)::before { transform: scaleX(0); }
.steps li { padding: 24px 28px 0 0; }
.steps .n { font-size: 14px; font-weight: 600; color: var(--text-3); }
.steps h3 { margin-top: 18px; font-size: 19px; letter-spacing: -0.01em; }
.steps p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.way { padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.way .tag { height: 24px; padding: 0 10px; }
.tag.mined { background: var(--selected); color: var(--azure-text); }
.tag.instant { background: var(--selected); color: var(--azure-text); }
.way h3 { margin-top: 20px; max-width: 420px; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.way dl { margin: 28px 0 0; }
.way dl div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.way dt { color: var(--text-2); }
.way dd { margin: 0; font-weight: 500; text-align: right; }
.fine { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-3); }

.fees { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split .bar { display: flex; gap: 4px; height: 12px; }
.split .bar i { display: block; border-radius: 3px; transform-origin: left; transition: transform 300ms var(--ease); }
/* The three shares grow once, one after another, when the bar comes into view. */
.js .split:not(.in) .bar i { transform: scaleX(0); }
.split .bar .p { transition-delay: 80ms; }
.split .bar .m { transition-delay: 160ms; }
.split .bar .c { flex: 50; background: var(--azure); }
.split .bar .p { flex: 30; background: var(--text-3); }
.split .bar .m { flex: 20; background: var(--text); }
.split ul { margin: 28px 0 0; padding: 0; list-style: none; }
.split li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.split li b { grid-row: span 2; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.split li.c b { color: var(--azure-text); }
.split li.m b { color: var(--text); }
.split li span { font-weight: 600; }
.split li small { font-size: 14px; color: var(--text-2); }

/* Rules: one grid with hairlines between the cells. */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); gap: 1px; }
.grid > * { padding: 32px; background: var(--bg); }
.grid h3 { font-size: 17px; letter-spacing: -0.01em; }
.grid p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.cell-link { position: relative; display: block; transition: background-color 160ms; }
@media (hover: hover) and (pointer: fine) { .cell-link:hover { background: var(--bg-2); } }
.cell-link .arrow { position: absolute; right: 32px; bottom: 28px; font-size: 18px; color: var(--text-2); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cell-link:hover .arrow { color: var(--text); } }

/* MINER genesis: one quiet panel; its two sites are links. */
.genesis { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; padding: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.genesis h2 { font-size: clamp(26px, 2.6vw, 32px); }
.state { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--text-2); }
/* Not open yet is waiting, not a warning: a grey dot (8 Nov 2026). */
.state i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.links { align-self: center; margin: 0; padding: 0; list-style: none; }
.links li + li { border-top: 1px solid var(--line); }
.links a { display: flex; flex-direction: column; gap: 2px; padding: 16px 28px 16px 0; position: relative; }
.links a::after { content: "→"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--text-3); transition: transform 160ms var(--ease), color 160ms; }
@media (hover: hover) and (pointer: fine) { .links a:hover::after { color: var(--text); } }
/* Arrows move only under a real pointer, never on a tap. */
@media (hover: hover) and (pointer: fine) {
  .more:hover::after, .cell-link:hover .arrow { transform: translateX(3px); }
  .links a:hover::after { transform: translate(3px, -50%); }
}
.links span { font-weight: 600; }
.links small { font-size: 13.5px; color: var(--text-3); }

.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }
.qs details { border-top: 1px solid var(--line); }
.qs details:last-child { border-bottom: 1px solid var(--line); }
.qs summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 16.5px; font-weight: 500; list-style: none; cursor: pointer; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease); }
.qs details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.qs details p { padding: 0 40px 22px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-2); } /* site.js fades it in on open */

.close { padding: 160px 0 144px; text-align: center; }
.close .sl { margin-left: auto; margin-right: auto; }
.close .actions { justify-content: center; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 64px 0 48px; }
.cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.fbrand .flogo { display: block; width: 120px; height: 36px; background: var(--text); -webkit-mask: url(ds/brand/horizontal.svg) left center / contain no-repeat; mask: url(ds/brand/horizontal.svg) left center / contain no-repeat; }
.fbrand p { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.cols nav { display: flex; flex-direction: column; gap: 2px; }
.cols b { margin-bottom: 4px; font-size: 13.5px; font-weight: 600; }
.cols nav a { padding-block: 4px; font-size: 14px; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .cols nav a:hover { color: var(--text); } }
.safe { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--text-3); }
.safe b { font-weight: 600; color: var(--text-2); }

/* Privacy, Terms and 404 (28 Oct 2026): one readable column under the same header and footer. */
.page main { padding-bottom: 0; }
.legal .wrap { max-width: 760px; padding-top: 96px; padding-bottom: 120px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.legal .updated { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.legal .lead { margin-top: 32px; font-size: 18px; line-height: 1.65; color: var(--text); }
.legal h2 { margin-top: 48px; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.legal h2 + p, .legal h2 + ul { margin-top: 12px; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal b { font-weight: 600; color: var(--text); }
/* Launch log (3 Nov 2026, /log): newest entry first, a date line above each. */
.log .entries { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; }
.log .entries li { padding: 32px 0; border-top: 1px solid var(--line); }
.log .entries li:last-child { border-bottom: 1px solid var(--line); }
.log time { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.log .entries h2 { margin-top: 10px; }
.log .entries h2 + p { margin-top: 10px; }
.log + .foot { padding: 32px 0; }
.log + .foot .safe { margin-top: 0; padding-top: 0; border-top: 0; }
.lost .wrap { padding-top: 140px; padding-bottom: 160px; }
.lost h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.lost .actions { margin-top: 36px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 13px; }
.lost + .foot { padding: 32px 0; }
.lost + .foot .legal-links { margin-top: 0; }
.legal-links a { padding-block: 4px; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .legal-links a:hover, .legal-links a[aria-current] { color: var(--text); } }

/* Motion: cards fade in once when they come into view (site.js adds .js and .in); never the hero. */
.js [data-reveal] { --d: 0ms; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); transition-delay: var(--d); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Reduced motion: nothing moves or grows; colour and opacity changes stay. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 300ms; }
  .js .steps:not(.in)::before, .js .split:not(.in) .bar i { transform: none; }
  .steps::before, .split .bar i { transition: none; }
  nav.main .pill { transition: opacity 160ms; }
}

/* Narrower screens */
@media (max-width: 1240px) {
  .brand .logo { display: block; }
  .brand .sym { display: none; }
}
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .fees, .faq { grid-template-columns: 1fr; gap: 48px; }
  .genesis { grid-template-columns: 1fr; gap: 32px; }
  .cols { grid-template-columns: repeat(2, 1fr); }
  .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  /* The design system leaves room for the app's phone tab bar; this page has none. */
  main { padding-bottom: 0; }
  .top .wrap { height: 58px; }
  .brand .logo { display: none; }
  .brand .sym { display: block; }
  .docs { display: none; }
  .icon.menu { display: inline-grid; }
  .icon.menu path { transition: transform 200ms var(--ease); transform-origin: center; }
  .open .icon.menu .m1 { transform: translateY(4px) rotate(45deg); }
  .open .icon.menu .m2 { transform: translateY(-4px) rotate(-45deg); }
  /* The phone menu opens at once (no height animation); its links fade in. */
  .sheet { flex-direction: column; padding: 0 var(--gutter) 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
  .open .sheet { display: flex; }
  .sheet a { padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 500; transition: opacity 200ms var(--ease); }
  @starting-style { .open .sheet a { opacity: 0; } }
  .hero { padding-top: 64px; }
  .hero::before { left: -55%; top: -320px; }
  .hero .lede { font-size: 17px; }
  .facts ul { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 24px 0 0; border-left: 0; }
  .facts li + li { margin-top: 24px; border-top: 1px solid var(--line); }
  .sec { padding-top: 104px; }
  .legal .wrap { padding-top: 56px; padding-bottom: 88px; }
  .lost .wrap { padding-top: 88px; padding-bottom: 104px; }
  .way, .genesis { padding: 24px; }
  .close { padding: 112px 0 104px; }
}
@media (max-width: 600px) {
  .actions .btn.lg { flex: 1; }
  /* A shorter phone page: tighter sections, rules as a plain list. */
  .sec { padding-top: 72px; }
  .head h2 + .sl { margin-top: 12px; }
  .close { padding: 72px 0 64px; }
  .note { align-items: flex-start; }
  .note i { margin-top: 6px; }
  /* A phone gets the Launchpad's own phone layout, framed like a screen. */
  .facts { padding-top: 56px; }
  .facts li, .facts li + li { padding-top: 18px; }
  .facts li + li { margin-top: 18px; }
  .facts b { font-size: 17px; }
  .facts span { margin-top: 4px; }
  .example { margin-top: 24px; padding-top: 18px; font-size: 15px; }
  .steps, .ways { grid-template-columns: 1fr; }
  .steps { row-gap: 28px; margin-top: 40px; }
  .steps h3 { margin-top: 10px; }
  .ways { margin-top: 40px; gap: 16px; }
  .grid { grid-template-columns: 1fr; margin-top: 40px; border: 0; border-radius: 0; background: none; gap: 0; }
  .grid > * { padding: 18px 0; border-top: 1px solid var(--line); }
  .grid > :last-child { border-bottom: 1px solid var(--line); }
  .grid p { margin-top: 6px; }
  .cell-link .arrow { right: 0; bottom: 18px; }
  .genesis { gap: 20px; }
  .faq { gap: 24px; }
  .way { padding: 20px; }
  .way h3 { margin-top: 14px; font-size: 19px; }
  .way dl { margin-top: 18px; }
  .way dl div { flex-direction: column; gap: 2px; padding: 10px 0; font-size: 14.5px; }
  .fine { margin-top: 14px; }
  .way dd { text-align: left; }
  .cols { grid-template-columns: 1fr 1fr; }
}