/*
  Shared styling for the signed-out marketing surfaces: landing.html and the
  generated /blog pages. Linked (not inlined) so there is ONE source of truth -
  the app's own src/ui/styles.css is hashed by Vite and cannot be linked from
  public/, so these tokens are still a copy of its :root block, but only one
  copy now instead of one per page.

  Deliberately LIGHT ONLY - no prefers-color-scheme block. Marketing pages
  render the same for every visitor; the app keeps its own dark/light toggle.
*/
:root{
  --bg:#F4F6F3; --sur:#FFFFFF; --sur2:#EAEFEA; --sur3:#FAFBFA;
  --ac:#4E7A57; --ac-deep:#3C6044; --ac-soft:rgba(78,122,87,.10); --on-ac:#FFFFFF;
  --ember:#B26E0F; --ember-soft:rgba(178,110,15,.10);
  --gr:#16A34A; --gr-soft:rgba(22,163,74,.10);
  --tx:#1B231D; --sub:#66716A; --bdr:#E3E8E2;
  --shadow:0 1px 2px rgba(20,28,50,.04), 0 2px 6px rgba(20,28,50,.05);
  --shadow-lg:0 4px 16px rgba(20,28,50,.08);
  --r:16px;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--tx);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
/* Wider variant for the blog index grid only - lets 4 same-size cards sit in
   a row instead of shrinking them to fit the standard 1060px content width. */
.wrap-wide{max-width:1400px}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ac);font-weight:600;
}

/* ---------- top bar (shared with the signed-out app shell) ---------- */
.nav{
  position:sticky;top:0;z-index:20;background:rgba(244,246,243,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--bdr);
}
.nav-in{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;text-decoration:none;color:var(--tx)}
.brand img{width:36px;height:36px;border-radius:9px}
/*
  The wordmark is the real logo lettering, not text. The asset is white-on-
  transparent and used as a MASK so it inherits currentColor - one file works
  on the light marketing pages and on the app's dark theme, and it can never
  drift from the surrounding text colour. Sized in em so it tracks font-size.
  Aspect ratio is 822/156 = 5.269; height .78em keeps the all-caps lettering
  at roughly the cap-height of the text it replaced.
*/
.brand-mark{
  display:block;height:.78em;width:4.11em;
  background-color:currentColor;
  -webkit-mask:url(/icons/encodr-wordmark.png) no-repeat center/contain;
  mask:url(/icons/encodr-wordmark.png) no-repeat center/contain;
}
.nav-sp{flex:1}
.nav a.link{color:var(--sub);text-decoration:none;font-size:15px;font-weight:600}
.nav a.link:hover{color:var(--tx)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;padding:11px 18px;
  font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn[hidden]{display:none} /* display:inline-flex above outranks the UA rule */
.btn-ac{background:var(--ac);color:var(--on-ac)}
.btn-ac:hover{background:var(--ac-deep)}
.btn-gh{background:transparent;color:var(--tx);border-color:var(--bdr)}
.btn-gh:hover{background:var(--sur2)}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}

/* ---------- shared sections ---------- */
section{padding:64px 0}
.sec-head{max-width:34em;margin-bottom:34px}
.sec-head h2{font-size:clamp(27px,3.4vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.14;margin:10px 0 12px}
.sec-head p{color:var(--sub);font-size:17px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 7px}
.card p{color:var(--sub);font-size:15px}

footer{border-top:1px solid var(--bdr);padding:28px 0 40px;margin-top:20px}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:14px;color:var(--sub)}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--tx)}
.foot-sp{flex:1}

/* ---------- blog: square card grid (shared by /blog/ and the landing teaser) ---------- */
.blog-section{background:var(--sur3);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:24px}
/* The /blog/ index only - forces exactly 4 columns in the wider .wrap-wide
   container so cards stay the same size as before, just 4 to a row instead
   of 3. The landing-page teaser keeps the plain auto-fill .blog-grid. */
.blog-grid-4{grid-template-columns:repeat(4,1fr)}
.blog-card{
  position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
  padding:22px;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--ac),var(--ember));
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--ac)}
.blog-card:hover::before{transform:scaleX(1)}
.cat{
  display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:14px;
}
.cat.science{background:var(--ac-soft);color:var(--ac)}
.cat.product{background:var(--ember-soft);color:var(--ember)}
.blog-card h2,.blog-card h3{
  font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.26;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card p{
  color:var(--sub);font-size:13.5px;line-height:1.46;flex:1;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card .meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--bdr);
}
.blog-card time{font-family:var(--mono);font-size:11px;color:var(--sub)}
.blog-card .arrow{font-weight:700;color:var(--ac);font-size:14px;transition:transform .18s ease}
.blog-card:hover .arrow{transform:translateX(4px)}
.blog-more{text-align:center;margin-top:30px}

.post{max-width:760px;margin:0 auto;padding:48px 24px 24px}
.post-back{margin-bottom:20px}
.post-back a{color:var(--sub);text-decoration:none;font-size:14px;font-weight:600}
.post-back a:hover{color:var(--tx)}
.post-head{margin-bottom:28px}
.post-head .cat{margin-bottom:12px}
.post-head time{font-family:var(--mono);font-size:12px;color:var(--sub);margin-left:10px}
.post-head h1{font-size:clamp(30px,4.2vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.12;margin:8px 0 10px}
.post-head p.standfirst{font-size:18px;color:var(--sub)}
.post-body h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:34px 0 10px}
.post-body h3{font-size:19px;font-weight:600;margin:26px 0 8px}
.post-body p{margin:0 0 16px;font-size:17px}
.post-body ul,.post-body ol{margin:0 0 16px 22px}
.post-body li{margin-bottom:7px;font-size:17px}
.post-body a{color:var(--ac);text-decoration:underline;text-underline-offset:2px}
.post-body strong{font-weight:600}
.post-body code{
  font-family:var(--mono);font-size:.9em;background:var(--sur2);
  padding:2px 6px;border-radius:6px;
}
.post-body blockquote{
  border-left:3px solid var(--ac);padding:2px 0 2px 16px;margin:0 0 16px;color:var(--sub);
}
.post-cta{
  margin-top:40px;padding:24px;background:var(--sur);border:1px solid var(--bdr);
  border-radius:var(--r);text-align:center;
}
.post-cta p{color:var(--sub);margin-bottom:14px}

@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .blog-grid,.blog-grid-4{grid-template-columns:repeat(2,1fr)}
  section{padding:48px 0}
  .nav a.link{display:none}
  .post{padding:32px 20px 16px}
  /* The nav is genuinely tight at ~390px: brand + two buttons left only ~9px of
     slack even with the old text wordmark. The logo lettering is wider than the
     text it replaced, so trim the brand here or "Get started" pushes the
     document past the viewport. */
  .brand{font-size:16px;gap:8px}
  .brand img{width:30px;height:30px}
}
@media (max-width:520px){
  .blog-grid,.blog-grid-4{grid-template-columns:1fr}
  .blog-card{aspect-ratio:auto;min-height:190px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}