/* Ann Design System — component classes (static HTML port of the React kit). */

.lp-scope .container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* --- Button --- */
.lp-scope .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:1;
  border-radius:var(--radius-pill);
  cursor:pointer;
  border:1px solid transparent;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  padding:12px 24px;
  font-size:var(--fs-body);
  white-space:nowrap;
}
.lp-scope .btn:active{transform:scale(0.97)}
.lp-scope .btn:hover{text-decoration:none}
.lp-scope .btn-sm{padding:8px 16px;font-size:var(--fs-sm);gap:6px}
.lp-scope .btn-lg{padding:16px 34px;font-size:var(--fs-lead);gap:10px}
.lp-scope .btn-primary{background:var(--surface-accent);color:var(--text-on-accent);box-shadow:var(--shadow-accent)}
.lp-scope .btn-primary:hover{color:var(--text-on-accent)}
.lp-scope .btn-secondary{background:var(--surface-card);color:var(--text-strong);border:1.5px solid var(--border-default);box-shadow:var(--shadow-xs)}
.lp-scope .btn-secondary:hover{color:var(--text-strong)}
.lp-scope .btn-full{display:flex;width:100%}

/* --- Card --- */
.lp-scope .card{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--space-6);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.lp-scope .card-subtle{background:var(--surface-subtle)}
.lp-scope .card-accent{background:var(--surface-accent-soft);border-color:var(--blue-100)}
.lp-scope .card-inverse{background:var(--surface-inverse);border-color:transparent}
.lp-scope .card-interactive{cursor:pointer}
.lp-scope .card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* --- Badge --- */
.lp-scope .badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);
  border-radius:var(--radius-pill);
  line-height:1;
  white-space:nowrap;
  font-size:var(--fs-xs);
  padding:5px 12px;
}
.lp-scope .badge-accent{background:var(--surface-accent-soft);color:var(--blue-700)}
.lp-scope .hero .badge-accent{background:var(--white);border:1.5px solid var(--border-default);color:var(--blue-700)}
.lp-scope .badge-solid{background:var(--surface-accent);color:var(--text-on-accent)}

/* --- Section heading --- */
.lp-scope .section-heading{display:flex;flex-direction:column;gap:var(--space-3)}
.lp-scope .section-heading.align-center{text-align:center;align-items:center;max-width:720px;margin-inline:auto}
.lp-scope .section-heading .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-latin);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-500);
}
.lp-scope .section-heading .eyebrow::before{content:'';width:22px;height:2px;background:var(--blue-400);border-radius:2px}
.lp-scope .section-heading h2{font-size:var(--fs-h2);font-weight:var(--fw-black)}
.lp-scope .section-heading .lead{margin:0;font-size:var(--fs-lead);color:var(--text-muted);line-height:var(--lh-body)}

/* --- Chat bubble --- */
.lp-scope .chat-row{display:flex;flex-direction:column;gap:4px}
.lp-scope .chat-row.from-user{align-items:flex-end}
.lp-scope .chat-row.from-ai{align-items:flex-start}
.lp-scope .chat-name{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--font-display);padding:0 6px}
.lp-scope .chat-bubble{
  max-width:78%;padding:12px 18px;font-size:var(--fs-body);line-height:var(--lh-snug);
  box-shadow:var(--shadow-xs);
}
.lp-scope .from-user .chat-bubble{border-radius:18px 18px 6px 18px;background:var(--surface-inverse);color:var(--white)}
.lp-scope .from-ai .chat-bubble{border-radius:18px 18px 18px 6px;background:var(--surface-accent-soft);color:var(--gray-800)}

/* --- Icon --- */
.lp-scope .icon{font-size:28px;color:var(--blue-500);line-height:1}