/* LineType's own look: charcoal, cream ink, one orange; Helvetica for words, mono for labels */
:root{ --bg:#131312; --panel:#1d1d1c; --ink:#eae9e4; --muted:#8a8a83; --line:#343433; --accent:#ff5111; }
@media (prefers-color-scheme: light){ :root{ --bg:#efe7d7; --panel:#f7f2e7; --ink:#2b2621; --muted:#6b6151; --line:#ddd2bd; --accent:#e5480f; } }
*{box-sizing:border-box;}
html,body{margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased;}
a{color:var(--accent);}
.wrap{max-width:1040px; margin:0 auto; padding:28px 20px 60px;}
header{display:flex; align-items:center; justify-content:space-between; padding:6px 0 30px;}
.mark{height:38px; width:auto; fill:var(--ink); display:block;}
nav{display:flex; gap:18px; font:600 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.12em; text-transform:uppercase;}
nav a{color:var(--muted); text-decoration:none;} nav a:hover, nav a.on{color:var(--ink);}
h1{font-size:clamp(38px, 7vw, 64px); line-height:1.02; text-wrap:balance; letter-spacing:-.025em; margin:10px 0 14px;}
h1 em{font-style:normal; color:var(--accent);}
h2{font-size:24px; letter-spacing:-.01em; margin:36px 0 8px;}
h3{font-size:17px; margin:22px 0 4px;}
.lede{font-size:20px; color:var(--muted); max-width:640px; margin:0 0 22px;}
.tag{text-wrap:balance; font:600 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font:700 13px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; padding:13px 20px; border-radius:10px;}
.cta{margin:30px 0 10px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;} .cta b{color:var(--ink);}
.btn.soon{background:var(--panel); color:var(--muted); border:1px solid var(--line);}
.doc p, .doc li{max-width:680px;} .doc li{margin:4px 0;}
footer{margin-top:50px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; gap:18px; flex-wrap:wrap;}
footer a{color:var(--muted);}
/* home: a dark band edge to edge (dark in light mode too: the clips are), the clip as wide as the screen, then rows that alternate */
.band{--bg:#131312; --panel:#1d1d1c; --ink:#eae9e4; --muted:#8a8a83; --line:#343433; --accent:#ff5111; background:var(--bg); color:var(--ink);}
.band .wrap{padding-bottom:0;}
.hero-copy{max-width:1040px; margin:0 auto; padding:0 20px 10px;}
@media (min-width:1000px){   /* wide: the words on the left, the clip running off the right edge */
  .hero{display:grid; grid-template-columns:minmax(380px, 36%) minmax(0, 1fr); align-items:center; padding:0 0 40px max(20px, calc((100vw - 1040px) / 2));}
  .hero-copy{margin:0; padding:0;} .hero .hero-vid{max-width:none;}
}
.hero-vid{display:block; width:100%; max-width:1600px; aspect-ratio:16/9; margin:0 auto; background:var(--bg);}
.feat{display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 1fr); gap:64px; align-items:center; margin:64px 0;}
.feat.flip{grid-template-columns:minmax(0, 1fr) minmax(0, 260px);} .feat.flip > :first-child{order:2;}
.feat video, .feat img{width:100%; display:block; border-radius:14px; background:#131312;}
.feat b{display:block; font-size:30px; line-height:1.1; letter-spacing:-.015em; margin-bottom:10px;} .feat span{display:block; color:var(--muted); font-size:19px; max-width:460px;}
@media (max-width:700px){
  .hero-vid{aspect-ratio:9/16;}
  .feat, .feat.flip{grid-template-columns:1fr; gap:18px; margin:44px 0;} .feat.flip > :first-child{order:0;}
  .feat video, .feat img{max-width:260px; margin:0 auto;} .feat b{font-size:24px;}
}