/* LittleCloud site design system.
   Flat: neutral dark surfaces, hairline lines, one blue accent, product colors used
   only as identity. No gradients, no animation. Matches the flat direction used
   across the HEARTH and SAGE dashboards. One file, every page. */

:root{
  color-scheme:dark;

  --bg:#0e0f12;
  --surface:#15181d;
  --surface-2:#191d23;
  --line:#252a31;
  --line-2:#2f353d;
  --text:#eceef1;
  --text-2:#9aa2ab;
  /* lightened from #69707a, which was 3.8:1 on --bg and failed WCAG AA for body text */
  --muted:#868d97;
  --blue:#3d82d6;
  --blue-dim:#2b5f9e;
  --ember:#e8742e;
  --green:#3fae6a;
  /* Brighter variants for text sitting on a tinted pill: the base product colors
     drop to ~4.2:1 once composited over their own 14% background. */
  --blue-on-tint:#79aeea;
  --ember-on-tint:#f0985e;
  --green-on-tint:#63c489;

  --wide:940px;
  --prose:660px;
  --radius:9px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue);text-decoration:none}
a:hover{color:var(--text)}
/* Links inside running text get an underline. Blue on body grey is only 1.5:1, so
   color alone is not enough to pick them out (WCAG 1.4.1). Nav, footer, buttons and
   product cards are obvious from position, so they stay bare. */
p a,li a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
::selection{background:rgba(61,130,214,.3)}

/* Keyboard users can jump the repeated banner on every page (WCAG 2.4.1) */
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--surface);
  color:var(--text);border:1px solid var(--blue);border-radius:0 0 7px 0;
  padding:11px 18px;font-size:14.5px;font-weight:600;text-decoration:none}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 24px}
.wrap.prose{max-width:var(--prose)}
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* ---------- top bar ---------- */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);flex:none}
.brand:hover{color:var(--text)}
.brand svg{width:26px;height:auto;flex:none;fill:var(--blue)}
.brand .word{font-size:17px;letter-spacing:.4px;font-weight:400}
.brand .word b{font-weight:600;color:var(--blue)}
.nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
/* generous vertical padding so nav links are a comfortable tap target on phones */
.nav a{font-size:14.5px;color:var(--text-2);display:inline-block;padding:9px 0}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:76px 0 8px}
.hero .lede{max-width:640px}
/* centered hero, used on the homepage so it keeps the calm single-screen feel */
.hero.mid{padding:84px 0 12px;text-align:center}
.hero.mid .lede{margin-left:auto;margin-right:auto}
.hero.mid .rule{margin-left:auto;margin-right:auto}
.hero.mid .btnrow{justify-content:center}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);margin:0 0 16px}
h1{font-size:clamp(30px,5.4vw,44px);font-weight:600;letter-spacing:-.6px;line-height:1.15;
  margin:0 0 20px;color:var(--text)}
.rule{width:56px;height:2px;background:var(--blue);opacity:.75;margin:0 0 26px;border:0}
.lead{font-size:clamp(16px,2.3vw,18px);line-height:1.65;color:var(--text-2);margin:0 0 18px}
.lead strong{color:var(--text);font-weight:600}

/* ---------- sections ---------- */
section{padding:52px 0}
section + section{border-top:1px solid var(--line)}
h2{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 26px}
h3{font-size:17px;font-weight:600;letter-spacing:.1px;color:var(--text);margin:0 0 8px}
p{color:var(--text-2);margin:0 0 15px;font-size:15.5px}
p:last-child{margin-bottom:0}
p strong{color:var(--text);font-weight:600}
em{color:var(--text-2);font-style:italic}

/* ---------- prose pages ---------- */
.doc h2{font-size:18px;font-weight:600;letter-spacing:.1px;text-transform:none;
  color:var(--text);margin:40px 0 12px}
.doc h3{font-size:15.5px;margin:26px 0 8px}
.doc p{font-size:15.5px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{color:var(--text-2);font-size:15.5px;margin-bottom:9px}
.doc li strong{color:var(--text)}
.doc .lead{margin-bottom:24px}

/* plain bordered list, no bullets */
.rows{list-style:none;padding:0;margin:4px 0 18px}
.rows li{padding:14px 0;border-top:1px solid var(--line);color:var(--text-2);font-size:15.5px}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li strong{color:var(--text)}

/* ---------- grid of principle/product cards ---------- */
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:20px 22px}
.card h3{margin-bottom:7px}
.card p{font-size:14.5px;margin:0}

/* product card */
.pcard{display:block;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:22px 24px;color:var(--text);
  transition:border-color .15s ease}
