/* ToolKit for Training — foundations.
   Instant Studio design system proper: white canvas, Hubot Sans Condensed
   display, DM Sans body, DM Mono labels, orange + lavender accents,
   hairline borders, minimal shadows. Premium B2B, editorial. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 64px}
.section{padding:112px 0;position:relative}
.section.tight{padding:80px 0}

.is-display{font-family:var(--font-display);font-weight:var(--fw-semibold);line-height:1.15;margin:0;color:var(--text-primary);text-wrap:balance}
.h1{font-size:72px}
.h2{font-size:52px}
.lead{font-family:var(--font-body);font-size:20px;line-height:1.6;color:var(--text-secondary);margin:0}

/* eyebrow — mono label with the lavender dot */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.5px;text-transform:uppercase;color:var(--text-primary)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-secondary-100)}

/* buttons — lavender primary, dark, ghost */
.btn{font-family:var(--font-body);font-size:16px;font-weight:var(--fw-medium);border-radius:var(--radius-lg);padding:14px 28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.btn-lavender{background:var(--accent-secondary-100);color:var(--neutral-100)}
.btn-lavender:hover{background:var(--accent-secondary-80)}
.btn-dark{background:var(--neutral-100);color:#fff}
.btn-dark:hover{background:var(--neutral-90)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--neutral-100)}
.btn-outline:hover{background:var(--accent-secondary-20)}

/* mono tag pill */
.tag{font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;color:var(--text-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-pill);padding:6px 14px;white-space:nowrap;background:var(--bg-primary)}

@media (max-width:900px){
  .container{padding:0 24px}
  .section{padding:72px 0}
  .h1{font-size:44px}
  .h2{font-size:36px}
}