/* ============================================================
   LANGOTIME — COMPONENT STYLES (Button, Eyebrow, CheckItem, StepCard)
   Extracted verbatim from the design-system React components,
   which inject these at runtime. Static pages link this file so
   the markup renders identically without React/Babel.
   ============================================================ */

/* ---------------- Button (components/core/Button) ---------------- */
.lt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:700; letter-spacing:-0.01em;
  border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.lt-btn:active{ transform: scale(var(--press-scale)); }
.lt-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.lt-btn svg{ display:block; }

/* sizes */
.lt-btn--sm{ height:36px; padding:0 16px; font-size:14px; }
.lt-btn--md{ height:46px; padding:0 22px; font-size:15px; }
.lt-btn--lg{ height:56px; padding:0 30px; font-size:17px; }

/* variants */
.lt-btn--primary{ background:var(--accent); color:var(--accent-contrast); }
.lt-btn--primary:hover:not(:disabled){ background:var(--accent-hover); box-shadow:var(--shadow-accent); }
.lt-btn--primary:active:not(:disabled){ background:var(--accent-press); }

.lt-btn--solid{ background:var(--ink-900); color:var(--paper); }
.lt-btn--solid:hover:not(:disabled){ background:var(--ink-700); }

.lt-btn--outline{ background:transparent; color:var(--ink-900); border-color:var(--ink-900); }
.lt-btn--outline:hover:not(:disabled){ background:var(--ink-900); color:var(--paper); }

.lt-btn--ghost{ background:transparent; color:var(--ink-900); }
.lt-btn--ghost:hover:not(:disabled){ background:var(--ink-100); }

.lt-btn--full{ width:100%; }

/* ---------------- Eyebrow (components/brand/Eyebrow) ---------------- */
.lt-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-techno); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted);
}
.lt-eyebrow__slash{ color:var(--accent); font-weight:700; }
.lt-eyebrow__bar{ width:22px; height:2px; background:var(--accent); }
.lt-eyebrow--accent{ color:var(--accent); }
.lt-eyebrow--strong{ color:var(--text-strong); }
.lt-eyebrow--inverse{ color:rgba(255,255,255,.7); }

/* ---------------- CheckItem (components/brand/CheckItem) ---------------- */
.lt-check{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:12px; font-family:var(--font-sans); }
.lt-check__icon{
  flex:0 0 auto; width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.lt-check__icon svg{ display:block; }
.lt-check--accent .lt-check__icon{ background:var(--orange-50); color:var(--accent); }
.lt-check--success .lt-check__icon{ background:var(--green-100); color:#0F7A52; }
.lt-check--ink .lt-check__icon{ background:var(--ink-100); color:var(--ink-900); }
.lt-check--bare .lt-check__icon{ background:transparent; }
.lt-check__text{ font-size:var(--text-body); line-height:1.5; color:var(--text-body); }
.lt-check--inverse .lt-check__text{ color:rgba(255,255,255,.86); }
.lt-check--inverse.lt-check--accent .lt-check__icon{ background:rgba(255,77,0,.16); }

/* ---------------- StepCard (components/brand/StepCard) ---------------- */
.lt-step{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:var(--space-7); background:var(--surface-card);
  border:1.5px solid var(--border-default); border-radius:var(--radius-card);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.lt-step--interactive:hover{ border-color:var(--ink-900); transform:translateY(-2px); }
.lt-step__top{ display:flex; align-items:center; justify-content:space-between; }
.lt-step__num{
  font-family:var(--font-techno); font-weight:700; font-size:34px;
  letter-spacing:.02em; color:var(--accent); line-height:1;
}
.lt-step__icon{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-900);
}
.lt-step__icon svg{ display:block; width:22px; height:22px; }
.lt-step__title{
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-h4);
  letter-spacing:-0.01em; color:var(--text-strong); margin:0;
}
.lt-step__body{ font-size:var(--text-body); line-height:1.55; color:var(--text-secondary); }
.lt-step--dark{ background:var(--ink-900); border-color:var(--ink-700); }
.lt-step--dark .lt-step__title{ color:var(--paper); }
.lt-step--dark .lt-step__body{ color:rgba(255,255,255,.72); }
.lt-step--dark .lt-step__icon{ color:var(--paper); }

/* ---------------- Input (components/forms/Input) ---------------- */
/* Extracted verbatim from the DS Input component (injected at runtime there). */
.lt-field{ display:flex; flex-direction:column; gap:8px; }
.lt-field__label{
  font-family:var(--font-techno); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary);
}
.lt-field__hint{ font-size:13px; color:var(--text-muted); }
.lt-input{
  font-family:var(--font-sans); font-size:15px; color:var(--text-strong);
  background:var(--paper); border:1.5px solid var(--border-default);
  border-radius:var(--radius-input); padding:0 14px; height:46px; width:100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.lt-input::placeholder{ color:var(--ink-300); }
.lt-input:hover{ border-color:var(--ink-300); }
.lt-input:focus{ outline:none; border-color:var(--ink-900); box-shadow:0 0 0 3px rgba(10,10,10,.08); }
.lt-input--invalid{ border-color:var(--danger); }
.lt-input--invalid:focus{ box-shadow:0 0 0 3px var(--red-100); }
textarea.lt-input{ height:auto; padding:12px 14px; resize:vertical; min-height:104px; line-height:1.5; }
.lt-field--accentFocus .lt-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--orange-50); }

/* ---------------- Waitlist form (kit-local layout over the Input component) ---------------- */
.lt-form{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.lt-form__row{ display:flex; gap:10px; align-items:stretch; margin-top:2px; }
.lt-form__row .lt-input{ flex:1; height:56px; }
.lt-form__row .lt-btn{ flex:0 0 auto; }
.lt-form__note{ font-size:13px; color:var(--text-muted); }
.lt-form__note a{ text-decoration:underline; }
.lt-form__status{ font-size:14px; font-weight:600; margin:0; }
.lt-form__status--ok{ color:var(--success); }
.lt-form__status--err{ color:var(--danger); }
.lt-form__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Waitlist form on the orange CTA block */
.mk-cta .lt-form{ align-items:center; }
.mk-cta .lt-form .lt-field{ width:100%; max-width:520px; }
.mk-cta .lt-field__label{ color:rgba(255,255,255,.92); }
.mk-cta .lt-form__note{ color:rgba(255,255,255,.88); }
.mk-cta .lt-form__note a{ color:#fff; }
.mk-cta .lt-form__status{ color:#fff; }
.mk-cta .lt-input{ background:#fff; }

@media (max-width:480px){
  .lt-form__row{ flex-direction:column; }
  .lt-form__row .lt-btn{ width:100%; }
}