builtbykev
f549422758
Drops the updated claude.ai/design bundle into specs/design-reference/ as the build reference. New since the Jul-18 export: Vyndr Price Triplet.dc.html (the reality-corrected ACT 01 — five honesty states incl. EDGE-NOT-TAKEABLE, and the projection-then-price read-card hierarchy), Vyndr Offseason.dc.html, Vyndr Intelligence.dc.html, PNG export masters, and 83 archetype glyphs (74 display + 9 classifier-legacy). Reference material only. No product code touched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VCNgGSt5qvcLxaeQqa7Zpj
427 lines
54 KiB
HTML
427 lines
54 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html,body{background:#06060B;color:#F0F0F0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
::selection{background:rgba(0,212,160,.28);color:#F0F0F0}
|
||
a{color:#00D4A0;text-decoration:none}
|
||
a:hover{color:#5cf0cf}
|
||
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
|
||
@keyframes vy-livedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
|
||
@keyframes vy-syncdot{0%,100%{opacity:1}50%{opacity:.2}}
|
||
@keyframes vy-rxup{0%{background:rgba(0,212,160,.28)}100%{background:rgba(0,212,160,0)}}
|
||
@keyframes vy-rxdown{0%{background:rgba(255,71,87,.26)}100%{background:rgba(255,71,87,0)}}
|
||
@keyframes vy-rowin{0%{opacity:0;transform:translateY(9px)}100%{opacity:var(--o,1);transform:translateY(0)}}
|
||
@keyframes vy-bootline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
|
||
@keyframes vy-arrive{0%{opacity:0;transform:scale(.88) translateY(10px);filter:blur(6px)}60%{opacity:1;transform:scale(1.015) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
|
||
@keyframes vy-glitch{0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:none}91%{transform:translate(-1.5px,0);clip-path:inset(12% 0 42% 0);text-shadow:1.6px 0 #FF4757,-1.6px 0 #00D4A0}93%{transform:translate(1.5px,0);clip-path:inset(58% 0 8% 0);text-shadow:-1.6px 0 #FF4757,1.6px 0 #00D4A0}95%{transform:translate(-1px,0);clip-path:inset(32% 0 30% 0);text-shadow:1px 0 #00D4A0}96%{transform:translate(1px,0);clip-path:inset(70% 0 4% 0);text-shadow:none}}
|
||
@keyframes vy-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
|
||
@keyframes vy-wirein{0%{opacity:0;transform:translateY(4px)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
|
||
.rx-up{animation:vy-rxup .75s ease-out}
|
||
.rx-down{animation:vy-rxdown .75s ease-out}
|
||
.vy-grain{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
|
||
.vy-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55),inset 0 90px 120px -60px rgba(0,212,160,.05)}
|
||
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
|
||
[data-reveal].vy-in{opacity:1;transform:none}
|
||
.vy-still *{animation-play-state:paused !important}
|
||
html{scroll-behavior:smooth}
|
||
</style>
|
||
<script src="image-slot.js"></script>
|
||
<style>image-slot::part(empty){opacity:0}</style>
|
||
</helmet>
|
||
<div ref="{{ rootRef }}" class="{{ stillClass }}" style="min-height:100vh;background:radial-gradient(1200px 700px at 78% -8%,rgba(0,212,160,.06),transparent 60%),#06060B;padding:0 0 120px">
|
||
<div class="vy-vignette" aria-hidden="true"></div>
|
||
<div class="vy-grain" aria-hidden="true"></div>
|
||
|
||
<div style="position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:14px;height:36px;padding:0 40px;background:rgba(6,6,11,.88);backdrop-filter:blur(14px);border-top:1px solid #14141E">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.26em;color:#00D4A0;font-weight:800;flex:none">THE WIRE</span>
|
||
<span style="width:1px;height:14px;background:#1E1E2A;flex:none"></span>
|
||
<span class="mono" data-wire-time style="font-size:10px;color:#707080;letter-spacing:.06em;flex:none">--:--:--</span>
|
||
<span class="mono" data-wire style="font-size:11px;color:#B8BCC8;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1">Intelligence desk open — 7 books held per prop, CLV tracked from lock.</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.16em;color:#4a4a58;flex:none">LOG ▸</span>
|
||
</div>
|
||
|
||
<div style="max-width:1240px;margin:0 auto;padding:0 40px">
|
||
|
||
<div style="padding:52px 0 30px">
|
||
<div class="mono" style="font-size:11px;letter-spacing:.34em;color:#00D4A0;margin-bottom:16px">VYNDR · ACT 01 · THE PRICE TRIPLET</div>
|
||
<h1 style="font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05">The honest layer, rendered.<span class="mono" style="color:#00D4A0;animation:vy-cursor 1.1s steps(1) infinite">▌</span></h1>
|
||
<p style="margin-top:12px;max-width:660px;color:#B8BCC8;font-size:14px;line-height:1.55">The price triplet leads — <span class="mono" style="color:#F0F0F0">book · fair · model</span>, the de-vigged number nobody else shows consumers. Then line shopping, article media, CLV & calibration, and The Report — extensions sharing primitives. The movement strip is defined once here and reused everywhere a line has a past.</p>
|
||
<div class="mono" style="margin-top:14px;font-size:10px;letter-spacing:.16em;color:#707080">BOOK · FAIR · MODEL · FIVE HONESTY STATES · STAT PROJECTION + PRICE LAYER</div>
|
||
</div>
|
||
|
||
<!-- ============ ACT 01 · THE PRICE TRIPLET (HERO FEATURE) ============ -->
|
||
<div data-reveal style="margin-top:14px;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid #14141E;padding-bottom:18px">
|
||
<span class="mono" style="font-size:64px;font-weight:800;line-height:.8;color:#14141E;-webkit-text-stroke:1px #2A2A38">01</span>
|
||
<div><div class="mono" style="font-size:13px;letter-spacing:.3em;color:#F0F0F0;font-weight:800">THE PRICE TRIPLET <span style="color:#FFB347">· HERO</span></div><div style="font-size:12.5px;color:#707080;margin-top:5px">Book · fair · model, per prop — the price-honesty layer beside the stat projection. Fair is the amber hero, honest on every row: value, edge-but-priced-out, or no edge. Renders on the read card, board and hero; the close lives in the ledger.</div></div>
|
||
</div>
|
||
|
||
<div id="triplet" data-screen-label="Price triplet · anatomy + four honesty states" style="margin-top:44px">
|
||
|
||
<!-- anatomy · inherits the parlay TRUE FAIR VALUE language -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:22px 24px">
|
||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">ANATOMY</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">EXTENDS THE PARLAY "TRUE FAIR VALUE" — 2-UP GRID → 3-LEG PER-PROP</span>
|
||
</div>
|
||
<div style="max-width:560px">
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:12px;overflow:hidden;background:#0E0E14">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:16px 10px">
|
||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div>
|
||
<div class="mono" style="font-size:22px;font-weight:800;color:#F0F0F0;margin-top:8px;letter-spacing:-.01em">+125</div>
|
||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#4a4a58;margin-top:6px">OFFERED</div>
|
||
</div>
|
||
<div style="flex:1.16;min-width:0;text-align:center;padding:16px 10px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A">
|
||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div>
|
||
<div class="mono" style="font-size:31px;font-weight:800;color:#FFB347;margin-top:5px;letter-spacing:-.02em;text-shadow:0 0 22px rgba(255,179,71,.24)">+110</div>
|
||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#8a7a55;margin-top:5px">DE-VIGGED · HERO</div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:16px 10px">
|
||
<div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div>
|
||
<div class="mono" style="font-size:22px;font-weight:800;color:#00D4A0;margin-top:8px;letter-spacing:-.01em">+98</div>
|
||
<div class="mono" style="font-size:7px;letter-spacing:.12em;color:#4a4a58;margin-top:6px">OUR PRICE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;max-width:820px">
|
||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#F0F0F0;font-weight:700">BOOK</div><div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:5px">The market's offered line. Honest on every row.</div></div>
|
||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#FFB347;font-weight:700">FAIR · THE HERO</div><div style="font-size:10.5px;color:#B8BCC8;line-height:1.55;margin-top:5px">The de-vigged fair number. The whole product. Never hidden — not even when the model leg is poisoned.</div></div>
|
||
<div><div class="mono" style="font-size:8.5px;letter-spacing:.14em;color:#00D4A0;font-weight:700">MODEL</div><div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:5px">VYNDR's own price. Green only for takeable edge — never a juiced one. Suppressible on quarantined rows.</div></div>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:16px;line-height:1.7">SAME TOKENS AS THE PARLAY · LABEL 7.5PX / .14EM / #707080 · VALUE MONO 800 · FAIR AMBER #FFB347 VS BOOK #F0F0F0 · GREEN #00D4A0 = TAKEABLE EDGE ONLY · BLUE = EDGE PRICED OUT</div>
|
||
</div>
|
||
|
||
<!-- four honesty states · desktop -->
|
||
<div style="display:flex;align-items:center;gap:12px;margin:30px 0 14px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">FIVE HONESTY STATES · DESKTOP</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">THREE VERDICTS — VALUE · EDGE-NOT-TAKEABLE · NO EDGE — PLUS QUARANTINE & REFUSAL</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
|
||
<!-- STATE 1 · POSITIVE VALUE -->
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">NYG · WK 1</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:8px;letter-spacing:.12em;color:#00D4A0;font-weight:700;flex:none">1 · VALUE</span>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+125</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+110</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#00D4A0;margin-top:7px;text-shadow:0 0 16px rgba(0,212,160,.35)">+98</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||
</div>
|
||
<div style="padding:11px 13px;border-radius:10px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.28)">
|
||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;flex:none;box-shadow:0 0 8px rgba(0,212,160,.7)"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#00D4A0">VALUE · +2.9% VS FAIR</span></div>
|
||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">Model prices it shorter than the honest number — the book is paying longer than the leg is worth. Real edge.</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">THE PRICE STORY · READ CARD</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||
</div>
|
||
|
||
<!-- STATE 2 · EDGE BUT NOT TAKEABLE (priced out) -->
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Chase <span style="color:#B8BCC8;font-weight:500">o 6.5 Receptions</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">CIN · WK 1</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(106,147,200,.12);border:1px solid rgba(106,147,200,.34);font-size:8px;letter-spacing:.1em;color:#8fb2de;font-weight:700;flex:none">2 · PRICED OUT</span>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">−210</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">JUICED</div></div>
|
||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">−175</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#8fb2de;margin-top:7px">−240</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||
</div>
|
||
<div style="padding:11px 13px;border-radius:10px;background:rgba(106,147,200,.08);border:1px solid rgba(106,147,200,.3)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px"><div style="display:flex;align-items:center;gap:8px"><span class="mono" style="font-size:12px;color:#8fb2de;flex:none;line-height:1">⊘</span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#8fb2de">EDGE · NOT TAKEABLE</span></div><span class="mono" style="font-size:9px;letter-spacing:.06em;color:#7a93b0">+11.7% EV AT −210</span></div>
|
||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">The math shows edge — but −210 is too juiced to bet. We won't call a juiced price a value, and we won't pretend the edge wasn't there.</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">TAKEABLE BAND −160 TO +200</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||
</div>
|
||
|
||
<!-- STATE 3 · NO / NEGATIVE VALUE -->
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Achane <span style="color:#B8BCC8;font-weight:500">o 71.5 Rush Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">MIA · WK 1</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8px;letter-spacing:.12em;color:#B8BCC8;font-weight:700;flex:none">3 · NO EDGE</span>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+118</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+104</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:20px;font-weight:800;color:#B8BCC8;margin-top:7px">+112</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OUR PRICE</div></div>
|
||
</div>
|
||
<div style="padding:11px 13px;border-radius:10px;background:#101018;border:1px solid #1E1E2A">
|
||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;border:1.5px solid #707080;flex:none"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#B8BCC8">NO EDGE HERE · −1.8% VS FAIR</span></div>
|
||
<div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:6px">Model lands short of fair — the honest number is already priced. We're not calling this a play. That "no" is the instrument working.</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">THE PRICE STORY · READ CARD</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||
</div>
|
||
|
||
<!-- STATE 4 · MODEL-LEG SUPPRESSED (quarantined) · PRIMARY -->
|
||
<div style="border-radius:14px;background:#0E0E14;border:1px solid #2A2A38;padding:18px;display:flex;flex-direction:column;gap:13px;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Bijan <span style="color:#B8BCC8;font-weight:500">o 84.5 Rush Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">ATL · WK 1</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.3);font-size:8px;letter-spacing:.1em;color:#FFB347;font-weight:700;flex:none">4 · QUARANTINE · 38%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:20px;font-weight:800;color:#F0F0F0;margin-top:7px">+130</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">OFFERED</div></div>
|
||
<div style="flex:1.16;min-width:0;text-align:center;padding:14px 8px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:29px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 20px rgba(255,179,71,.22)">+116</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED</div></div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(255,255,255,.014) 5px,rgba(255,255,255,.014) 10px)"><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:19px;font-weight:800;color:#4a4a58;margin-top:8px;letter-spacing:.1em">— · —</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#5a5a68;margin-top:6px">WITHHELD</div></div>
|
||
</div>
|
||
<div style="padding:11px 13px;border-radius:10px;background:#101018;border:1px solid #2A2A38">
|
||
<div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:2px;background:#FFB347;flex:none;opacity:.85"></span><span class="mono" style="font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#B8BCC8">MODEL READ WITHHELD</span></div>
|
||
<div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:6px">Graded against an unverified matchup — so we suppressed our price. Book & fair stand; we never hide the honest fair number because a different leg is poisoned.</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">PRIMARY STATE · 200 / 520 ROWS</span><a href="#clv" class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">CLOSES TRACKED IN YOUR LEDGER ▸</a></div>
|
||
</div>
|
||
|
||
<!-- STATE 5 · REFUSAL / CAN'T-GRADE · spans full width -->
|
||
<div style="grid-column:1 / -1;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;flex-direction:column;gap:13px">
|
||
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
|
||
<div style="min-width:0"><div style="font-size:13.5px;font-weight:700">Egbuka <span style="color:#B8BCC8;font-weight:500">o 44.5 Rec Yds</span></div><div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:3px">TB · NFL DEBUT · NO PRIORS</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.28);font-size:8px;letter-spacing:.1em;color:#FF6B78;font-weight:700;flex:none">5 · REFUSAL</span>
|
||
</div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center;border:1px dashed #2A2A38;border-radius:11px;padding:20px 16px;text-align:center;background:#0A0A10">
|
||
<div>
|
||
<div class="mono" style="font-size:9px;letter-spacing:.22em;color:#FF6B78">CAN'T GRADE THIS ONE</div>
|
||
<div style="font-size:11.5px;color:#B8BCC8;margin-top:9px;line-height:1.55;max-width:340px">No fair price we'd defend yet — the inputs are too thin. When they clear, the triplet returns. We'd rather show nothing than a number we can't stand behind.</div>
|
||
<div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58;margin-top:11px">NO FABRICATED PRICE · NO EMPTY GAUGE · TRUTH LAW</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px"><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">NOTHING TO TRACK YET</span><span class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#4a4a58">LEDGER OPENS ON FIRST HONEST LOCK</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- in context · where it renders -->
|
||
<div style="display:flex;align-items:center;gap:12px;margin:30px 0 14px">
|
||
<span class="mono" style="font-size:12px;letter-spacing:.28em;color:#F0F0F0;font-weight:700">IN CONTEXT · WHERE IT RENDERS</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">READ-CARD HERO · BOARD ROW · FREE-TIER GATE</span>
|
||
</div>
|
||
|
||
<!-- A · read-card hero -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 22px 0">
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:8.5px;letter-spacing:.14em;color:#B8BCC8">READ CARD · HERO</span>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:8.5px;letter-spacing:.14em;color:#B8BCC8">NFL</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#4a4a58;margin-left:auto">JUL 17, 2026 · THE DESK</span>
|
||
</div>
|
||
<div style="padding:14px 22px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;align-items:start">
|
||
<div style="min-width:0">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.32);font-size:22px;font-weight:800;color:#00D4A0;flex:none;text-shadow:0 0 18px rgba(0,212,160,.4)">A+</span>
|
||
<div style="min-width:0"><div style="font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15">Nabers over 1,115.5 receiving yards</div><div class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080;margin-top:4px">NYG · WK 1 · OPENED 1,050.5</div></div>
|
||
</div>
|
||
<p style="font-size:12.5px;line-height:1.65;color:#B8BCC8;margin-top:14px;max-width:420px">The market moved 70 on the clearance and stopped — our sim says the discount was worth twice that. Read the projection first (does it clear), then the price (is it fair). Two questions, one card.</p>
|
||
<div style="display:flex;align-items:center;gap:10px;margin-top:14px"><span class="mono" style="display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:11px;background:#00D4A0;color:#06060B;font-weight:800;font-size:10.5px;letter-spacing:.08em">TAKE +125 AT FANDUEL ▸</span><a href="#clv" class="mono" style="font-size:8px;letter-spacing:.12em;color:#707080;line-height:1.5">CLOSES TRACKED<br>IN YOUR LEDGER ▸</a></div>
|
||
</div>
|
||
<div style="min-width:0;display:flex;flex-direction:column;gap:12px">
|
||
<div style="border:1px solid #1E1E2A;border-radius:13px;background:#0E0E14;padding:13px 16px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><span class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080">① PROJECTION · WILL IT CLEAR</span><span class="mono" style="font-size:8px;letter-spacing:.1em;color:#00D4A0;font-weight:700">CLEARS BY 72.5</span></div>
|
||
<div style="display:flex;align-items:flex-end;gap:16px">
|
||
<div><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">MODEL PROJ</div><div class="mono" style="font-size:28px;font-weight:800;color:#00D4A0;line-height:1;margin-top:5px;text-shadow:0 0 18px rgba(0,212,160,.28)">1,188</div></div>
|
||
<div class="mono" style="padding-bottom:5px;color:#4a4a58;font-size:11px">vs</div>
|
||
<div><div class="mono" style="font-size:7.5px;letter-spacing:.14em;color:#707080">LINE</div><div class="mono" style="font-size:28px;font-weight:800;color:#F0F0F0;line-height:1;margin-top:5px">1,115.5</div></div>
|
||
<div style="flex:1;min-width:0;padding-bottom:6px"><div style="position:relative;height:8px;border-radius:4px;background:#14141E;overflow:hidden"><div style="position:absolute;left:0;top:0;bottom:0;width:64%;background:#00D4A0;opacity:.5"></div></div><div class="mono" style="font-size:6.5px;letter-spacing:.1em;color:#4a4a58;margin-top:5px">PROJECTED ABOVE THE LINE</div></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.16em;color:#707080;margin-bottom:9px">② PRICE · IS IT FAIR</div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:13px;overflow:hidden;background:#0E0E14">
|
||
<div style="flex:1;min-width:0;text-align:center;padding:16px 8px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080">BOOK</div><div class="mono" style="font-size:24px;font-weight:800;color:#F0F0F0;margin-top:8px">+125</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:6px">OFFERED</div></div>
|
||
<div style="flex:1.2;min-width:0;text-align:center;padding:16px 8px;background:rgba(255,179,71,.06);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:36px;font-weight:800;color:#FFB347;margin-top:4px;letter-spacing:-.02em;text-shadow:0 0 24px rgba(255,179,71,.26)">+110</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#8a7a55;margin-top:4px">DE-VIGGED · HERO</div></div>
|
||
<div style="flex:1;min-width:0;text-align:center;padding:16px 8px"><div class="mono" style="font-size:8px;letter-spacing:.14em;color:#707080">MODEL</div><div class="mono" style="font-size:24px;font-weight:800;color:#00D4A0;margin-top:8px;text-shadow:0 0 18px rgba(0,212,160,.35)">+98</div><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#4a4a58;margin-top:6px">OUR PRICE</div></div>
|
||
</div>
|
||
<div style="margin-top:10px;padding:12px 14px;border-radius:11px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.28)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px"><div style="display:flex;align-items:center;gap:8px"><span style="width:7px;height:7px;border-radius:50%;background:#00D4A0;flex:none;box-shadow:0 0 8px rgba(0,212,160,.7)"></span><span class="mono" style="font-size:11px;font-weight:800;letter-spacing:.05em;color:#00D4A0">VALUE · +2.9% VS FAIR</span></div><span class="mono" style="font-size:9px;letter-spacing:.06em;color:#8fb8ac">+6.1% EV AT +125</span></div>
|
||
<div style="font-size:10.5px;color:#B8BCC8;line-height:1.5;margin-top:6px">Model beats the honest number and the price is takeable — the edge is real at what you can actually get.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58;margin-top:8px;line-height:1.7">HIERARCHY · STAT PROJECTION READS FIRST (WILL IT CLEAR) → PRICE TRIPLET QUALIFIES IT (IS IT FAIR). TWO QUESTIONS, TWO STACKED BLOCKS — NEITHER CROWDS THE OTHER. FAIR STAYS THE AMBER HERO OF THE PRICE LAYER.</div>
|
||
|
||
<!-- B board row · C free-tier gate -->
|
||
<div style="display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start">
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;overflow:hidden;min-width:0">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:15px 18px 13px"><span class="mono" style="font-size:10.5px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TONIGHT'S BOARD · NBA</span><span class="mono" style="font-size:8.5px;letter-spacing:.12em;color:#707080">RANKED BY EDGE · FAIR IS THE NUMBER</span></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018">
|
||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:rgba(0,212,160,.14);border:1px solid rgba(0,212,160,.3);font-size:9px;font-weight:800;color:#00D4A0;flex:none">A+</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Jokić <span style="color:#B8BCC8;font-weight:500">o 27.5 Pts</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#00D4A0;font-weight:700">28.9</span> ▸ CLEARS · BOOK +125 · MDL <span style="color:#00D4A0;font-weight:700">+98</span></div></div>
|
||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+110</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:9px;font-weight:800;color:#00D4A0;flex:none;width:52px;justify-content:center">+2.9%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;opacity:.9">
|
||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.24);font-size:9px;font-weight:800;color:#00D4A0;flex:none">A</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Edwards <span style="color:#B8BCC8;font-weight:500">o 5.5 Ast</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#00D4A0;font-weight:700">6.4</span> ▸ CLEARS · BOOK +112 · MDL <span style="color:#00D4A0;font-weight:700">+96</span></div></div>
|
||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+103</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:rgba(0,212,160,.1);border:1px solid rgba(0,212,160,.28);font-size:9px;font-weight:800;color:#00D4A0;flex:none;width:52px;justify-content:center">+1.6%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:9px;font-weight:800;color:#B8BCC8;flex:none">B</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Gobert <span style="color:#B8BCC8;font-weight:500">o 11.5 Reb</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#B8BCC8;font-weight:700">12.1</span> ▸ CLEARS · BOOK +108 · MDL <span style="color:#FFB347;font-weight:700">withheld</span></div></div>
|
||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+99</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:#14141E;border:1px solid #2A2A38;font-size:8px;font-weight:700;color:#707080;flex:none;width:52px;justify-content:center">QUAR</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #101018;opacity:.72">
|
||
<span class="mono" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:5px;background:#14141E;border:1px solid #1E1E2A;font-size:9px;font-weight:800;color:#B8BCC8;flex:none">C</span>
|
||
<div style="flex:1;min-width:0"><div style="font-size:12.5px;font-weight:700">Murray <span style="color:#B8BCC8;font-weight:500">o 22.5 Pts</span></div><div class="mono" style="font-size:8px;letter-spacing:.08em;color:#707080;margin-top:2px">PROJ <span style="color:#B8BCC8;font-weight:700">22.9</span> ▸ THIN · BOOK +118 · MDL <span style="color:#B8BCC8;font-weight:700">+124</span></div></div>
|
||
<div style="text-align:right;flex:none"><div class="mono" style="font-size:7px;letter-spacing:.14em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:16px;font-weight:800;color:#FFB347;line-height:1">+109</div></div>
|
||
<span class="mono" style="display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;background:#101018;border:1px solid #1E1E2A;font-size:8px;font-weight:700;color:#707080;flex:none;width:52px;justify-content:center">NO EDGE</span>
|
||
</div>
|
||
<div style="padding:10px 18px;border-top:1px solid #101018"><span class="mono" style="font-size:8px;letter-spacing:.12em;color:#4a4a58">PROJECTION LEADS THE ROW (WILL IT CLEAR) · FAIR IS THE PRICE · EDGE CHIP IS THE VERDICT</span></div>
|
||
</div>
|
||
|
||
<!-- C · free-tier gate -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;min-width:0">
|
||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">FREE-TIER GATE · MODEL LEG LOCKED</div>
|
||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#707080;font-weight:700;flex:none">FREE</span></div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:11px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;text-align:center;padding:13px 6px"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">BOOK</div><div class="mono" style="font-size:19px;font-weight:800;color:#F0F0F0;margin-top:6px">+125</div></div>
|
||
<div style="flex:1.16;text-align:center;padding:13px 6px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:26px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em;text-shadow:0 0 18px rgba(255,179,71,.22)">+110</div></div>
|
||
<div style="flex:1;text-align:center;padding:13px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#0C0C12"><div class="mono" style="font-size:7.5px;letter-spacing:.12em;color:#707080">MODEL</div><svg width="15" height="15" viewBox="0 0 24 24" fill="none" style="margin-top:8px;color:#5a5a68"><rect x="4" y="10" width="16" height="10" rx="2" stroke="currentColor" stroke-width="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2"></path></svg><div class="mono" style="font-size:11px;font-weight:800;color:#5a5a68;letter-spacing:.14em;margin-top:5px">+ █ █</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:11px;padding:10px 12px;border-radius:10px;background:#101018;border:1px solid #1E1E2A"><span style="width:7px;height:7px;border-radius:50%;border:1.5px solid #707080;flex:none"></span><span class="mono" style="font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#B8BCC8;flex:1">MODEL PRICE ON ANALYST</span><span class="mono" style="font-size:8.5px;letter-spacing:.08em;color:#00D4A0;font-weight:700;flex:none">UNLOCK ▸</span></div>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#707080;line-height:1.55;margin-top:14px">The honest de-vigged number stays free — that's the hook. Only VYNDR's own price gates. The fair leg is never the paywall.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- mobile 390 + tier -->
|
||
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:16px;align-items:start">
|
||
|
||
<!-- mobile 390 -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px;min-width:0">
|
||
<div class="mono" style="font-size:9px;letter-spacing:.2em;color:#707080;margin-bottom:14px">MOBILE · 390 · THREE LEGS HOLD, FAIR STAYS HERO</div>
|
||
<div style="width:340px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px">
|
||
<!-- positive -->
|
||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #1E1E2A;padding:14px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Nabers <span style="color:#B8BCC8;font-weight:500">o 1,115.5 Rec</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#00D4A0;font-weight:700;flex:none">VALUE</span></div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">BOOK</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0;margin-top:5px">+125</div></div>
|
||
<div style="flex:1.14;text-align:center;padding:11px 4px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:23px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em">+110</div></div>
|
||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">MODEL</div><div class="mono" style="font-size:16px;font-weight:800;color:#00D4A0;margin-top:5px">+98</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.26)"><span style="width:6px;height:6px;border-radius:50%;background:#00D4A0;flex:none"></span><span class="mono" style="font-size:9px;font-weight:800;letter-spacing:.04em;color:#00D4A0">+2.9% VS FAIR</span><span style="font-size:9px;color:#707080;margin-left:auto">real edge</span></div>
|
||
</div>
|
||
<!-- quarantine -->
|
||
<div style="border-radius:13px;background:#0E0E14;border:1px solid #2A2A38;padding:14px;box-shadow:inset 3px 0 0 rgba(255,179,71,.4)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px"><div style="font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Bijan <span style="color:#B8BCC8;font-weight:500">o 84.5 Rush</span></div><span class="mono" style="font-size:7.5px;letter-spacing:.1em;color:#FFB347;font-weight:700;flex:none">QUARANTINE</span></div>
|
||
<div style="display:flex;align-items:stretch;border:1px solid #1E1E2A;border-radius:10px;overflow:hidden;background:#0A0A10">
|
||
<div style="flex:1;text-align:center;padding:11px 4px"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">BOOK</div><div class="mono" style="font-size:16px;font-weight:800;color:#F0F0F0;margin-top:5px">+130</div></div>
|
||
<div style="flex:1.14;text-align:center;padding:11px 4px;background:rgba(255,179,71,.055);border-left:1px solid #1E1E2A;border-right:1px solid #1E1E2A"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#FFB347">◆ FAIR</div><div class="mono" style="font-size:23px;font-weight:800;color:#FFB347;margin-top:3px;letter-spacing:-.02em">+116</div></div>
|
||
<div style="flex:1;text-align:center;padding:11px 4px;background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.014) 4px,rgba(255,255,255,.014) 8px)"><div class="mono" style="font-size:7px;letter-spacing:.1em;color:#707080">MODEL</div><div class="mono" style="font-size:15px;font-weight:800;color:#4a4a58;margin-top:6px">—</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border-radius:9px;background:#101018;border:1px solid #2A2A38"><span style="width:6px;height:6px;border-radius:2px;background:#FFB347;opacity:.85;flex:none"></span><span class="mono" style="font-size:9px;font-weight:800;letter-spacing:.04em;color:#B8BCC8">MODEL WITHHELD</span><span style="font-size:9px;color:#707080;margin-left:auto">book & fair stand</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="mono" style="font-size:8px;letter-spacing:.1em;color:#4a4a58;margin-top:14px;line-height:1.6;text-align:center">44PX MIN TAP ON THE LEDGER LINK · NO HORIZONTAL SCROLL AT 390 · FAIR NEVER DROPS BELOW BOOK/MODEL IN SIZE</div>
|
||
</div>
|
||
|
||
<!-- tier placement -->
|
||
<div style="border-radius:16px;background:#0A0A10;border:1px solid #1E1E2A;padding:20px 22px;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px"><span class="mono" style="font-size:11px;letter-spacing:.24em;color:#F0F0F0;font-weight:700">TIER PLACEMENT</span><span class="mono" style="display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:5px;background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.28);font-size:7.5px;letter-spacing:.1em;color:#FFB347;font-weight:700">RECOMMENDED · CONFIRM</span></div>
|
||
<div style="font-size:11.5px;color:#707080;line-height:1.55;margin-bottom:16px">The de-vigged fair number is the free-tier hook per prior product intent — worth surfacing on Free. Flagged for confirmation before ship.</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:800;width:62px;flex:none;padding-top:1px">FREE</span>
|
||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Book · fair — model leg locked.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">The hook: the honest de-vigged number, free. Model shows as a locked teaser that upsells the read.</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#00D4A0;font-weight:800;width:62px;flex:none;padding-top:1px">ANALYST</span>
|
||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Full triplet + VALUE marker.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">All three legs, the verdict fires both ways — value and no-edge. Quarantine renders as the primary two-leg state.</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:11px;background:#0E0E14;border:1px solid #1E1E2A">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#B8BCC8;font-weight:800;width:62px;flex:none;padding-top:1px">DESK</span>
|
||
<div style="min-width:0"><div style="font-size:11.5px;color:#F0F0F0;font-weight:600">Triplet + ledger cross-ref + calibration.</div><div style="font-size:10.5px;color:#707080;line-height:1.5;margin-top:3px">The price story wired to its resolved close and the confidence-bucket record behind the model leg.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;padding:13px 18px;border-radius:12px;background:#0E0E14;border:1px solid #1E1E2A;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#FFB347;font-weight:700">THE TRIPLET NEVER PRINTS A NUMBER IT CAN'T STAND BEHIND</span>
|
||
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">NO FABRICATED MODEL PRICE · NO HIDDEN "NO EDGE" · FAIR IS HONEST ON EVERY ROW</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"motion":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"},"reactions":{"editor":"boolean","default":true,"tsType":"boolean","section":"Behavior"}}">
|
||
class Component extends DCLogic {
|
||
renderVals() {
|
||
return {
|
||
rootRef: (n) => { this.rootNode = n; },
|
||
stillClass: (this.props.motion ?? true) ? '' : 'vy-still'
|
||
};
|
||
}
|
||
componentDidMount() {
|
||
this._t = [];
|
||
const tick = () => {
|
||
const s = new Date().toLocaleTimeString('en-US', { hour12: false });
|
||
document.querySelectorAll('[data-sync-clock]').forEach(el => el.textContent = s);
|
||
const wt = document.querySelector('[data-wire-time]');
|
||
if (wt) wt.textContent = s;
|
||
};
|
||
tick();
|
||
this._t.push(setInterval(tick, 1000));
|
||
const entries = [
|
||
'FD holds best number on Nabers o rec yds — 1,115.5 −112.',
|
||
'Market spread 10.0 across 7 books. Split logged as signal.',
|
||
'CLV update: beat close on 61% of settled reads (N 305).',
|
||
'Calibration holds — stated 70% bucket hitting 68.2%.',
|
||
'The Report Nº 128 out — 12,408 readers.'
|
||
];
|
||
let wi = 0;
|
||
this._t.push(setInterval(() => {
|
||
const el = document.querySelector('[data-wire]');
|
||
if (!el) return;
|
||
wi = (wi + 1) % entries.length;
|
||
el.textContent = entries[wi];
|
||
el.style.animation = 'none';
|
||
void el.offsetWidth;
|
||
el.style.animation = 'vy-wirein 6s ease both';
|
||
}, 6000));
|
||
const nudge = () => {
|
||
if (!(this.props.reactions ?? true)) return;
|
||
const cells = [...document.querySelectorAll('[data-react]')];
|
||
if (!cells.length) return;
|
||
const el = cells[Math.floor(Math.random() * cells.length)];
|
||
const f = el.getAttribute('data-fmt') || 'odds';
|
||
const raw = el.textContent;
|
||
const pct = raw.includes('%');
|
||
let v = parseFloat(raw.replace(/[^0-9.\-+]/g, ''));
|
||
if (isNaN(v)) return;
|
||
let up;
|
||
if (f === 'edge') { const d = (Math.random() - .45) * .2; up = d >= 0; v += d; el.textContent = (raw.startsWith('AVG') ? 'AVG CLV ' : '') + (v >= 0 ? '+' : '') + v.toFixed(1) + (pct ? '%' : ''); }
|
||
else { const d = Math.random() < .5 ? -2 : 2; up = d > 0; v += d; el.textContent = (v > 0 ? '+' : '') + Math.round(v); }
|
||
el.classList.remove('rx-up', 'rx-down');
|
||
void el.offsetWidth;
|
||
el.classList.add(up ? 'rx-up' : 'rx-down');
|
||
};
|
||
this._t.push(setTimeout(() => { this._t.push(setInterval(nudge, 6400)); }, 1800));
|
||
const secs = [...(this.rootNode || document).querySelectorAll('[data-reveal],[data-screen-label]')];
|
||
secs.forEach(s => { if (!s.hasAttribute('data-reveal')) s.setAttribute('data-reveal', ''); });
|
||
this._io = new IntersectionObserver(ents => {
|
||
ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vy-in'); this._io.unobserve(e.target); } });
|
||
}, { rootMargin: '0px 0px -8% 0px' });
|
||
secs.forEach(s => this._io.observe(s));
|
||
}
|
||
componentWillUnmount() {
|
||
(this._t || []).forEach(t => { clearInterval(t); clearTimeout(t); });
|
||
if (this._io) this._io.disconnect();
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|