/* ============================================================
   onboarding.studiohub.ai — the one stylesheet.

   The directory of the four trainings and every step page link this
   file. Same look as the main site and the knowledge base (Roboto,
   lavender page, white blocks with a 2px black border, 25px radius and
   a hard offset shadow, black rounded footer panel — Hervin's choice of
   2026-08-29), so a client moving between studiohub.ai, an onboarding
   step and an article sees one company.

   Copied rather than linked because the three sites deploy separately.
   Phones first in mind: clients open the onboarding email on a phone.
   ============================================================ */

:root {
  --bg:        #f5f2ff;
  --blue:      #4fbdff;
  --blue-ink:  #188bf6;
  --black:     #000000;
  --white:     #ffffff;
  --ink:       #111318;
  --body:      #405561;
  --grey:      #7a8b95;
  --line:      #e8e8e8;
  --green:     #11c644;
  --radius:    25px;
  --shadow:    4px 4px 0 rgba(0,0,0,0.267);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--body);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }
p, li, a, td { overflow-wrap: break-word; }
a { color: var(--blue-ink); }

/* ---- header ------------------------------------------------------------ */

.nav { padding: 22px 0; }
.nav .inner {
  max-width: 860px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav .logo { width: 150px; height: auto; display: block; }
.nav .all { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.nav .all:hover { color: var(--blue-ink); }
@media (max-width: 640px) {
  .nav { background: var(--white); padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav .logo { width: 120px; }
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--black); color: var(--white);
  text-decoration: none; font-weight: 700; font-size: 18px;
  padding: 14px 28px; border-radius: 10px;
  border: 2px solid var(--black);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(0,0,0,0.267); }
.btn-outline { background: var(--white); color: var(--black); }
.btn-green { background: var(--green); border-color: var(--green); }

/* ---- the white block ---------------------------------------------------- */

.card {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 44px;
}
@media (max-width: 640px) { .card { padding: 24px 18px; border-radius: 18px; } }

/* ---- directory ----------------------------------------------------------- */

.dir-head { padding: 26px 0 8px; }
.dir-head .kicker { color: var(--blue-ink); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; }
.dir-head h1 { color: var(--ink); font-size: 42px; font-weight: 800; line-height: 1.15; margin: 0 0 12px; }
.dir-head p { font-size: 18px; margin: 0; max-width: 620px; }

.trainings { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 28px 0 0; }
.training {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  padding: 28px 28px 24px;
}
.training small.n { color: var(--blue-ink); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.training h2 { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; }
.training p { margin: 0; font-size: 16px; }
.training .go { margin-top: auto; padding-top: 12px; color: var(--ink); font-weight: 700; font-size: 16px; }
.training .go .cont { display: none; color: var(--green); }
.training .go .again { display: none; color: var(--grey); font-weight: 400; margin-left: 8px; }
.training.has-progress .go .start { display: none; }
.training.has-progress .go .cont { display: inline; }
.training.is-done .go .start { display: inline; }
.training.is-done .go .cont { display: none; }
.training.is-done .go .again { display: inline; }
.training:hover h2 { color: var(--blue-ink); }
@media (max-width: 700px) { .trainings { grid-template-columns: 1fr; gap: 18px; } .dir-head h1 { font-size: 30px; } .dir-head p { font-size: 16px; } }

.dir-note { font-size: 15px; color: var(--grey); margin: 26px 0 0; max-width: 620px; }

/* ---- step page ----------------------------------------------------------- */

.crumbs { font-size: 14px; color: var(--grey); margin: 14px 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--blue-ink); }

/* how far along: one bar, filled to the step's share of the longest road */
.prog { height: 6px; background: #e4dff5; border-radius: 99px; overflow: hidden; margin: 0 0 18px; }
.prog i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }

.step .kicker { color: var(--blue-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 8px; }
.step h1 { color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 22px; }

/* the article body, same rules as the knowledge base so it reads the same */
.kb h2 { color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1.3; margin: 32px 0 12px; }
.kb h3 { color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.35; margin: 26px 0 10px; }
.kb h4 { color: var(--ink); font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.kb p, .kb li { font-size: 17px; }
.kb p { margin: 0 0 16px; }
.kb ul, .kb ol { margin: 0 0 16px; padding-left: 26px; }
.kb li { margin: 0 0 8px; }
.kb li > ul, .kb li > ol { margin-top: 8px; }
.kb strong { color: var(--ink); }
.kb hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.kb pre {
  background: #f6f7f9; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; font: 15px/1.55 'Roboto', sans-serif; white-space: pre-wrap; margin: 0 0 16px;
}
.kb img {
  max-width: 100%; height: auto; display: inline-block; vertical-align: top;
  border: 1px solid var(--line); border-radius: 10px; margin: 6px 6px 6px 0;
}
.kb p > img:only-child { display: block; margin: 8px 0 20px; }
.video-wrap {
  overflow: hidden; background: #0d1017;
  border: 2px solid var(--black); border-radius: 16px; box-shadow: var(--shadow);
  margin: 6px 0 26px;
}
.video { position: relative; height: 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kb-link { font-size: 15px; color: var(--grey); margin: 22px 0 0; }
.kb-link a { color: var(--grey); }
.kb-link a:hover { color: var(--blue-ink); }

/* the form step */
.form-step p { font-size: 17px; }
.form-step .btn { margin: 6px 0 10px; }

/* answers to a question */
.branch { margin: 26px 0 0; }
.branch .q { color: var(--ink); font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.opt {
  display: block; text-decoration: none; color: var(--ink);
  border: 2px solid var(--black); border-radius: 12px; background: var(--white);
  padding: 14px 16px; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.opt:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(0,0,0,0.267); }
.opt strong { display: block; font-size: 17px; }
.opt small { display: block; color: var(--grey); font-size: 14px; margin-top: 4px; line-height: 1.4; }

/* back / next */
.nav-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.nav-row .back { color: var(--grey); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav-row .back:hover { color: var(--blue-ink); }
.nav-row .next { margin-left: auto; }
@media (max-width: 640px) {
  .step h1 { font-size: 24px; }
  .kb p, .kb li { font-size: 16px; }
  .nav-row .next { width: 100%; }
  .nav-row .back { order: 2; margin: 0 auto; }
}

/* the end of a training */
.done { border: 2px solid var(--green); border-radius: 16px; padding: 24px; text-align: center; margin: 28px 0 0; background: #f2fcf5; }
.done h2 { color: var(--ink); font-size: 24px; margin: 0 0 8px; }
.done p { margin: 0 0 18px; }

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

footer.site {
  background: var(--black);
  color: rgba(255,255,255,0.72);
  border-radius: 15px;
  margin: 40px 20px 20px;
  padding: 50px 24px 26px;
  text-align: center;
  font-size: 15px;
}
footer.site .logo { width: 260px; max-width: 70%; height: auto; display: block; margin: 0 auto 24px; }
footer.site p { margin: 0 auto 14px; max-width: 600px; }
footer.site a { color: rgba(255,255,255,0.9); }
footer.site .foot-row {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin: 0 100px; padding: 22px 0 6px;
}
@media (max-width: 900px) { footer.site .foot-row { margin: 0 12px; } }
@media (max-width: 640px) {
  footer.site { margin: 32px 12px 12px; padding: 36px 18px 18px; }
  footer.site .logo { width: 180px; }
}

.missing { text-align: center; padding: 40px 0; }
.missing h1 { color: var(--ink); font-size: 34px; margin: 0 0 12px; }