/* Strand — its own identity, deliberately OFF /assets/site.css.
   The rest of slightlydistracted.dev is a personal site: emerald on paper, Big Shoulders +
   Schibsted Grotesk. Strand is a product and reads as one, so it gets its own sheet.

   Single-theme dark, on purpose: this is a product page with a committed visual world, not
   a document that should follow the reader's OS. There is no theme toggle here and
   /assets/theme.js is deliberately NOT loaded — a toggle that did nothing would be worse
   than none. Every colour is painted explicitly for that reason.

   Type: Chakra Petch (display) / IBM Plex Sans (body) / Share Tech Mono (utility), with
   Bangers on the wordmark, the CTA and the founders' first names — the three loudest
   moments and nowhere else. Spend the boldness in one place. */

:root{
  --ground:#0C0E14;
  --deep:#090B11;
  --panel:rgba(233,237,245,.028);
  --ink:#E9EDF5;
  --dim:#8892A6;
  --faint:#5D6675;
  --edge:rgba(233,237,245,.15);
  --accent:#E02B44;
  --accent-hi:#FF5468;   /* small text on the dark ground needs the brighter red */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:58rem;margin:0 auto;width:100%}

a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent-hi);outline-offset:3px;
}

/* ─── nav ─── */
.nav{border-bottom:1px solid var(--edge);background:var(--deep)}
.nav .wrap{
  display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  padding:.85rem 1.5rem;
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.nav a{color:var(--dim);text-decoration:none;transition:color .14s ease}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent-hi)}
.nav .sd{
  font-family:"Chakra Petch",sans-serif;font-weight:700;
  letter-spacing:.06em;color:var(--ink);
}

/* ─── hero ─── */
.hero{padding:2.8rem 1.5rem 2.2rem}
.eyebrow{
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-hi);margin:0;
}
.eyebrow a{
  color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,84,104,.45);
}
.eyebrow a:hover{text-decoration-color:var(--accent-hi)}

.mark{
  font-family:Bangers,"Comic Sans MS",cursive;
  font-size:clamp(3.6rem,14vw,7.5rem);
  line-height:.82;letter-spacing:.035em;text-transform:uppercase;
  margin:.5rem 0 0;color:var(--ink);
  position:relative;padding-bottom:.1em;
  text-shadow:5px 5px 0 var(--accent);
}
.mark::after{
  content:"";position:absolute;left:.04em;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--accent) 0 38%,rgba(224,43,68,0));
}

h1{
  font-family:"Chakra Petch",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.2rem,3.4vw,1.85rem);line-height:1.12;
  text-wrap:balance;max-width:20ch;margin:1.3rem 0 0;
}
.lede{font-size:1rem;line-height:1.62;color:var(--dim);max-width:56ch;margin:.9rem 0 0}
.lede b{color:var(--ink);font-weight:500}

/* ─── the board ─── */
.board{
  position:relative;display:grid;gap:.9rem;
  padding:1.9rem 1.5rem 2.2rem 2.8rem;
}
.board::before{
  content:"";position:absolute;left:1.65rem;top:2.1rem;bottom:3.2rem;width:1px;
  background:linear-gradient(var(--accent),rgba(224,43,68,.15));
}
.demo{
  position:absolute;top:.15rem;left:2.8rem;
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ground);background:var(--accent);padding:.2rem .5rem;
  clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 6px) 100%,0 100%);
}
.row{
  position:relative;border:1px solid var(--edge);border-left:2px solid var(--accent);
  background:var(--panel);padding:.95rem 1.1rem;
}
.row.stalled{border-left-color:var(--dim)}
.row::before{
  content:"";position:absolute;left:-1.17rem;top:1.25rem;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--ground);
}
.row.stalled::before{background:var(--dim)}
.meta{
  display:flex;gap:.75rem;flex-wrap:wrap;align-items:baseline;
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.meta .who{color:var(--ink)}
.meta .age{margin-left:auto;font-variant-numeric:tabular-nums}
.meta .age.hot{color:var(--accent-hi)}
.row h2{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:1.0625rem;
  letter-spacing:.005em;margin:.45rem 0 0;
}
.said{font-size:.9375rem;line-height:1.55;color:var(--dim);margin:.3rem 0 0;max-width:60ch}
.said em{font-style:normal;color:var(--ink)}
.said .flag{color:var(--accent-hi)}

/* ─── the three questions ─── */
.objections{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--edge);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.objections > div{background:var(--ground);padding:1.6rem 1.4rem}
.objections .q{
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hi);margin:0 0 .6rem;
}
.objections h3{
  font-family:"Chakra Petch",sans-serif;font-weight:600;text-transform:uppercase;
  font-size:1.05rem;line-height:1.2;letter-spacing:.01em;margin:0;text-wrap:balance;
}
.objections p{font-size:.9375rem;line-height:1.55;color:var(--dim);margin:.6rem 0 0}
.objections p b{color:var(--ink);font-weight:500}

