/* Add class="ja-system" to the body or the application's outer wrapper. */
.ja-system { font-family:var(--ja-font); color:var(--ja-ink); background:var(--ja-white); font-size:var(--ja-text-base); line-height:var(--ja-leading-body); -webkit-font-smoothing:antialiased; }
.ja-system *, .ja-system *::before, .ja-system *::after { box-sizing:border-box; }
.ja-system :where(h1,h2,h3,p,figure) { margin:0; }
.ja-system :where(button,input,textarea,select) { font:inherit; }
.ja-system :where(a) { color:var(--ja-brand); text-underline-offset:4px; }
.ja-system :where(a,button,input,textarea,select,summary):focus-visible { outline:3px solid var(--ja-focus); outline-offset:4px; }
.ja-system ::selection { background:var(--ja-brand-soft); color:var(--ja-ink); }
.ja-container { width:min(var(--ja-container), calc(100% - var(--ja-gutter) * 2)); margin-inline:auto; }
.ja-section { padding-block:var(--ja-section-space); }
.ja-section-soft { background:var(--ja-surface); border-block:1px solid var(--ja-border); }
.ja-stack { display:flex; flex-direction:column; gap:var(--ja-space-6); }
.ja-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ja-space-3); }
.ja-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ja-space-8); }
.ja-grid > * { min-width:0; }
.ja-kicker { color:var(--ja-muted); font-size:var(--ja-text-xs); font-weight:700; line-height:1.6; letter-spacing:1.2px; text-transform:uppercase; }
.ja-display { font-size:var(--ja-text-display); line-height:1.13; font-weight:600; letter-spacing:-.045em; max-width:15ch; }
.ja-accent { color:var(--ja-brand); }
.ja-body { color:var(--ja-muted); font-size:var(--ja-text-base); line-height:var(--ja-leading-body); max-width:65ch; }
.ja-lead { font-size:var(--ja-text-lg); line-height:1.85; color:var(--ja-muted); max-width:52ch; }
.ja-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--ja-space-8); margin-bottom:var(--ja-space-10); }
.ja-section-heading h2 { font-size:var(--ja-text-section); line-height:var(--ja-leading-heading); letter-spacing:-.035em; font-weight:600; margin-top:var(--ja-space-4); }
.ja-section-heading > p { max-width:40ch; font-size:var(--ja-text-sm); color:var(--ja-muted); }
.ja-button { display:inline-flex; justify-content:center; align-items:center; gap:var(--ja-space-3); min-height:52px; padding:16px 24px; border:1px solid transparent; border-radius:var(--ja-radius-control); font-size:var(--ja-text-sm); font-weight:600; line-height:1.25; text-decoration:none; cursor:pointer; transition:background var(--ja-duration) var(--ja-easing), box-shadow var(--ja-duration) var(--ja-easing); touch-action:manipulation; }
.ja-button-primary { background:var(--ja-brand); color:var(--ja-white); }
.ja-button-primary:hover { background:var(--ja-brand-hover); box-shadow:var(--ja-shadow-button); }
.ja-button-secondary { background:var(--ja-white); border-color:var(--ja-border-strong); color:var(--ja-ink); }
.ja-button-secondary:hover { background:var(--ja-surface-raised); }
.ja-button:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }
.ja-button[aria-busy="true"] { cursor:wait; }
.ja-link { display:inline-flex; align-items:center; gap:var(--ja-space-2); min-height:44px; font-size:var(--ja-text-sm); font-weight:600; text-decoration:underline; }
.ja-card { background:var(--ja-white); border:1px solid var(--ja-border); border-radius:var(--ja-radius-card); overflow:hidden; min-width:0; }
.ja-card-body { padding:var(--ja-space-6); }
.ja-card h3 { font-size:var(--ja-text-card); font-weight:650; line-height:1.35; letter-spacing:-.028em; }
.ja-card h3 + p { margin-top:var(--ja-space-3); }
.ja-card-link { display:block; height:100%; color:inherit!important; text-decoration:none; transition:box-shadow var(--ja-duration),border-color var(--ja-duration); }
.ja-card-link:hover { border-color:var(--ja-border-strong); box-shadow:var(--ja-shadow-card); }
.ja-card-link:focus-visible { outline-offset:4px; }
.ja-card-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--ja-space-3); border-top:1px solid var(--ja-border); padding-top:var(--ja-space-4); margin-top:var(--ja-space-6); font-size:var(--ja-text-xs); color:var(--ja-muted); }
.ja-card-footer strong { font-size:var(--ja-text-sm); color:var(--ja-brand); }
.ja-media { background:var(--ja-media-surface); padding:var(--ja-space-6); aspect-ratio:1.8; overflow:hidden; }
.ja-media img { display:block; width:100%; height:100%; object-fit:contain; }
.ja-badge { display:inline-flex; align-items:center; gap:var(--ja-space-2); border:1px solid var(--ja-border-strong); border-radius:var(--ja-radius-badge); padding:5px 9px; font-size:var(--ja-text-xs); line-height:1.5; color:var(--ja-brand); background:var(--ja-brand-soft); }
.ja-badge-neutral { color:var(--ja-muted); background:var(--ja-surface); }
.ja-badge-success { color:var(--ja-success); background:var(--ja-success-soft); }
.ja-badge-error { color:var(--ja-error); background:var(--ja-error-soft); }
.ja-form-panel { padding:var(--ja-space-10); border:1px solid var(--ja-border); border-radius:var(--ja-radius-card); background:var(--ja-surface-raised); }
.ja-field { display:flex; flex-direction:column; gap:var(--ja-space-2); }
.ja-field label { font-size:var(--ja-text-sm); font-weight:700; }
.ja-field :where(input,select,textarea) { width:100%; min-height:50px; padding:13px 14px; border:1px solid var(--ja-control-border); border-radius:6px; color:var(--ja-ink); background:var(--ja-white); font-size:1rem; }
.ja-field textarea { min-height:150px; resize:vertical; line-height:1.6; }
.ja-field :where(input,textarea)::placeholder { color:var(--ja-muted); opacity:1; }
.ja-field [aria-invalid="true"] { border-color:var(--ja-error); }
.ja-field :disabled { background:var(--ja-surface); color:var(--ja-muted); cursor:not-allowed; }
.ja-field-note { color:var(--ja-muted); font-size:var(--ja-text-xs); line-height:1.6; }
.ja-field-error { color:var(--ja-error); font-size:var(--ja-text-xs); line-height:1.6; }
.ja-alert { padding:var(--ja-space-4); border-radius:var(--ja-radius-control); border:1px solid currentColor; background:var(--ja-brand-soft); color:var(--ja-brand); font-size:var(--ja-text-sm); line-height:1.7; }
.ja-alert-success { color:var(--ja-success); background:var(--ja-success-soft); }
.ja-alert-error { color:var(--ja-error); background:var(--ja-error-soft); }
.ja-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ja-skip { position:absolute; z-index:100; top:12px; left:12px; transform:translateY(-200%); padding:12px 16px; background:var(--ja-white); color:var(--ja-brand); border:1px solid var(--ja-brand); border-radius:6px; }
.ja-skip:focus { transform:none; }
@media (max-width:760px) {
  .ja-grid { grid-template-columns:1fr; gap:var(--ja-space-6); }
  .ja-section-heading { display:block; margin-bottom:var(--ja-space-8); }
  .ja-section-heading > p { margin-top:var(--ja-space-4); }
  .ja-card-body { padding:var(--ja-space-5); }
  .ja-form-panel { padding:var(--ja-space-6) var(--ja-space-5); }
  .ja-display { letter-spacing:-.035em; }
}
@media (prefers-reduced-motion:reduce) { .ja-system *, .ja-system *::before, .ja-system *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }