/* Brand palette (founder, 2026-10-10, second pick): grape. Deep plum page, white panels with near-black ink, pink,
   lime as the hard shadow and the accent. The grape rules are the last block of this file. */
:root { --ink:#111014; --paper:#ffd9ea; --panel:#ffffff; --pink:#ff3d94; --fold:#d81b72; --mute:#4b4450; --line:rgba(17,16,20,.16); }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { font-family:Outfit, system-ui, sans-serif; background:var(--paper); color:var(--ink); overflow-x:hidden; }
[hidden] { display:none !important; }
.poster { min-height:min(100vh, 1000px); display:flex; flex-direction:column; }
.poster > .cols { flex:1; }

header { display:flex; align-items:center; gap:30px; padding:16px 34px; border-bottom:3px solid var(--ink); }
.logo { font-family:Anton; font-size:30px; letter-spacing:1px; display:flex; align-items:center; gap:10px; }
.logo img { width:44px; height:44px; image-rendering:pixelated; flex:none; margin:-8px 0; }
nav { display:flex; gap:24px; font-weight:600; font-size:15px; }
nav a { color:var(--mute); text-decoration:none; } nav a.on, nav a:hover { color:var(--ink); font-weight:800; }
header .mock { margin-left:auto; font-size:12px; color:var(--mute); text-align:right; }
.tg { font:inherit; font-weight:800; font-size:14px; background:var(--ink); color:#fff; border:0; border-radius:30px; padding:10px 18px; cursor:pointer; white-space:nowrap; }
.tg.off { background:#fff; color:var(--ink); border:2px solid var(--ink); cursor:default; }

.head { padding:14px 34px 0; }
h1 { font-family:Anton; font-weight:400; font-size:min(118px, 7.35vw); line-height:.92; letter-spacing:-1px; text-transform:uppercase; white-space:nowrap; }
/* the pink word: plain pink with the banner's hard near-black offset (a clipped fold texture rendered broken) */
h1 span { color:var(--pink); text-shadow:.05em .05em 0 var(--ink); padding-right:8px; }
h1 em { font-style:normal; -webkit-text-stroke:3px var(--ink); color:transparent; }

.cols { display:grid; grid-template-columns:400px 1fr 380px; gap:0; padding:0 34px; min-height:0; }

.left { padding:22px 26px 18px 0; display:flex; flex-direction:column; gap:14px; }
.left p.lede { font-size:17px; line-height:1.4; }
.card { border:3px solid var(--ink); border-radius:18px; padding:16px 18px; box-shadow:7px 7px 0 var(--ink); background:#fff; }
.card label { display:flex; justify-content:space-between; gap:10px; font-weight:800; font-size:15px; }
.card label b { color:var(--fold); text-align:right; }
input[type=range] { width:100%; margin:14px 0 6px; accent-color:var(--pink); height:8px; }
.ends { position:relative; height:16px; font-size:12px; color:var(--mute); }
.ends span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.ends span:first-child { transform:none; } .ends span:last-child { transform:translateX(-100%); }
.perk { margin-top:12px; display:grid; gap:6px; font-size:14px; }
.perk div { display:flex; gap:8px; align-items:baseline; }
.perk div::before { content:""; flex:0 0 9px; height:9px; border-radius:50%; background:#e3dfe6; }
.perk div.on::before { background:var(--pink); }
.perk div:not(.on) { color:#8d8794; }
.note { font-size:12.5px; color:var(--mute); line-height:1.4; }
.card .note { margin-top:10px; } .card .note:empty { display:none; }
.note a, .note button.link { color:var(--ink); font-weight:800; background:none; border:0; font:inherit; cursor:pointer; padding:0; text-decoration:underline; }
.wake { font:inherit; font-weight:800; font-size:17px; background:var(--pink); color:#fff; text-shadow:1.5px 1.5px 0 var(--ink); border:3px solid var(--ink); border-radius:14px; padding:13px; cursor:pointer; box-shadow:5px 5px 0 var(--ink); }
.wake:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.wake.in { background:#fff; color:var(--ink); text-shadow:none; }

.mid { position:relative; min-height:470px; }
.mid canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.iq { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); text-align:center; white-space:nowrap; }
.iq small { display:block; font-weight:800; font-size:13px; letter-spacing:.5px; }
.iq b { font-family:Anton; font-weight:400; font-size:96px; line-height:.95; display:block; }
.iq span { display:inline-block; background:var(--ink); color:#fff; font-weight:800; font-size:14px; padding:4px 12px; border-radius:20px; }
.net { position:absolute; right:6px; top:20px; width:160px; font-size:12px; color:var(--ink); line-height:1.35; text-align:right; }
.net b { display:block; font-family:Anton; font-weight:400; font-size:40px; color:var(--ink); line-height:1; }
.stamp { position:absolute; left:10px; top:26px; transform:rotate(-9deg); border:4px solid var(--ink); color:#fff; background:var(--pink); box-shadow:4px 4px 0 var(--ink); text-shadow:2px 2px 0 var(--ink); font-family:Anton; font-size:22px; padding:4px 12px; border-radius:8px; text-transform:uppercase; }

.right { padding:16px 0 14px 26px; display:flex; justify-content:center; }
.phone { width:330px; max-height:min(calc(100vh - 290px), 710px); min-height:480px; border:3px solid var(--ink); border-radius:34px; background:var(--ink); padding:9px; box-shadow:9px 9px 0 var(--pink); display:flex; }
.screen { flex:1; min-width:0; background:#fff0f6; border-radius:26px; overflow:hidden; display:flex; flex-direction:column; }
.chead { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border-bottom:2px solid var(--ink); font-weight:800; font-size:15px; }
.chead img { width:38px; height:38px; border-radius:50%; border:2px solid var(--ink); image-rendering:pixelated; flex:none; }
.chead small { display:block; font-weight:400; font-size:11px; color:var(--mute); }
.chat { flex:1; min-height:0; padding:12px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; scrollbar-width:thin; }
.chat > :first-child { margin-top:auto; }
.msg { max-width:92%; font-size:13.5px; line-height:1.38; padding:8px 11px; border-radius:14px 14px 14px 4px; background:#fff; border:1px solid var(--line); animation:in .35s ease-out; overflow-wrap:anywhere; }
.msg.me { align-self:flex-end; background:var(--ink); color:#fff; border:0; border-radius:14px 14px 4px 14px; }
.msg.alert { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--pink); }
.msg.wait { color:var(--mute); font-style:italic; }
.msg b { font-weight:800; } .msg a { color:var(--ink); font-weight:800; }
.msg .meta { display:block; margin-top:5px; font-size:10.5px; color:var(--mute); }
@keyframes in { from { opacity:0; transform:translateY(8px); } }
.ask { display:flex; gap:6px; padding:8px 10px; background:#fff; border-top:1px solid var(--line); }
.ask input { flex:1; min-width:0; font:inherit; font-size:13.5px; padding:8px 11px; border:2px solid var(--ink); border-radius:18px; outline:none; }
.ask input:focus { border-color:var(--pink); }
.ask button { font:inherit; font-weight:800; font-size:13.5px; background:var(--ink); color:#fff; border:2px solid var(--ink); border-radius:18px; padding:0 14px; cursor:pointer; }
.ask button:disabled { opacity:.5; cursor:default; }
.bill { background:#fff; border-top:1px solid var(--line); padding:9px 14px; font-size:11.5px; color:var(--mute); display:grid; grid-template-columns:1fr auto; gap:2px 8px; }
.bill b { color:var(--ink); } .bill em { font-style:normal; font-size:9.5px; border:1px solid var(--line); border-radius:8px; padding:0 5px; margin-left:3px; white-space:nowrap; }

footer { background:var(--ink); color:#fff; display:flex; align-items:center; border-top:3px solid var(--ink); overflow:hidden; white-space:nowrap; font-weight:600; font-size:15px; }
footer .lab { background:var(--pink); color:var(--ink); font-family:Anton; font-size:18px; padding:13px 18px; text-transform:uppercase; flex:none; z-index:1; }
.runwrap { overflow:hidden; flex:1; }
footer .run { display:inline-block; animation:run 60s linear infinite; padding-left:20px; }
footer .run span { margin-right:38px; } footer .run b { color:var(--pink); } footer .run i { font-style:normal; color:#fff; }
@keyframes run { to { transform:translateX(-50%); } }

main { padding:0 34px 40px; }
.sec { padding:44px 0 8px; border-bottom:3px solid var(--ink); padding-bottom:34px; }
.sec h2 { font-family:Anton; font-weight:400; font-size:54px; text-transform:uppercase; line-height:1; margin-bottom:10px; }
.sec h3 { font-weight:800; font-size:17px; margin-bottom:6px; } .sec h3 small { font-weight:600; color:var(--mute); font-size:13px; margin-left:6px; }
.sec h3.sub { margin-top:22px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:14px; }
.card.flat { box-shadow:5px 5px 0 var(--ink); }
.rows { display:grid; gap:0; margin-top:8px; font-size:14px; }
.row { display:flex; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.row .grow { flex:1; min-width:0; overflow-wrap:anywhere; }
.row .dim { color:var(--mute); font-size:12.5px; }
.row b.sym { font-weight:800; }
.row .num { font-family:Anton; font-size:24px; min-width:52px; }
.empty { color:var(--mute); font-size:14px; padding:8px 0; }
.mini { font:inherit; font-weight:800; font-size:12.5px; background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:16px; padding:4px 11px; cursor:pointer; white-space:nowrap; text-decoration:none; }
.mini.pink { background:var(--ink); color:#fff; }
.pill { font-size:10.5px; font-weight:800; border:1px solid var(--ink); color:var(--ink); background:#fff; border-radius:8px; padding:1px 6px; white-space:nowrap; }
.pill.ai { background:var(--ink); color:#fff; }
#debugBox { margin-top:12px; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:14px; }
.stat { border:3px solid var(--ink); border-radius:14px; padding:12px 14px; background:#fff; box-shadow:5px 5px 0 var(--ink); }
.panel { background:#fff; border:3px solid var(--ink); border-radius:14px; padding:6px 16px; box-shadow:5px 5px 0 var(--ink); }
.stat small { display:block; font-size:12.5px; color:var(--mute); font-weight:600; }
.stat b { font-family:Anton; font-weight:400; font-size:34px; line-height:1.1; display:block; }
.stat em { font-style:normal; font-size:10.5px; font-weight:800; color:#fff; background:var(--ink); border-radius:6px; padding:1px 6px; text-transform:uppercase; }
.steps { padding-left:20px; display:grid; gap:10px; font-size:15.5px; line-height:1.45; }
.tiers { width:100%; border-collapse:collapse; font-size:13.5px; }
.tiers th { text-align:left; font-size:11.5px; color:var(--mute); padding:6px 8px 6px 0; border-bottom:3px solid var(--ink); }
.tiers td { padding:8px 8px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tiers td:first-child { font-family:Anton; font-size:22px; }
.tiers + .note { margin-top:10px; }
.foot { font-size:12px; color:var(--mute); padding-top:20px; line-height:1.5; overflow-wrap:anywhere; }

@media (max-width:1180px) {
  .cols { grid-template-columns:340px 1fr 330px; }
  .phone { width:300px; }
  nav { display:none; }
}
@media (max-width:900px) {
  header { padding:12px 16px; gap:10px; flex-wrap:wrap; }
  .logo { font-size:24px; }
  header .mock { order:3; width:100%; margin:0; text-align:left; }
  .tg { margin-left:auto; padding:7px 12px; font-size:12px; }
  .head { padding:12px 16px 0; }
  h1 { white-space:normal; font-size:15.5vw; }
  h1 em { -webkit-text-stroke:2px var(--ink); }
  .poster { display:block; }
  .cols { display:flex; flex-direction:column; padding:0 16px; }
  .mid { order:1; min-height:400px; }
  .left { order:2; padding:8px 0 18px; }
  .right { order:3; padding:6px 0 26px; }
  .phone { width:100%; max-width:400px; max-height:none; height:600px; }
  .net { width:120px; top:6px; } .net b { font-size:32px; }
  .stamp { top:10px; left:0; font-size:17px; }
  .iq { bottom:6px; } .iq b { font-size:76px; }
  main { padding:0 16px 30px; }
  .sec h2 { font-size:40px; }
  .grid2 { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .tiers { font-size:12.5px; }
}

/* share card and fact lines (2026-10-10) */
.iq .sharebtn { display:block; margin:8px auto 0; }
dialog.share { margin:auto; border:3px solid var(--ink); border-radius:18px; padding:14px; background:var(--paper); box-shadow:9px 9px 0 var(--ink); max-width:min(92vw, 860px); }
dialog.share::backdrop { background:rgba(17,16,20,.55); }
dialog.share canvas { display:block; width:100%; height:auto; border-radius:10px; border:2px solid var(--ink); }
.sharerow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.sharerow .note { flex:1; min-width:180px; }
.msg details.facts { margin-top:6px; font-size:11.5px; color:var(--mute); }
.msg details.facts summary { cursor:pointer; font-weight:800; color:var(--ink); }
.msg details.facts div { padding:3px 0; border-top:1px dashed var(--line); }

/* ---------- grape theme (founder, 2026-10-10): deep plum page, white panels, pink, lime shadows ---------- */
:root { --paper:#2b0f2a; --on:#ffffff; --onmute:#d3bcd2; --lime:#c6f432; --hair:rgba(255,255,255,.24); }
body { color:var(--on); }
/* everything that sits on a white panel keeps near-black ink */
.card, .panel, .stat, .screen, .mini, .pill, .tg.off, .wake.in { color:var(--ink); }
header { border-bottom-color:var(--lime); }
nav a { color:var(--onmute); } nav a.on, nav a:hover { color:var(--on); }
header .mock { color:var(--onmute); }
.tg { background:var(--lime); color:var(--ink); }
.tg.off { background:transparent; color:var(--on); border-color:var(--on); }
h1 span { text-shadow:.05em .05em 0 var(--lime); }
h1 em { -webkit-text-stroke-color:var(--on); }
.note { color:var(--onmute); }
.note a, .note button.link { color:var(--on); }
.card .note, .panel .note { color:var(--mute); }
.card .note a, .card .note button.link, .panel .note a { color:var(--ink); }
.card, .card.flat, .stat, .panel { box-shadow:6px 6px 0 var(--lime); }
.wake { border-color:var(--on); box-shadow:5px 5px 0 var(--lime); }
.wake:active { box-shadow:2px 2px 0 var(--lime); }
.iq span { background:var(--lime); color:var(--ink); }
.net, .net b { color:var(--on); }
.stamp { border-color:var(--on); box-shadow:4px 4px 0 var(--lime); }
.phone { border-color:var(--on); }
footer { border-top-color:var(--lime); }
footer .run i { color:var(--lime); }
.sec { border-bottom-color:var(--hair); }
.sec > h3 small, .sec > .note, .foot { color:var(--onmute); }
dialog.share { border-color:var(--on); box-shadow:9px 9px 0 var(--lime); color:var(--on); }
dialog.share canvas { border-color:var(--on); }
@media (max-width:900px) { h1 em { -webkit-text-stroke:2px var(--on); } }

/* launch bar (live mode) and the phone layout of the brain block (2026-10-11) */
.cabar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 34px; background:var(--ink); color:#fff; border-bottom:3px solid var(--lime); font-size:14px; }
.cabar .calab { font-family:Anton; font-size:18px; color:var(--lime); }
.cabar code { font-family:ui-monospace, Consolas, monospace; font-size:13.5px; overflow-wrap:anywhere; user-select:all; }
.cabar .castat { margin-left:auto; color:var(--onmute); font-size:12.5px; }
@media (max-width:900px) {
  .cabar { padding:8px 16px; } .cabar .castat { margin-left:0; width:100%; }
  .mid { min-height:0; display:flex; flex-direction:column; }
  .mid canvas { position:relative; inset:auto; height:330px; flex:none; }
  .iq { position:static; transform:none; padding:0 0 12px; }
}

/* sign-in made obvious (2026-10-11): header button, three steps, demo bar in the phone */
.tg.sign { background:var(--pink); color:#fff; border:2px solid var(--on); text-shadow:1px 1px 0 var(--ink); }
.tg.sign.in { background:transparent; color:var(--on); text-shadow:none; cursor:default; }
.how3 { list-style:none; counter-reset:s; display:grid; gap:8px; padding:0; margin:0; }
.how3 li { counter-increment:s; display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-items:start; font-size:13.5px; line-height:1.35; color:var(--onmute); }
.how3 li::before { content:counter(s); grid-row:1 / 4; width:28px; height:28px; border-radius:50%; border:2px solid var(--onmute); display:grid; place-items:center; font-weight:800; font-size:14px; color:var(--onmute); }
.how3 li b { color:var(--on); font-size:15px; font-weight:800; }
.how3 li.now::before { background:var(--pink); border-color:var(--on); color:#fff; }
.how3 li.now b { color:var(--lime); }
.how3 li.done::before { content:"\2713"; background:var(--lime); border-color:var(--lime); color:var(--ink); }
.how3 li .mini { grid-column:2; justify-self:start; margin-top:6px; }
.demobar { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; }
.demobar span { flex:1; }

/* Telegram row under the three steps (2026-10-11) */
.tgrow { display:flex; gap:10px; align-items:center; border:2px solid var(--hair); border-radius:12px; padding:10px 12px; font-size:13.5px; line-height:1.35; color:var(--onmute); }
.tgrow .grow { flex:1; min-width:0; } .tgrow b { color:var(--on); }

/* the payout clock (2026-10-11) */
.pay { display:flex; gap:14px; align-items:center; background:var(--lime); color:var(--ink); border:3px solid var(--on); border-radius:16px; padding:12px 14px; box-shadow:5px 5px 0 var(--pink); }
.payclock { text-align:center; flex:none; } .payclock small { display:block; font-size:11.5px; font-weight:800; }
.payclock b { font-family:Anton; font-weight:400; font-size:40px; line-height:1; }
.paytext { font-size:13.5px; line-height:1.35; } .paytext b { display:block; font-size:14.5px; font-weight:800; }
.paytext em { display:block; font-style:normal; font-size:11.5px; font-weight:800; margin-top:3px; }

/* header: the X link and the CA button look like the other header pills */
a.tg { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#hdrCa:disabled { opacity: .6; cursor: default; }
#hdrCa:not(:disabled) { font-variant-numeric: tabular-nums; }

/* the AI bill section, its menu link and the small fees box under the chat are off the site (founder, 2026-10-11) */
#bill, nav a[href="#bill"], .bill { display: none !important; }