/* =========================================================================
   The front door: the signed out landing page, the product list, and the
   one-per-product detail pages.

   TOKENS ONLY. Not one raw colour below. Everything comes from the :root block
   in app.css, which is why these pages already work in dark mode without a
   single extra rule and why re-skinning the line never has to touch this file.

   These pages are the only ones a person sees before they have an account, so
   they deliberately do NOT load the app shell. No sidebar, no session, no
   module scripts - just a document.
   ========================================================================= */

.lwrap{max-width:1080px;margin:0 auto;padding:0 var(--s5);}
.lnarrow{max-width:760px;}

/* ---------------------------------------------------------------- top bar */

.lnav{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.lnav .lwrap{
  display:flex;align-items:center;gap:var(--s5);
  min-height:64px;
}
.lnav .brand{
  display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;
  margin-right:auto;
}
.lnav .brand .logo{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--brand);color:var(--ink-inv);
  font-weight:700;font-size:15px;
}
.lnav .lnavlinks{display:flex;align-items:center;gap:var(--s5);}
.lnav .lnavlinks a{
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
}
.lnav .lnavlinks a:hover{color:var(--ink);}
.lnav .lnavlinks a.btn{color:var(--ink);}

/* On a phone the secondary links drop away and Sign in stays, because that is
   the one thing somebody arriving on a small screen is actually looking for. */
@media (max-width:640px){
  .lnav .lnavlinks a:not(.btn){display:none;}
  .lwrap{padding:0 var(--s4);}
}

/* ------------------------------------------------------------------- hero */

.hero{padding:var(--s7) 0 var(--s7);}
.hero h1{
  font-size:clamp(34px,6vw,58px);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:800;
  margin:0 0 var(--s5);
  color:var(--ink);
  max-width:15ch;
}
.hero .lede{
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.62;
  color:var(--ink-2);
  max-width:58ch;
  margin:0 0 var(--s4);
}
.hero .lede.tight{margin-bottom:var(--s5);}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0 var(--s3);}
.fineprint{font-size:13px;color:var(--ink-3);margin:0;}

.btn.lg{padding:12px 20px;font-size:15px;}
.btn.ghost{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3);}

/* ----------------------------------------------------------------- bands */

.band{
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.lsec{padding:var(--s7) 0;}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s5);
}

/* -------------------------------------------------------- product cards */

/* The whole card is the link. A card that only responds on its title makes
   people click three times to find the hit area. */
.pcard{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  margin:0 0 var(--s4);
  box-shadow:var(--shadow);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.pcard:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-lift);
  transform:translateY(-1px);
}
.pcard h3{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin:0 0 var(--s3);font-size:20px;font-weight:700;color:var(--ink);
}
.pcard .say{
  margin:0 0 var(--s3);font-weight:600;color:var(--ink);font-size:15px;
}
.pcard p.body{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;}
.pcard .more{
  display:inline-block;margin-top:var(--s4);
  color:var(--brand);font-weight:600;font-size:14px;
}

.pgrid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.pgrid .pcard{margin:0;}
.pgrid .pcard h3{font-size:17px;}

/* Being-built cards read as quieter than shipped ones, without going grey
   enough to look broken or disabled. */
.pcard.soon{background:var(--surface-2);}
.pcard.soon h3{color:var(--ink-2);}

/* ------------------------------------------------------------ detail page */

.detail{padding:var(--s6) 0 var(--s7);}
.backlink{
  display:inline-block;margin-bottom:var(--s5);
  color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;
}
.backlink:hover{color:var(--ink);}
.detail h1{
  font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 var(--s4);font-weight:800;
}
.detail .lede{
  font-size:17px;line-height:1.65;color:var(--ink-2);
  margin:0 0 var(--s6);max-width:62ch;
}
.detail h2{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--s6) 0 var(--s4);
}
.dlist{list-style:none;padding:0;margin:0;max-width:64ch;}
.dlist li{
  position:relative;padding:0 0 var(--s4) var(--s5);
  color:var(--ink-2);font-size:15px;line-height:1.62;
}
.dlist li:before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}
.dlist li b{color:var(--ink);font-weight:600;}

/* ----------------------------------------------------------------- footer */

.lfoot{
  border-top:1px solid var(--line);
  padding:var(--s6) 0;
  color:var(--ink-3);font-size:13px;
}
.lfoot a{color:var(--ink-2);text-decoration:none;margin-right:var(--s5);}
.lfoot a:hover{color:var(--ink);}
.lfoot .lwrap{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;}
.lfoot .spacer{margin-left:auto;}