/* GENERATO da scripts/sync-design-system.mjs — non editare.
   CSS che ../design-system/_ds_bundle.js inietta in <head> al caricamento,
   nell'ordine reale di iniezione: feature, stat, step, badge, button, card, eyebrow, secthead, tag, field, select.
   Nel prototipo questi fogli arrivano dopo lo <style> di pagina. */

/* ---- <style data-bt="feature"> ---- */
.bt-feature{
  background:var(--surface-card);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:14px; height:100%;
  transition:box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}
.bt-feature--interactive{ cursor:pointer; }
.bt-feature--interactive:hover{ box-shadow:var(--shadow-lg); border-color:var(--bt-blue-200); transform:translateY(-3px); }
.bt-feature__icon{
  width:48px; height:48px; border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bt-blue-50); color:var(--bt-primary); flex:none;
}
.bt-feature__icon svg{ width:24px; height:24px; display:block; }
.bt-feature--solid .bt-feature__icon{ background:var(--bt-gradient-depth); color:#fff; }
.bt-feature__title{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--fs-h4); line-height:var(--lh-heading); color:var(--text-strong); margin:0;
}
.bt-feature__body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-muted); margin:0; }
.bt-feature__foot{ margin-top:auto; padding-top:4px; }


/* ---- <style data-bt="stat"> ---- */
.bt-stat{ display:flex; flex-direction:column; gap:6px; }
.bt-stat--center{ align-items:center; text-align:center; }
.bt-stat__value{
  font-family:var(--font-display); font-weight:var(--fw-extra);
  font-size:var(--fs-h1); line-height:1; letter-spacing:var(--ls-tight); color:var(--text-strong);
}
.bt-stat__value--gradient{
  background:var(--bt-gradient-signature-h);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bt-stat__label{ font-family:var(--font-body); font-size:var(--fs-body-sm); line-height:1.45; color:var(--text-muted); }
.bt-stat--inverse .bt-stat__value{ color:#fff; }
.bt-stat--inverse .bt-stat__label{ color:var(--bt-blue-100); }


/* ---- <style data-bt="step"> ---- */
.bt-step{ display:flex; flex-direction:column; gap:10px; }
.bt-step__head{ display:flex; align-items:center; gap:12px; }
.bt-step__num{
  width:36px; height:36px; border-radius:var(--radius-md); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:14px;
  background:var(--bt-blue-600); color:#fff;
}
.bt-step--ghost .bt-step__num{ background:var(--bt-blue-50); color:var(--bt-primary); border:var(--border-width) solid var(--bt-blue-200); }
.bt-step__icon{
  width:36px; height:36px; border-radius:var(--radius-md); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bt-blue-50); color:var(--bt-primary);
}
.bt-step__icon svg{ width:20px; height:20px; }
.bt-step__title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--text-strong); margin:0; }
.bt-step__body{ font-family:var(--font-body); font-size:var(--fs-body-sm); line-height:var(--lh-body); color:var(--text-muted); margin:0; }
.bt-step--inverse .bt-step__title{ color:#fff; }
.bt-step--inverse .bt-step__body{ color:var(--bt-blue-100); }


/* ---- <style data-bt="badge"> ---- */
.bt-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:12px; line-height:1; letter-spacing:.01em;
  padding:5px 10px; border-radius:var(--radius-pill);
  border:var(--border-width) solid transparent; white-space:nowrap;
}
.bt-badge--lg{ font-size:13px; padding:7px 14px; }
.bt-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

