/* kontract.fun — the landing page at the apex host. Deliberately NOT styles.css: this page ships to people who have
 * never seen the product and must not pull the app's stylesheet to say one thing. Same ground, same faces and the
 * same hairline headings and floating panes as the app, so the jump to app.kontract.fun is seamless; the display
 * face (Archivo Black) is the one the films use for their headlines.
 *
 * The page (owner 2026-10-01): one line, the film, ONE big button to the app, then the pitch said briefly.
 */
:root{
  --bg:#08070c; --pane:rgba(15,14,21,.84); --sunk:#09080d;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16); --line3:rgba(255,255,255,.28);
  --ink:#f4f3f8; --ink2:#aba7ba; --dim:#7d7992; --faint:#55516a;
  --paper:#f4f3f8; --paper-ink:#0b0a10;
  --green:#14f195; --violet:#9945ff;
  --head:"Archivo Black","Geist",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
/* the app's ground: the hex-dot lattice ground.js draws, fixed behind everything */
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.top,main{position:relative;z-index:1}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1128px;margin:0 auto;padding-inline:24px}
.grow{flex:1 1 auto;min-width:0}
.nb{white-space:nowrap}

/* ── top bar ───────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(8,7,12,.78);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font:800 19px var(--sans);letter-spacing:-.045em;white-space:nowrap}
.brand i{font-style:normal;color:var(--faint)}
.mark{width:27px;height:27px;flex:none;border-radius:8px;background:var(--paper);display:grid;place-items:center}
.mark svg{display:block;width:19px;height:19px}
.xlink{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--dim);transition:color .15s,background .15s}
.xlink:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line2);background:none;
  color:var(--ink);padding:10px 17px;border-radius:11px;font:600 14.5px var(--sans);white-space:nowrap;
  transition:background .15s,border-color .15s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--paper);border-color:var(--paper);color:var(--paper-ink)}
.btn.pri:hover{background:#fff;border-color:#fff}
.btn.sm{padding:8px 15px;font-size:14px;border-radius:99px}

/* ── the hero ──────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(22px,4.2vh,46px) clamp(34px,5vw,60px);text-align:center}
.hero h1{font:400 clamp(31px,5.3vw,66px)/1.03 var(--head);letter-spacing:-.028em;text-wrap:balance}
.hero h1 b{font-weight:400;color:var(--green);text-shadow:0 0 34px rgba(20,241,149,.42)}

/* The film. Its width is whichever is smallest of the column, 1080px and what leaves the button on the first
   screen, so on a laptop nobody has to scroll to find the way in. */