.pcard:hover{color:var(--text)}
.pcard.h:hover{border-color:var(--ember)}
.pcard.s:hover{border-color:var(--green)}
.pcard .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pname{font-size:20px;font-weight:600;letter-spacing:.5px}
.pcard.h .pname{color:var(--ember)}
.pcard.s .pname{color:var(--green)}
.pcard .pdesc{font-size:14.5px;color:var(--text-2);margin:0 0 14px;line-height:1.6}
.pcard .go{font-size:13.5px;color:var(--blue);font-weight:600}
.pcard:hover .go{color:var(--text)}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap;
  color:var(--green-on-tint);background:rgba(63,174,106,.15)}
.badge.blue{color:var(--blue-on-tint);background:rgba(61,130,214,.15)}
.badge.quiet{color:var(--text-2);background:rgba(154,162,171,.14)}
.badge.ember{color:var(--ember-on-tint);background:rgba(232,116,46,.15)}

/* product tag used in timelines/roadmap */
.tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-right:9px;
  vertical-align:2px;white-space:nowrap}
.tag.h{color:var(--ember-on-tint);background:rgba(232,116,46,.14)}
.tag.s{color:var(--green-on-tint);background:rgba(63,174,106,.14)}
.tag.lc{color:var(--blue-on-tint);background:rgba(61,130,214,.14)}

/* ---------- notice band ---------- */
.notice{border:1px solid var(--line-2);border-left:2px solid var(--blue);
  border-radius:var(--radius);background:var(--surface);padding:20px 22px}
.notice h3{margin-bottom:8px}
/* a notice that follows the h1 directly is an h2, so heading levels never skip;
   it still needs to look like the h3 version, not like a section label */
.notice h2{font-size:17px;font-weight:600;letter-spacing:.1px;text-transform:none;
  color:var(--text);margin:0 0 8px}
.notice p{font-size:14.5px;margin-bottom:10px}
.notice p:last-child{margin-bottom:0}

/* ---------- timeline (progress page) ---------- */
.period{margin:0 0 40px}
.period-h{display:flex;align-items:baseline;gap:12px;margin:0 0 4px;
  padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.period-h .when{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);margin:0}
.period-h .what{font-size:13px;color:var(--muted);margin:0}
.entry{padding:20px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry .ti{font-size:16px;font-weight:600;color:var(--text);margin:0 0 4px;line-height:1.45}
.when-date{display:block;font-size:12.5px;color:var(--muted);margin:0 0 8px;
  letter-spacing:.03em}
.entry p{font-size:15px;margin:0 0 10px}
.entry p:last-child{margin-bottom:0}

/* ---------- roadmap groups ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.tab{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--text-2);background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.tab:hover{color:var(--text);border-color:var(--line-2)}
.tab.active{color:var(--text);border-color:var(--blue)}
.item{padding:20px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .t{font-size:16px;font-weight:600;color:var(--text);margin:0 0 8px;line-height:1.45}
/* screen-reader-only: announces filter results without showing a redundant line */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.item p{font-size:15px;margin:0 0 10px}
.item p:last-child{margin-bottom:0}
.item[hidden]{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  color:var(--text);background:var(--surface);border:1px solid var(--line-2);
  border-radius:7px;padding:11px 18px;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--blue);background:var(--surface-2);color:var(--text)}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none}
.btn.primary{border-color:var(--blue-dim)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:8px;padding:26px 0 34px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  justify-content:space-between}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.foot a{font-size:13.5px;color:var(--text-2);display:inline-block;padding:5px 0}
.foot a:hover{color:var(--text)}
/* Terms and Privacy live only in the footer, so that's where they mark themselves current */
.foot a[aria-current="page"]{color:var(--text);font-weight:600}
.foot .meta{font-size:12.5px;color:var(--muted);letter-spacing:.4px}

/* ---------- centered stage (404) ---------- */
/* flex:1 rather than 100vh: .page is already min-height:100vh, so a viewport-height
   stage plus the header and footer would always overflow and never actually centre */
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:64px 24px}

/* ---------- utility ---------- */
.mt0{margin-top:0}
.dim{color:var(--muted)}
.center{text-align:center}
.small{font-size:13.5px}
video{max-width:100%;display:block;border-radius:var(--radius);border:1px solid var(--line)}

@media (max-width:640px){
  .hero{padding:52px 0 4px}
  section{padding:40px 0}
  .top .wrap{min-height:54px}
  .nav{gap:14px}
  .nav a{font-size:14px}
  .foot .wrap{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /* the demo clip autoplays and loops, so hide it entirely rather than play motion
     at someone who asked for none */
  .demovid{display:none!important}
}