@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{--ink:#000;--grey:#5c5c5c;--rule:#000;--hair:#cfcfcf;--hl:#FFE14D;--pad:clamp(18px,4vw,48px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.55 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0 14px;border-bottom:1px solid var(--rule);font:14px/1.3 "JetBrains Mono",monospace}
.top b{font-weight:600}
.top nav{display:flex;gap:22px}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;padding:44px 0 40px;align-items:end}
.hero h1{margin:0;font-size:clamp(64px,10.5vw,148px);line-height:.88;letter-spacing:-.02em}
.hero .side{font:15px/1.6 "JetBrains Mono",monospace;max-width:440px}
.hero .side p{margin:0 0 18px}
.buyrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.price{font:400 44px/1 "Instrument Serif",serif}
.btn{display:inline-block;background:#000;color:#fff;text-decoration:none;font:600 15px/1 "JetBrains Mono",monospace;padding:15px 22px;border-radius:3px}
.btn:hover{background:#2b2b2b}
.small{font:15px/1.5 "Instrument Sans",sans-serif;color:var(--grey)}

/* section heads */
section{border-top:1px solid var(--rule);padding:22px 0 56px}
.sh{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;margin-bottom:28px}
.sh h2{margin:0;font:400 clamp(38px,5vw,60px)/1 "Instrument Serif",serif;letter-spacing:-.01em}
.sh p{margin:6px 0 0;font:15px/1.6 "JetBrains Mono",monospace;color:#222;max-width:440px}

/* ledger + player */
.cast{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.ledger{width:100%;border-collapse:collapse;font:14px/1.45 "JetBrains Mono",monospace}
.ledger th{font-weight:600;text-align:left;border-bottom:1.5px solid #000;padding:6px 12px 6px 0}
.ledger td{border-bottom:1px solid var(--hair);padding:14px 12px 14px 0;vertical-align:top}
.ledger tr[data-clip]{cursor:pointer}
.ledger tr[data-clip]:hover td{background:#f4f4f4}
.ledger tr.on td{background:var(--hl)}
.ledger tr.on:hover td{background:var(--hl)}
.ledger td:first-child{padding-left:8px;white-space:nowrap}
.ledger .q{color:var(--grey)}
.ledger .what{display:block;margin-top:4px;color:#000;font:15px/1.45 "Instrument Sans",sans-serif}
.ledger .len{text-align:right;white-space:nowrap}
.player{margin:0}
.player video{display:block;width:100%;aspect-ratio:9/16;background:#eee;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.14);object-fit:cover}
.player figcaption{font:14px/1.4 "JetBrains Mono",monospace;color:var(--grey);margin-top:10px}
.note{font-size:14px;color:var(--grey);margin-top:18px;max-width:640px}

/* csv */
.csv{width:100%;border-collapse:collapse;font:14px/1.45 "JetBrains Mono",monospace}
.csv th{text-align:left;font-weight:600;border-bottom:1.5px solid #000;padding:6px 14px 6px 0}
.csv td{border-bottom:1px solid var(--hair);padding:9px 14px 9px 0;vertical-align:top}
.csv td.k{color:var(--grey);width:130px}
.term{margin-top:22px;font:14px/1.6 "JetBrains Mono",monospace;overflow-x:auto;white-space:pre}

/* lists with hairlines */
.rows{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.rows li{break-inside:avoid;border-top:1px solid var(--hair);padding:12px 0 14px}
.rows li b{font-weight:600}

/* pricing */
.pricebox{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.pricebox .big{font:400 clamp(72px,11vw,150px)/.85 "Instrument Serif",serif;letter-spacing:-.02em}
.pricebox ul{margin:0 0 22px;padding-left:18px}
.pricebox li{margin:4px 0}

/* faq */
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 "JetBrains Mono",monospace}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 18px;max-width:760px}
.faq .a p{margin:0 0 10px}
.faq code,.legal code{font:14px "JetBrains Mono",monospace;background:#f2f2f2;padding:1px 5px;border-radius:3px}

/* footer */
footer{border-top:1px solid var(--rule);padding:22px 0 40px;font:14px/1.7 "JetBrains Mono",monospace;display:grid;grid-template-columns:1fr auto;gap:20px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer .fine{color:var(--grey);grid-column:1/-1;max-width:780px;font:14px/1.6 "Instrument Sans",sans-serif}

/* legal pages */
.legal{max-width:760px;padding:48px 0 64px}
.legal h1{font:400 clamp(48px,7vw,84px)/.95 "Instrument Serif",serif;margin:0 0 10px;letter-spacing:-.01em}
.legal .upd{font:14px "JetBrains Mono",monospace;color:var(--grey);margin:0 0 36px}
.legal h2{font:600 19px/1.3 "Instrument Sans",sans-serif;margin:34px 0 8px;padding-top:14px;border-top:1px solid var(--hair)}
.legal p,.legal li{max-width:700px}
.legal ul{padding-left:20px}

@media (max-width:820px){
  body{font-size:16px}
  .top nav{gap:14px}
  .top nav .hide-s{display:none}
  .hero,.sh,.pricebox{grid-template-columns:1fr;gap:22px}
  .hero{padding:34px 0 36px}
  .cast{grid-template-columns:1fr;gap:24px}
  .player{order:-1;max-width:300px;margin:0 auto;width:78%}
  .ledger th:nth-child(3),.ledger td.len{display:none}
  .rows{columns:1}
  .csv td.k{width:96px}
  .csv{font-size:12.5px}
  footer{grid-template-columns:1fr}
}