/* ─── proof ─── */
.proof{
  display:flex;gap:.5rem 1.3rem;flex-wrap:wrap;
  padding:1.1rem 1.5rem;border-bottom:1px solid var(--edge);
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.proof b{color:var(--ink);font-weight:400}

/* ─── the ask ─── */
.cta{
  margin:2rem 1.5rem;padding:1.5rem;
  border:1px solid var(--edge);background:var(--panel);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:center;
}
.cta p{margin:0 0 1rem;font-size:1rem;line-height:1.55;color:var(--dim);max-width:42ch}
.cta p b{color:var(--ink);font-weight:500}
.cta form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;margin:0}
.cta input[type=email]{
  flex:1 1 13rem;min-width:0;font:inherit;font-size:.9375rem;
  color:var(--ink);background:var(--deep);border:1px solid var(--edge);
  padding:.7rem .8rem;border-radius:0;
}
.cta input[type=email]::placeholder{color:var(--faint)}
.cta button{
  font-family:Bangers,"Comic Sans MS",cursive;
  font-size:1.35rem;letter-spacing:.09em;line-height:1;
  text-transform:uppercase;background:var(--accent);color:#FFF;
  padding:.55rem 1.3rem .45rem;border:0;cursor:pointer;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 10px) 100%,0 100%);
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.cta button:hover{background:var(--accent-hi)}
.honey{position:absolute;left:-9999px}

/* The code keeps a white quiet zone even though the page is dark — a camera needs it. */
.qr{text-align:center}
.qr .tile{background:#FFF;padding:.7rem;display:inline-block;line-height:0}
.qr .tile img{display:block;width:8.5rem;height:8.5rem}
.qr .cap{
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:.6rem 0 0;
}

/* ─── footer ─── */
.foot{
  padding:1.1rem 1.5rem 2.4rem;
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;
  align-items:center;
}
.founders{color:var(--ink);font-size:.8125rem;line-height:1.9}
.founders b{
  font-family:Bangers,"Comic Sans MS",cursive;font-weight:400;
  font-size:2.1em;letter-spacing:.045em;color:var(--ink);
  text-shadow:2px 2px 0 var(--accent);
  margin-right:.42em;vertical-align:-.08em;
}

/* ─── the QR page and the thank-you page ─── */
.solo{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:3rem 1.5rem;
}
.solo .mark::after{display:none}
.solo .say{font-size:1rem;line-height:1.55;color:var(--dim);max-width:38ch;margin:1.1rem 0 0}
.solo .say b{color:var(--ink);font-weight:500}
.solo .tile{background:#FFF;padding:.9rem;display:inline-block;line-height:0;margin:1.8rem 0 0}
.solo .tile img{display:block;width:13rem;height:13rem}
.solo .url{
  font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;
  font-size:.8125rem;letter-spacing:.06em;color:var(--accent-hi);margin:1rem 0 0;
}
.solo .links{margin:1.6rem 0 0;font-size:.9375rem;color:var(--dim)}
.solo .links a{color:var(--accent-hi)}
.solo .sig{margin:1.8rem 0 0}

@media (max-width:38rem){
  .cta{grid-template-columns:minmax(0,1fr)}
  .board{padding-left:2.4rem;padding-right:1.1rem}
  .board::before{left:1.25rem}
  .demo{left:2.4rem}
  .hero,.nav .wrap,.proof,.foot{padding-left:1.1rem;padding-right:1.1rem}
  .objections > div{padding:1.3rem 1.1rem}
  .cta{margin-left:1.1rem;margin-right:1.1rem}
}

/* the standalone join page — the QR's destination, so it is a field and a button */
.solo .join{
  display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  margin:1.8rem 0 0;width:100%;max-width:26rem;
}
.solo .join input[type=email]{
  flex:1 1 13rem;min-width:0;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--deep);border:1px solid var(--edge);
  padding:.8rem .85rem;border-radius:0;text-align:center;
}
.solo .join input[type=email]::placeholder{color:var(--faint)}
.solo .join button{
  font-family:Bangers,"Comic Sans MS",cursive;
  font-size:1.45rem;letter-spacing:.09em;line-height:1;
  text-transform:uppercase;background:var(--accent);color:#FFF;
  padding:.6rem 1.4rem .5rem;border:0;cursor:pointer;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 10px) 100%,0 100%);
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.solo .join button:hover{background:var(--accent-hi)}