.bt-badge--neutral{ background:var(--bt-ink-100); color:var(--bt-ink-700); border-color:var(--bt-ink-200); }
.bt-badge--info{ background:var(--bt-info-bg); color:var(--bt-blue-700); border-color:var(--bt-info-border); }
.bt-badge--pass{ background:var(--bt-pass-bg); color:var(--bt-pass); border-color:var(--bt-pass-border); }
.bt-badge--alert{ background:var(--bt-alert-bg); color:#A9690E; border-color:var(--bt-alert-border); }
.bt-badge--action{ background:var(--bt-action-bg); color:var(--bt-action); border-color:var(--bt-action-border); }
.bt-badge--brand{ background:var(--bt-blue-600); color:#fff; }
.bt-badge--solid-pass{ background:var(--bt-pass); color:#fff; }
.bt-badge--solid-alert{ background:var(--bt-alert); color:#fff; }
.bt-badge--solid-action{ background:var(--bt-action); color:#fff; }


/* ---- <style data-bt="button"> ---- */
.bt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-button); line-height:1; white-space:nowrap;
  border:var(--border-width) solid transparent;
  cursor:pointer; text-decoration:none; user-select:none;
  will-change:transform;
  transition:background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
/* .bt-btn beats the base a:hover{text-decoration:underline} rule on specificity
   alone only when unvisited; :hover/:focus-visible/:active are re-asserted here
   explicitly so a button never shows an underline in any interaction state. */
.bt-btn:hover, .bt-btn:focus-visible, .bt-btn:active{ text-decoration:none; }
.bt-btn:hover{ transform:translateY(-2px); }
.bt-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bt-btn:active{ transform:translateY(0) scale(.97); transition-duration:var(--dur-fast); }
.bt-btn[disabled],.bt-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.bt-btn__icon{ display:inline-flex; width:1.15em; height:1.15em; }
.bt-btn__icon svg{ width:100%; height:100%; display:block; }

/* sizes — radius scales with height so all sizes read as the same visual roundness */
.bt-btn--sm{ height:36px; padding:0 14px; font-size:13px; border-radius:16px; }
.bt-btn--md{ height:44px; padding:0 22px; font-size:15px; border-radius:20px; }
.bt-btn--lg{ height:52px; padding:0 30px; font-size:16px; border-radius:24px; }
.bt-btn--full{ width:100%; }

/* variants */
.bt-btn--primary{ background:var(--bt-primary); color:var(--bt-primary-contrast); box-shadow:var(--shadow-sm); }
.bt-btn--primary:hover{ background:var(--bt-primary-hover); box-shadow:var(--shadow-md); }
.bt-btn--primary:active{ background:var(--bt-primary-active); }

.bt-btn--secondary{ background:var(--bt-blue-50); color:var(--bt-primary); border-color:var(--bt-blue-200); }
.bt-btn--secondary:hover{ background:var(--bt-blue-100); border-color:var(--bt-blue-300); }

.bt-btn--outline{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.bt-btn--outline:hover{ color:var(--bt-primary); border-color:var(--bt-primary); }

.bt-btn--ghost{ background:transparent; color:var(--bt-primary); }
.bt-btn--ghost:hover{ background:var(--bt-blue-50); }

/* for placement on the signature gradient / dark surfaces */
.bt-btn--inverse{ background:var(--bt-white); color:var(--bt-blue-700); box-shadow:var(--shadow-md); }
.bt-btn--inverse:hover{ background:var(--bt-blue-50); box-shadow:var(--shadow-lg); }
.bt-btn--inverse-ghost{ background:transparent; color:var(--bt-white); border-color:rgba(255,255,255,.5); }
.bt-btn--inverse-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }


/* ---- <style data-bt="card"> ---- */
.bt-card{
  background:var(--surface-card); color:var(--text-body);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:24px;
  transition:box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}
.bt-card--flat{ box-shadow:none; }
.bt-card--sm{ box-shadow:var(--shadow-sm); }
.bt-card--md{ box-shadow:var(--shadow-md); }
.bt-card--lg{ box-shadow:var(--shadow-lg); }
.bt-card--pad-sm{ padding:16px; }
.bt-card--pad-lg{ padding:32px; }
.bt-card--interactive{ cursor:pointer; }
.bt-card--interactive:hover{ box-shadow:var(--shadow-lg); border-color:var(--bt-blue-200); transform:translateY(-3px); }
/* Accent rail along the top edge, drawn in the signature gradient */
.bt-card--accent{ position:relative; overflow:hidden; }
.bt-card--accent::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--bt-gradient-signature-h);
}


/* ---- <style data-bt="eyebrow"> ---- */
.bt-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--bt-primary); line-height:1;
}
.bt-eyebrow--muted{ color:var(--text-muted); }
.bt-eyebrow--inverse{ color:var(--bt-blue-300); }
.bt-eyebrow__rule{ width:24px; height:2px; background:currentColor; opacity:.7; flex:none; }


