// Variant A — Developer docs as landing
// Monospace everywhere. One muted accent. No carded sections. 
// Reads as README meets manifesto. Asymmetric flow, left-aligned columns.

const VariantA = ({setTopPage}) => {
  const go = (p) => (e) => { e.preventDefault(); setTopPage && setTopPage(p); };
  return (
    <div className="vA-root">
      <style>{`
        .vA-root {
          width: 1280px;
          min-height: 2400px;
          background: #f5f2ea;
          color: #1a1813;
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 14px;
          line-height: 1.6;
          padding: 0;
          position: relative;
        }
        .vA-root *, .vA-root *::before, .vA-root *::after { box-sizing: border-box; }
        .vA-root h1, .vA-root h2, .vA-root h3, .vA-root p { margin: 0; font-weight: normal; }
        .vA-hdr {
          display: flex; justify-content: space-between; align-items: baseline;
          padding: 24px 64px; border-bottom: 1px solid #1a1813;
          font-size: 13px;
        }
        .vA-nav a { margin-left: 32px; color: #1a1813; text-decoration: none; }
        .vA-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
        .vA-bar { padding: 0 64px; }
        .vA-breadcrumb {
          border-bottom: 1px solid #1a1813; padding: 12px 64px;
          display: flex; gap: 16px; font-size: 12px; color: #5a5448;
        }
        .vA-acc { color: #b8860b; }
        .vA-hero {
          padding: 96px 64px 64px;
          display: grid; grid-template-columns: 1fr 360px; gap: 48px;
          border-bottom: 1px solid #1a1813;
        }
        .vA-h1 {
          font-family: 'JetBrains Mono', monospace;
          font-size: 64px; line-height: 1.15;
          letter-spacing: -0.04em; font-weight: 500;
          margin-bottom: 32px;
        }
        .vA-h1 em {
          font-style: normal;
          background: #1a1813; color: #f5f2ea;
          padding: 2px 8px;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
        }
        .vA-lede { font-size: 16px; line-height: 1.55; max-width: 620px; color: #2a2620; margin-bottom: 28px; }
        .vA-lede a { color: #b8860b; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
        .vA-cli {
          font-size: 13px; display: inline-flex; gap: 12px; align-items: center;
          background: #1a1813; color: #f5f2ea; padding: 10px 16px;
        }
        .vA-cli .dol { color: #b8860b; }
        .vA-aside {
          font-size: 12px; color: #5a5448; line-height: 1.7;
          border-left: 1px solid #1a1813; padding-left: 20px;
        }
        .vA-aside dt { color: #1a1813; margin-top: 10px; }
        .vA-aside dt:first-child { margin-top: 0; }

        .vA-section { padding: 72px 64px; border-bottom: 1px solid #1a1813; }
        .vA-sec-num { font-size: 12px; color: #5a5448; margin-bottom: 8px; }
        .vA-h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 720px; font-weight: 500; }
        .vA-p { max-width: 680px; color: #2a2620; margin-bottom: 16px; }
        .vA-p code { background: #e8e2d3; padding: 1px 5px; font-size: 13px; }

        .vA-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 13px; }
        .vA-table th { text-align: left; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid #1a1813; color: #5a5448; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
        .vA-table td { padding: 10px 12px; border-bottom: 1px dashed #c9c1ab; font-variant-numeric: tabular-nums; }
        .vA-table td.num { text-align: right; }
        .vA-table tr:hover td { background: #ede7d7; }

        .vA-ascii {
          white-space: pre; font-size: 11px; line-height: 1.25;
          color: #2a2620; padding: 24px 0;
          overflow: hidden;
        }
        .vA-cli { overflow: hidden; white-space: nowrap; }
        @media (prefers-reduced-motion: no-preference) {
          .vA-ascii { animation: vA-reveal 1.8s steps(40) both; }
          @keyframes vA-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
          .vA-cli { animation: vA-type 1s steps(30) .2s both; }
          @keyframes vA-type { from { max-width: 0; } to { max-width: 600px; } }
          .vA-commit { animation: vA-fade .6s backwards; }
          .vA-commit:nth-child(1) { animation-delay: .05s; }
          .vA-commit:nth-child(2) { animation-delay: .1s; }
          .vA-commit:nth-child(3) { animation-delay: .15s; }
          .vA-commit:nth-child(4) { animation-delay: .2s; }
          .vA-commit:nth-child(5) { animation-delay: .25s; }
          .vA-commit:nth-child(6) { animation-delay: .3s; }
          @keyframes vA-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
          .vA-h1 em { animation: vA-highlight .7s cubic-bezier(.7,0,.3,1) .4s backwards; }
          @keyframes vA-highlight { from { background: transparent; color: #1a1813; } to { background: #1a1813; color: #f5f2ea; } }
        }
        .vA-code {
          background: #1a1813; color: #dbd5c5;
          padding: 20px 24px; font-size: 13px; line-height: 1.65;
          margin: 24px 0; overflow: auto;
        }
        .vA-code .kw { color: #d4a373; }
        .vA-code .str { color: #a7b88b; }
        .vA-code .cm { color: #6e6a5e; font-style: italic; }
        .vA-code .fn { color: #c9b37e; }

        .vA-two { display: grid; grid-template-columns: 420px 1fr; gap: 48px; }
        .vA-sidenote { font-size: 12px; color: #5a5448; line-height: 1.7; padding-top: 6px; }
        .vA-sidenote hr { border: none; border-top: 1px solid #c9c1ab; margin: 12px 0; }

        .vA-footnotes {
          padding: 40px 64px 72px; font-size: 11px; color: #5a5448; line-height: 1.7;
          border-top: 1px solid #1a1813;
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
        }
        .vA-fn sup { color: #b8860b; margin-right: 4px; }

        .vA-commit { display: flex; gap: 12px; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed #c9c1ab; }
        .vA-commit .sha { color: #b8860b; width: 70px; flex-shrink: 0; }
        .vA-commit .when { color: #5a5448; width: 90px; flex-shrink: 0; }

        .vA-link { color: #b8860b; text-decoration: underline; text-underline-offset: 3px; }
      `}</style>

      <div className="vA-hdr">
        <div><strong>arkon</strong> <span style={{color:'#5a5448'}}>/ v0.8 · pre-production · early access</span></div>
        <div className="vA-nav">
          <a href="#" onClick={go('docs')}>docs</a>
          <a href="#" onClick={go('docs')}>bench</a>
          <a href="#" onClick={go('pricing')}>pricing</a>
          <a href="#" onClick={go('docs')}>changelog</a>
          <a href="#" onClick={go('app')}>console →</a>
        </div>
      </div>

      <div className="vA-breadcrumb">
        <span>~</span><span>/</span><span>arkon</span><span>/</span><span style={{color:'#1a1813'}}>readme.md</span>
        <span style={{marginLeft:'auto', color:'#5a5448'}}>last updated 2026-04-21 · commit <span className="vA-acc">b767dd2</span></span>
      </div>

      <section className="vA-hero">
        <div>
          <h1 className="vA-h1">A Chromium fork<br/>that doesn't get<br/><em>flagged.</em></h1>
          <p className="vA-lede">
            Nineteen C++ patches against Chromium 147's fingerprinting surfaces, plus a rule-based behavioral profiler (24 checks) and 1,008 production personas with real cookie histories. BrowserScan 87% desktop, 15/15 mobile. Sannysoft 0/57. iphey trustworthy. Read the <a href="#">one-page technical overview</a>, or join the waitlist below.
          </p>
          <div className="vA-cli">
            <span className="dol">$</span><span>pip install arkon</span>
            <span style={{color:'#8a8470'}}>&nbsp;·&nbsp;</span>
            <span>npm i @arkon/sdk</span>
          </div>
        </div>
        <dl className="vA-aside">
          <dt>release</dt>
          <dd>v0.8 · pinned 147.0.7718.0+ark.2026.04.14</dd>
          <dt>license</dt>
          <dd>proprietary (beta) · SDK clients open-source at GA</dd>
          <dt>maintainers</dt>
          <dd>solo founder + 1 contractor</dd>
          <dt>status</dt>
          <dd>closed beta through Q2 2026 · <span className="vA-acc">waitlist open</span></dd>
          <dt>support</dt>
          <dd>hi@tryarkon.com · direct line to founder</dd>
        </dl>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 1 — the problem</div>
        <h2 className="vA-h2">Patching <code style={{background:'#e8e2d3', padding:'2px 8px', fontSize:'0.85em'}}>navigator.webdriver</code> in JS stopped working around 2022.</h2>
        <div className="vA-two">
          <div>
            <p className="vA-p">Most stealth plugins on GitHub still do that — spray a dozen JS overrides on top of a regular Puppeteer install and call it done. Meanwhile the anti-bot market evolved. Cloudflare shipped Turnstile. Kasada doubled its team. DataDome started selling to CDNs directly. BrowserScan became the casual check anyone runs before paying you.</p>
            <p className="vA-p">Today these systems profile <em>behavior</em>: scroll cadence, search-entry patterns, session idle ratios, timezone-vs-IP coherence, cookie jar depth. A JS shim doesn't touch any of that.</p>
            <p className="vA-p">We patch the fingerprint leaks at the C++ layer<sup style={{color:'#b8860b'}}>1</sup>, enforce behavior through 24 gate-checked rules, and pin each persona to a mobile modem with real warmup history. No learned motor models. Just engineering.</p>
          </div>
          <div className="vA-sidenote">
            <div style={{color:'#1a1813', marginBottom:8}}>aside</div>
            "Stealth" is a marketing word. What we ship is a patched WebView whose fingerprint surface passes BrowserScan at 87% without a proxy and 15/15 Normal on mobile.
            <hr/>
            On Sannysoft it's 0/57 detections. Source logs ship in the beta onboarding docs.
          </div>
        </div>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 2 — what's actually in the fork</div>
        <h2 className="vA-h2">Nineteen patches. 3,944 LOC against Chromium 147.</h2>
        <p className="vA-p" style={{marginBottom:32}}>The patchset below ships in every build. Bold ones are load-bearing — the rest clean up leaks that only show up under determined fingerprinting. Chromium base: <code>147.0.7718.0</code>. V8: <code>14.7.136</code>. Last rebase: <span className="vA-acc">2026-04-14</span>.</p>
        <table className="vA-table">
          <thead>
            <tr><th style={{width:40}}>#</th><th>patch</th><th>surface</th><th>file</th></tr>
          </thead>
          <tbody>
            {[
              ['01','**MVP flag propagation**','switches + stealth flags','0001'],
              ['02','**canvas-noise + audio-noise (phase 2)**','Canvas2D / AudioContext','0002'],
              ['03','**CDP-stealth-mode**','DevTools protocol surface','0003'],
              ['04','**screen-avail + navigator.platform**','Screen / navigator','0004'],
              ['05','CSS media-query device-width/height','CSS MQ','0005'],
              ['06','brands-version-override','userAgentData.brands','0006'],
              ['07','fullVersionList + WebRTC-policy + font','multi-surface','0007'],
              ['08','**WebGL full GPU profile spoofing**','WebGL vendor/renderer','0008/0009'],
              ['09','audio-noise-v2 (shared helper)','WebAudio','0009'],
              ['10','ClientRects / DOMRect noise','getBoundingClientRect','0010'],
              ['11','measureText noise','Canvas text metrics','0011'],
              ['12','**Font-enumeration whitelist**','FontFaceSet / font_access','0012'],
              ['13','WebGPU adapter-info spoof','WebGPU','0013'],
              ['14','SpeechSynthesis voice list','speechSynthesis','0014'],
              ['15','Performance.now precision','performance.now','0015'],
              ['16','Network-Information API','navigator.connection','0016'],
              ['17','Screen-Orientation consistency','screen.orientation','0017'],
              ['18','Media-Capabilities decodingInfo','mediaCapabilities','0018'],
              ['19','Visual-Viewport consistency','visualViewport','0019'],
            ].map(r => (
              <tr key={r[0]}>
                <td style={{color:'#5a5448'}}>{r[0]}</td>
                <td dangerouslySetInnerHTML={{__html: r[1].replace(/\*\*(.+?)\*\*/, '<strong>$1</strong>')}}/>
                <td style={{color:'#5a5448'}}>{r[2]}</td>
                <td>{r[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="vA-p" style={{marginTop:24, fontSize:12, color:'#5a5448'}}>Total 3,944 LOC across 19 patches · patch files ship with the SDK for inspection · monthly rebase cadence against upstream stable.</p>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 3 — behavioral profiling</div>
        <h2 className="vA-h2">24 rules. No learned motor models. Just engineering.</h2>
        <div className="vA-two">
          <div>
            <p className="vA-p">Fingerprint is necessary but not sufficient. A clean fingerprint with a robotic session shape still gets flagged. So we enforce behavior through a rule engine — 24 discrete checks across navigation, timing, interaction, session shape, IP/block history, and rank.</p>
            <p className="vA-p">Each persona carries: chronotype (active hours by IP timezone), modem affinity (pinned SIM), warmup tier (cookie depth and platform hours), device age bracket, session idle ratio, search-entry requirement for tier-3+ sites. Gatekeeper checks these before any mission runs.</p>
            <p className="vA-p">Nothing here is ML. If a check fails, the mission freezes. If a persona trips three IP blocks in 24h, they quarantine for 48. The rules live in <code>persona_rules.py</code>; nothing hidden.</p>
          </div>
          <div className="vA-sidenote">
            <div style={{color:'#1a1813', marginBottom:8}}>sample rules (from persona_rules.py)</div>
            <span className="vA-acc">nav_require_search_entry</span> — enter tier-3+ via Google/Yandex, not direct URL.<br/>
            <span className="vA-acc">ip_never_rotate_on_captcha</span> — captcha = solve, never rotate.<br/>
            <span className="vA-acc">timing_active_hours</span> — activity only 08:00-23:00 IP-local.<br/>
            <span className="vA-acc">session_idle_ratio ≥ 0.3</span> — idle browsing required on MEDIUM+.<br/>
            <span className="vA-acc">destroy_tz_ip_mismatch</span> — timezone/IP mismatch = freeze.
            <hr/>
            All 24 rules documented in the SDK.
          </div>
        </div>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 4 — benchmarks</div>
        <h2 className="vA-h2">Measured against real detectors, not vendor sandboxes.</h2>
        <div className="vA-two">
          <div>
            <p className="vA-p">Numbers below are from BrowserScan, Sannysoft, iphey, and NowSecure — the checks customers actually run. No private bench harness; these are public URLs you can re-run yourself.</p>
            <p className="vA-p">We're building a public bench harness at <span className="vA-link">github.com/arkon-browser/bench</span> in parallel — target release Q2 2026. Until then, the screenshot archive ships with the SDK.</p>
          </div>
          <div className="vA-sidenote">
            <div style={{color:'#1a1813', marginBottom:8}}>how to reproduce</div>
            Run any beta persona against:<br/>
            <span className="vA-acc">browserscan.net</span> · desktop + mobile<br/>
            <span className="vA-acc">bot.sannysoft.com</span> · desktop<br/>
            <span className="vA-acc">iphey.com</span> · desktop<br/>
            <span className="vA-acc">nowsecure.nl</span> · mobile
            <hr/>
            Screenshots archived per-build. Ask for the 2026-04-14 bundle.
          </div>
        </div>
        <div className="vA-ascii" style={{marginTop:40}}>
{`                            result (measured on build 147.0.7718.0+ark.2026.04.14)
                            ─────────────────────────────────────────────────────
  browserscan desktop       ├──────────────────────────────────────█████████▓░┤  87%    authenticity, no proxy
  browserscan desktop+proxy ├──────────────────────────────────────███████████┤  97%+   with mobile modem
  browserscan mobile        ├──────────────────────────────────────███████████┤  15/15  Normal (all green)
  sannysoft desktop         ├──────────────────────────────────────███████████┤  0/57   detections
  iphey                     ├──────────────────────────────────────███████████┤  Trustworthy
  nowsecure mobile          ├──────────────────────────────────────███████████┤  passes
                           └────────────────────────────────────────────────┘
                                                     arkon build 147.0.7718.0+ark.2026.04.14
                                                     bench harness placeholder until Q2 2026 release`}
        </div>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 5 — the API</div>
        <h2 className="vA-h2">One verb: <code style={{background:'#e8e2d3', padding:'2px 8px', fontSize:'0.85em'}}>ark_mission</code>.</h2>
        <p className="vA-p">Goal-oriented, not script-oriented. You tell it what to accomplish and which persona to run as. It handles proxy assignment, gatekeeper preflight, cookie load, navigation, extraction, and cleanup. Returns structured JSON if you pass a schema.</p>
        <div className="vA-code">
<pre style={{margin:0, fontFamily:'inherit'}}>
<span className="cm"># scrape 30 Avito listings through a mobile persona on a real Android container</span>{'\n\n'}
<span className="kw">from</span> arkon <span className="kw">import</span> mission{'\n\n'}
result = <span className="kw">await</span> <span className="fn">mission</span>({'\n'}
{'    '}goal=<span className="str">"scrape top 30 avito listings for 'iphone 15' in moscow"</span>,{'\n'}
{'    '}persona_id=<span className="str">"persona_007_mobile_android"</span>,{'\n'}
{'    '}output_schema=<span className="str">{"'{\"title\": \"str\", \"price\": \"int\", \"link\": \"str\"}'"}</span>,{'\n'}
{'    '}max_steps=<span className="str">20</span>,{'\n'}
){'\n'}
<span className="cm"># returns extracted listings; proxy, cookies, teardown handled</span></pre>
        </div>
        <p className="vA-p" style={{fontSize:12, color:'#5a5448'}}>Validated end-to-end on Avito: 149 listings extracted in 43s through arkdroid + mobile proxy + gatekeeper. Persona 007 = Arkady, mobile_android, ru-RU, reserved veteran. See <span className="vA-link">docs/ark_mission.md</span> for the full surface.</p>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 6 — real Android, not emulation</div>
        <h2 className="vA-h2">arkdroid: redroid container, patched WebView, CDP over ADB.</h2>
        <div className="vA-two">
          <div>
            <p className="vA-p">Most "mobile stealth" tools ship a desktop Chromium with a spoofed User-Agent and a smaller viewport. Modern anti-bot engines catch that in GPU benchmark fingerprinting and canvas-render timing within a page load.</p>
            <p className="vA-p">arkdroid runs redroid (AOSP Android 12 x86_64) inside Docker. Our patched SystemWebView APK (<code>147.0.7718.0</code>, 289 MB, 21 installable slots per container) is the actual browser. Touch events dispatch via CDP over ADB forward — <em>webview_devtools_remote_PID</em> bridged to a host TCP port. Pressure curves, bezier trajectories, timing jitter on every tap.</p>
            <p className="vA-p">Result on BrowserScan mobile: 15/15 Normal. NowSecure: passes. This is the component that makes Avito extraction through a mobile persona actually work in production.</p>
          </div>
          <div className="vA-sidenote">
            <div style={{color:'#1a1813', marginBottom:8}}>stack</div>
            docker image <span className="vA-acc">arkon/redroid:12.0.0-arkon</span> · 2.51 GB<br/>
            default device <span className="vA-acc">SM-A546B</span> (Galaxy A54) · Android 12 · 1081×2401 @ 420dpi, 30fps<br/>
            21 APK slots per container (<code>dev.archipelago.browser1..21</code>)<br/>
            CDP bridge via ADB forward<br/>
            touch behavior: <code>Input.dispatchTouchEvent</code> with human-shaped timing
            <hr/>
            Runs on a single m75q-2 node. N containers in parallel, each its own persona.
          </div>
        </div>
      </section>

      <section className="vA-section">
        <div className="vA-sec-num">§ 7 — rate card (beta)</div>
        <h2 className="vA-h2">$0.80 per session-minute · early-access pricing during beta.</h2>
        <div className="vA-two">
          <div>
            <p className="vA-p">We're in closed beta through Q2 2026. First 20 teams get 6 months at this rate locked in. After that, pricing adjusts based on real infrastructure load — mobile modems and Android containers are not cheap to run.</p>
            <p className="vA-p">A session-minute is a browser tab (desktop or arkdroid container) running on our infra, wall-clock. We meter in whole seconds, bill in whole minutes. Mobile-proxy bandwidth on Tele2 is included; your own SOCKS5 is fine too.</p>
            <p className="vA-p" style={{fontSize:12, color:'#5a5448', marginTop:24}}>No seat pricing. No hidden enterprise tier. If you need on-prem (deploy the patched WebView + Redroid image on your cluster), we'll talk.</p>
          </div>
          <div className="vA-sidenote">
            <div style={{color:'#1a1813', marginBottom:8}}>example</div>
            5 agents × 8 min/day × 22 working days:<br/>
            <span style={{color:'#1a1813', fontSize:14}}>880 min × $0.80 = $704/mo</span>
            <hr/>
            50 agents × 60 min/day × 30 days = 90,000 min × $0.80 = <span style={{color:'#1a1813', fontSize:14}}>$72,000/mo</span>
            <hr/>
            Beta lock: first 20 teams get 6 months at this rate.
          </div>
        </div>
      </section>

      <section className="vA-section" style={{paddingBottom:48}}>
        <div className="vA-sec-num">§ 8 — recent changes</div>
        <h2 className="vA-h2" style={{marginBottom:16}}>Changelog, last week of shipped commits.</h2>
        <p className="vA-p" style={{fontSize:12, color:'#5a5448', marginBottom:24}}>From the archipelago monorepo <code>git log</code> (auto-save commits filtered). Full log at <span className="vA-link">changelog.arkon.io</span> after GA.</p>
        <div>
          {[
            ['b767dd2', 'apr 21', 'arkon: add CONTAINER.md — runtime manifest + exposed gaps'],
            ['5a3bc84', 'apr 21', 'arkon: add VERSION.md manifest — pin 147.0.7718.0+ark.2026.04.14'],
            ['792f4ad', 'apr 20', 'arkdroid: fix slot rotation + pm enable for browser2-21'],
            ['50c6c65', 'apr 19', 'arkip API.md §4.1: explicit socks5-only contract'],
            ['7ba3d09', 'apr 19', 'arkip API.md §2: document v1.1 HMAC X-Arkip-Token spec'],
            ['f6143e0', 'apr 15', 'operator_impl: guard click/fill against hidden/obscured/modal-blocked targets'],
          ].map(c => (
            <div key={c[0]} className="vA-commit">
              <span className="sha">{c[0]}</span>
              <span className="when">{c[1]}</span>
              <span>{c[2]}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="vA-section" style={{background:'#1a1813', color:'#f5f2ea'}}>
        <div className="vA-sec-num" style={{color:'#8a8470'}}>§ — closed beta</div>
        <h2 className="vA-h2" style={{color:'#f5f2ea', maxWidth: 880}}>v0.8 · pre-production · we're building this in public.</h2>
        <p className="vA-p" style={{color:'#c9c1ab', maxWidth:620}}>Closed beta through Q2 2026. First 20 teams get 6 months at the beta rate locked in. Email with a sentence or two about your use case — we read everything.</p>
        <div style={{display:'flex', gap:16, marginTop:24, alignItems:'center'}}>
          <button style={{background:'#b8860b', color:'#1a1813', border:'none', padding:'14px 22px', fontFamily:'inherit', fontSize:14, cursor:'pointer', fontWeight:500}}>
            join the waitlist →
          </button>
          <button style={{background:'transparent', color:'#f5f2ea', border:'1px solid #f5f2ea', padding:'14px 22px', fontFamily:'inherit', fontSize:14, cursor:'pointer'}}>
            book a call
          </button>
          <span style={{marginLeft:24, fontSize:12, color:'#8a8470'}}>hi@tryarkon.com — direct line to the founder.</span>
        </div>
      </section>

      <div className="vA-footnotes">
        <div className="vA-fn"><sup>1</sup> We build against Chromium 147 (upstream commit 5ae679c963, 2026-03-03) with 9 patches applied at build time on ai-station, plus 10 more staged in the archipelago repo for the next rebase. APK SHA256 and Docker image SHA pinned in <code>arkon/VERSION.md</code>. Reproducibility is file-level, not commit-level — we ship .patch files alongside the SDK.</div>
        <div className="vA-fn"><sup>2</sup> "Session-minute" is wall-clock from <code>session.create</code> to <code>session.close</code> or timeout, rounded up to the next second, billed by the minute. If you leave a session open we reap it at 30 minutes. Beta rate: $0.80/min. First 20 teams locked for 6 months.</div>
        <div className="vA-fn"><sup>3</sup> We read every waitlist entry. We decline obvious fraud cases (credential stuffing, payment fraud, mass fake registration). If unsure, email first; we usually answer within a day.</div>
        <div className="vA-fn" style={{textAlign:'right'}}>
          © 2026 Arkon · v0.8 pre-production<br/>
          closed beta through Q2 2026<br/>
          <span className="vA-link">/privacy</span> · <span className="vA-link">/terms</span> · <span className="vA-link">/aup</span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { VariantA });