.film{position:relative;margin:clamp(18px,3vh,30px) auto 0;aspect-ratio:16/9;
  width:min(100%,1080px,max(520px,calc((100svh - 318px) * 1.7778)));
  border-radius:22px;border:1px solid var(--line2);background:#08070c url("/static/landing/based-wide.jpg") center/cover no-repeat;
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 6px rgba(255,255,255,.022)}
/* paint, not a drop shadow: the brand run bleeding out from under the frame */
.film::before{content:"";position:absolute;inset:auto 6% -34px 6%;height:120px;z-index:-1;border-radius:50%;filter:blur(46px);opacity:.5;
  background:linear-gradient(90deg,#9945ff,#3aa0ff 38%,#14f195 70%,#ffe14d)}
.film video{display:block;width:100%;height:100%;object-fit:cover;border-radius:21px;cursor:pointer}
.film .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;
  display:grid;place-items:center;background:rgba(244,243,248,.94);color:var(--paper-ink);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.film .play[hidden]{display:none}
.film .play svg{margin-left:3px}

/* the one big button. Positioned, like everything under the film: the film is positioned for its glow, so its
   drop shadow would otherwise be painted OVER the unpositioned things below it and grey the button. */
.hero .go,.hero .fine,.hero .venues{position:relative}
.go{display:inline-flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(20px,3.2vh,30px);min-width:min(100%,340px);
  padding:21px 40px;border-radius:18px;background:var(--paper);color:var(--paper-ink);font:700 21px/1 var(--sans);letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 18px 50px rgba(20,241,149,.16),0 6px 22px rgba(153,69,255,.22);
  transition:transform .14s,box-shadow .2s,background .15s}
.go svg{transition:transform .18s}
.go:hover{background:#fff;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 24px 64px rgba(20,241,149,.26),0 8px 28px rgba(153,69,255,.32)}
.go:hover svg{transform:translateX(5px)}
.go:active{transform:translateY(1px)}
.fine{margin-top:16px;font-size:14px;color:var(--dim)}
.venues{display:flex;align-items:center;justify-content:center;gap:8px 20px;flex-wrap:wrap;margin-top:18px;font-size:14.5px;color:var(--dim)}
.venues b{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink2)}
.venues img,.where img{width:20px;height:20px;border-radius:6px;object-fit:cover;flex:none;background:#fff}

/* ── sections: a hairline heading, then panes that float over the ground ───── */
section{padding-block:clamp(26px,4vw,44px)}
.hair{font:600 15px/1.2 var(--sans);letter-spacing:-.01em;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:22px}
.pane,.card,.addrs li,.prices{background:var(--pane);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lede{color:var(--ink2);font-size:17px;line-height:1.55;max-width:50ch}

.pitch{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center}
.big{font:400 clamp(29px,3.9vw,48px)/1.06 var(--head);letter-spacing:-.025em;text-wrap:balance}
.pitch .lede{margin-top:18px}
.addrs{display:grid;gap:10px}
.addrs li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px}
.where{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);white-space:nowrap}
.where img{width:18px;height:18px;border-radius:5px}
.addrs code{font:600 clamp(15px,1.7vw,19px)/1 var(--mono);letter-spacing:-.02em;color:var(--faint);white-space:nowrap}
.addrs code b{color:var(--green);font-weight:700;text-shadow:0 0 16px rgba(20,241,149,.5)}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{padding:20px 20px 22px}
.card h3{font:700 16.5px/1.25 var(--sans);letter-spacing:-.02em}
.card p{margin-top:9px;font-size:14.5px;line-height:1.5;color:var(--ink2)}

.prices{overflow:hidden}
.prow{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,2fr);gap:18px;align-items:center;padding:18px 22px}
.prow + .prow{border-top:1px solid var(--line)}
.prow .chain{display:grid;gap:3px;font-size:13.5px;color:var(--dim)}
.prow .chain b{font:700 16.5px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.prow ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.prow li{display:grid;gap:5px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.prow li span{font:500 12px/1 var(--mono);color:var(--dim);white-space:nowrap}
.prow li span::after{content:" chars";color:var(--faint)}
.prow li b{font:700 19px/1 var(--sans);letter-spacing:-.03em}
.note{margin-top:14px;font-size:14px;color:var(--dim);max-width:76ch}

.closer{text-align:center;padding-block:clamp(48px,8vw,96px) clamp(56px,9vw,110px)}
.closer h2{font:400 clamp(31px,5.2vw,62px)/1.04 var(--head);letter-spacing:-.028em;text-wrap:balance}
.closer .go{margin-top:clamp(24px,3.5vw,36px)}

.foot{border-top:1px solid var(--line);padding-block:24px;color:var(--dim);font-size:13.5px}
.foot .wrap{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}

/* ── narrower ──────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pitch{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;gap:12px}
}
/* the phone: the square cut of the film, the button as wide as the column */
@media (max-width:700px){
  .wrap{padding-inline:16px}
  .top .wrap{height:56px}
  .brand{font-size:17.5px}
  .film{aspect-ratio:1/1;width:100%;border-radius:18px;background-image:url("/static/landing/based-square.jpg")}
  .film video{border-radius:17px}
  .go{width:100%;padding:20px 24px;font-size:20px}
  .fine{font-size:13px}
  .venues{gap:8px 14px;font-size:13.5px}
  .venues span{flex-basis:100%}
  .cards{grid-template-columns:1fr}
  .addrs li{padding:13px 14px}
  .prow{padding:16px 14px}
  .prow ul{gap:6px}
  .prow li{padding:10px 8px}
  .prow li span::after{content:""}
  .prow li b{font-size:16.5px}
  .foot .grow{flex-basis:100%;height:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .go,.go svg{transition:none}
}