/* ---- <style data-bt="secthead"> ---- */
.bt-secthead{ max-width:720px; }
.bt-secthead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.bt-secthead--center .bt-eyebrow{ justify-content:center; }
.bt-secthead__title{
  font-family:var(--font-display); font-weight:var(--fw-extra);
  font-size:var(--fs-h2); line-height:var(--lh-heading); letter-spacing:var(--ls-heading);
  color:var(--text-strong); margin:14px 0 0;
}
.bt-secthead__lead{
  font-family:var(--font-body); font-size:var(--fs-body-lg);
  line-height:var(--lh-relaxed); color:var(--text-muted); margin:16px 0 0;
}
.bt-secthead--inverse .bt-secthead__title{ color:#fff; }
.bt-secthead--inverse .bt-secthead__lead{ color:var(--bt-blue-100); }


/* ---- <style data-bt="tag"> ---- */
.bt-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-weight:var(--fw-semibold);
  font-size:13px; line-height:1; color:var(--text-body);
  padding:7px 12px; border-radius:var(--radius-sm);
  background:var(--surface-card); border:var(--border-width) solid var(--border-default);
  transition:border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.bt-tag--soft{ background:var(--bt-blue-50); border-color:transparent; color:var(--bt-blue-700); }
.bt-tag--interactive{ cursor:pointer; }
.bt-tag--interactive:hover{ border-color:var(--bt-primary); color:var(--bt-primary); }
.bt-tag__mark{ width:5px; height:5px; border-radius:50%; background:var(--bt-accent); flex:none; }


/* ---- <style data-bt="field"> ---- */
.bt-field{ display:flex; flex-direction:column; gap:7px; }
.bt-field__label{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:14px; color:var(--text-strong); }
.bt-field__req{ color:var(--bt-action); margin-left:2px; }
.bt-field__control{
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  height:46px; padding:0 14px; width:100%;
  background:var(--surface-card); border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea.bt-field__control{ height:auto; min-height:110px; padding:12px 14px; resize:vertical; line-height:var(--lh-body); }
.bt-field__control::placeholder{ color:var(--text-subtle); }
.bt-field__control:hover{ border-color:var(--border-strong); }
.bt-field__control:focus{ border-color:var(--bt-primary); box-shadow:var(--focus-ring); }
.bt-field__control:disabled{ background:var(--bt-ink-50); color:var(--text-subtle); cursor:not-allowed; }
.bt-field--error .bt-field__control{ border-color:var(--bt-action); }
.bt-field--error .bt-field__control:focus{ box-shadow:0 0 0 3px rgba(206,59,54,.35); }
.bt-field__hint{ font-family:var(--font-body); font-size:13px; color:var(--text-muted); }
.bt-field--error .bt-field__hint{ color:var(--bt-action); }


/* ---- <style data-bt="select"> ---- */
.bt-select{ display:flex; flex-direction:column; gap:7px; }
.bt-select__label{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:14px; color:var(--text-strong); }
.bt-select__wrap{ position:relative; }
.bt-select__control{
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  height:46px; padding:0 40px 0 14px; width:100%; appearance:none; -webkit-appearance:none;
  background:var(--surface-card); border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-md); outline:none; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.bt-select__control:hover{ border-color:var(--border-strong); }
.bt-select__control:focus{ border-color:var(--bt-primary); box-shadow:var(--focus-ring); }
.bt-select__chev{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); width:18px; height:18px; }
.bt-select__hint{ font-family:var(--font-body); font-size:13px; color:var(--text-muted); }