/* ============================================================
   JAMM School — Інтерактивна презентація
   base.css — reset, токени, типографіка, шапка, оболонка
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* фірмова палітра (з поточного візуалу) */
  --green:#1D9E75;
  --green-dark:#0F6E56;
  --green-light:#EAF3DE;
  --green-text:#3B6D11;

  --bg:#F7F6F2;
  --white:#fff;
  --text:#1a1a1a;
  --muted:#6b7280;
  --border:rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);

  --radius:20px;
  --radius-sm:12px;
  --radius-pill:100px;

  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-float:0 10px 30px rgba(0,0,0,.08);

  --maxw:900px;
  --ease:.25s cubic-bezier(.4,0,.2,1);

  --font-head:'Unbounded',sans-serif;
  --font-body:'Manrope',sans-serif;
}

html,body{min-height:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- header --- */
header.app-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:20;
}
.logo-mark{width:34px;height:34px;flex-shrink:0;display:block;object-fit:contain;}
.logo-text{
  font-family:var(--font-head);
  font-size:15px;font-weight:700;line-height:1.1;
}
.logo-text span{color:var(--green);display:block;font-size:10px;font-weight:400;}

.header-step{
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.02em;
}

/* --- оболонка для екранів --- */
main.app-main{
  flex:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px 80px;
}

/* приховування для доступності */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media(max-width:560px){
  header.app-header{padding:14px 18px;}
  main.app-main{padding:0 14px 64px;}
}