/* learn.sys.academy — shared styles for the Aisys guide site.
   Tokens and typography are lifted from scripts/onboard-pages.mjs so a client moving from
   the setup flow to a guide sees one product, not two. Article styles only — no forms. */

@font-face{font-family:'Lato';font-weight:400;src:url('/assets/fonts/Lato-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Lato';font-weight:700;src:url('/assets/fonts/Lato-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Lato';font-weight:900;src:url('/assets/fonts/Lato-Black.ttf') format('truetype');font-display:swap}

:root{
  --sky-blue:#7CB6E4;--soft-green:#C7E8AC;--strong-green:#5A9A2A;--brand-grey:#6D6E71;
  --sky-tint:#EAF3FB;--green-tint:#F1F9E7;
  --sky-deep:#2E6FA3;
  --ink:#2E2F31;--ink-2:#4B4C4F;--muted:#8A8B8E;--hairline:#E6E6E7;
  --surface-sunk:#F2F5F7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-sunk);color:var(--ink);
  font-family:'Lato',-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.65}

/* Site header — the same slim white bar the setup pages use. */
.top{background:#fff;border-bottom:1px solid var(--hairline)}
.top .twrap{max-width:64rem;margin:0 auto;padding:.8rem 1.5rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.logo{display:block;height:46px}
.prod{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-grey);text-decoration:none}

main{max-width:60rem;margin:2.75rem auto 3.5rem;padding:0 1.5rem}
.card{background:#fff;border:1px solid var(--hairline);border-radius:20px;
  padding:3rem 3.25rem 3.25rem;box-shadow:0 8px 32px rgba(46,47,49,.07)}

.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-grey);margin:0 0 .6rem}
h1{font-weight:900;font-size:2.25rem;line-height:1.15;color:var(--sky-blue);margin:0 0 .7rem}
h2{font-weight:700;font-size:1.2rem;color:var(--ink);margin:2.6rem 0 .7rem}
h3{font-weight:700;font-size:1rem;color:var(--ink);margin:1.8rem 0 .5rem}
p{margin:0 0 1.1rem;color:var(--ink-2);max-width:72ch}
p.lede{font-size:1.15rem;color:var(--ink);margin-bottom:1.9rem;max-width:62ch}
ul{margin:0 0 1.1rem;padding-left:1.15rem;max-width:72ch}
li{margin-bottom:.55rem;color:var(--ink-2)}
li::marker{color:var(--sky-blue)}
ol{margin:0 0 1.1rem;padding-left:1.3rem;max-width:72ch}
ol li{margin-bottom:.9rem}
a{color:var(--strong-green);font-weight:700}
b,strong{color:var(--ink)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--sky-tint);border-radius:5px;padding:.12em .42em;color:var(--sky-deep)}

.highlight{background:var(--green-tint);border:1px solid var(--soft-green);
  border-radius:14px;padding:1.25rem 1.4rem;margin:1.6rem 0}
.highlight p:last-child{margin-bottom:0}
.note{background:var(--sky-tint);border-radius:14px;padding:1.1rem 1.3rem;margin:1.4rem 0;
  font-size:.95rem}
.note p:last-child{margin-bottom:0}
.muted{color:var(--muted);font-size:.95rem}

/* The three-step "how it works" block — numbered, generous, scannable at a glance. */
.flow{list-style:none;padding:0;margin:1.6rem 0;max-width:none}
.flow li{display:flex;gap:1.1rem;margin-bottom:1.4rem;color:var(--ink-2)}
.flow .n{flex:0 0 2.1rem;height:2.1rem;border-radius:50%;background:var(--sky-blue);color:#fff;
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.flow .b{flex:1}
.flow .b b{display:block;color:var(--ink);margin-bottom:.15rem}

/* Where a video guide will sit. Rendered as a quiet placeholder until the recording exists,
   so adding one later is a src swap rather than a re-layout. */
.video{background:#fff;border:1px dashed var(--sky-blue);border-radius:14px;
  padding:2.2rem 1.4rem;margin:1.6rem 0;text-align:center;color:var(--muted);font-size:.95rem}
.video iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:14px;display:block}

/* Tabs. Real links to real pages, not JS panes — every tab has a URL that survives being
   forwarded to a colleague, and the guide works with scripting off. Scrolls sideways on a
   phone rather than wrapping into a ragged block. */
.tabs{display:flex;gap:.4rem;overflow-x:auto;margin:0 0 2.2rem;padding-bottom:.3rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:.5rem 1rem;border-radius:999px;font-size:.9rem;font-weight:700;
  text-decoration:none;color:var(--brand-grey);background:var(--surface-sunk);
  border:1px solid var(--hairline);white-space:nowrap}
.tabs a:hover{color:var(--sky-deep);border-color:var(--sky-blue);background:var(--sky-tint)}
.tabs a[aria-current="page"]{background:var(--sky-blue);border-color:var(--sky-blue);color:#fff}

/* Buttons. Green and deliberately chunky — the previous text links at the foot of a lesson
   were missed, which stalled people at the end of a page with nowhere obvious to go. */
.btn{display:inline-block;padding:.95rem 1.7rem;border-radius:12px;
  background:var(--strong-green);border:2px solid var(--strong-green);color:#fff;
  font-weight:700;font-size:1rem;line-height:1.3;text-decoration:none;
  box-shadow:0 2px 10px rgba(90,154,42,.22)}
.btn:hover{background:#4C831F;border-color:#4C831F;color:#fff}
.btn.secondary{background:#fff;color:var(--strong-green);box-shadow:none}
.btn.secondary:hover{background:var(--green-tint);color:var(--strong-green)}

/* Back / next, so the guide can also just be read straight through. */
.pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin:3rem 0 0;padding-top:1.8rem;border-top:1px solid var(--hairline)}
.pager .btn{flex:0 1 auto}
.pager .next{margin-left:auto}

@media (max-width:560px){
  .pager{flex-direction:column-reverse;align-items:stretch}
  .pager .btn{text-align:center;margin-left:0}
}

/* Guide cards on the index. */
.guides{list-style:none;padding:0;margin:1.8rem 0 0;max-width:none}
.guides li{margin-bottom:1rem}
.guides a,.guides .soon{display:block;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:1.3rem 1.5rem;text-decoration:none;color:var(--ink);font-weight:400}
.guides a{border-color:var(--soft-green)}
.guides a:hover{border-color:var(--strong-green);background:var(--green-tint)}
.guides b{display:block;font-size:1.05rem;margin-bottom:.2rem}
.guides a b{color:var(--sky-deep)}
.guides .soon{opacity:.62}
.guides .tag{float:right;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:.3rem}

footer{max-width:60rem;margin:0 auto 3.5rem;padding:0 1.5rem;color:var(--muted);font-size:.9rem}
footer a{color:var(--brand-grey)}

@media (max-width:640px){
  .card{padding:2rem 1.4rem 2.2rem;border-radius:16px}
  h1{font-size:1.75rem}
  main{margin-top:1.5rem}
}