/* Ember Ledger — component styles. Load after tokens.css. All values come from tokens. */

.el-root { font-family: var(--font-inter); color: var(--color-graphite); background: var(--color-canvas-white); -webkit-font-smoothing: antialiased; }

/* Buttons — sharp, flat, PolySans labels */
.el-btn { display: inline-flex; align-items: center; gap: var(--spacing-8); font-family: var(--font-polysans); font-size: 16px; line-height: 1; font-weight: 400; letter-spacing: -0.02em; padding: 10px var(--spacing-20); border-radius: var(--radius-buttons); border: 1px solid var(--color-graphite); cursor: pointer; text-decoration: none; box-shadow: none; transition: background-color .15s ease, color .15s ease; }
.el-btn--primary { background: var(--color-graphite); color: var(--color-canvas-white); }
.el-btn--primary:hover { background: var(--color-steel); border-color: var(--color-steel); }
.el-btn--ghost { background: transparent; color: var(--color-graphite); }
.el-btn--ghost:hover { background: var(--color-ash); }
.el-btn:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }
.el-btn[disabled] { color: var(--color-slate); border-color: var(--color-mist); background: var(--color-fog); cursor: not-allowed; }

/* Navigation pill */
.el-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--element-gap); }
.el-nav__brand { font-family: var(--font-polysans); font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--color-graphite); text-decoration: none; }
.el-nav__pill { display: inline-flex; align-items: center; gap: var(--element-gap); background: var(--color-ash); border-radius: var(--radius-nav-pills); padding: var(--spacing-8) 18px; }
.el-nav__item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-polysans); font-size: 16px; line-height: 1.13; letter-spacing: -0.02em; color: var(--color-graphite); text-decoration: none; padding: 6px 0; }
.el-nav__item svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.el-nav__item[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-underline-offset: 3px; }
.el-nav__item:focus-visible, .el-nav__lang:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; border-radius: var(--radius-sm); }
.el-nav__end { display: inline-flex; align-items: center; gap: var(--element-gap); }
.el-nav__lang { font-family: var(--font-polysans); font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--color-slate); text-decoration: none; }

/* Links */
.el-link { color: var(--color-graphite); text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.el-link:hover { text-decoration-thickness: 2px; }
.el-link:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }
.el-link--utility { font-family: var(--font-polysans); font-size: 13px; letter-spacing: -0.02em; color: var(--color-slate); text-decoration: none; }
.el-link--utility:hover { color: var(--color-graphite); }

/* Tags */
.el-tag { display: inline-flex; align-items: center; font-family: var(--font-inter); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-brass); background: var(--color-fog); border-radius: var(--radius-tags); padding: 6px var(--spacing-12); }
.el-tag--outline { background: transparent; border: 1px solid var(--color-mist); color: var(--color-steel); }
.el-tag--ink { background: var(--color-graphite); color: var(--color-canvas-white); }

/* Feature card — the asymmetric signature */
.el-feature { background: var(--color-ash); border-radius: var(--radius-asymmetric-card) 0 0 0; padding: 70px var(--spacing-40) var(--spacing-40) var(--spacing-60); box-shadow: none; }
.el-feature--ivory { background: var(--color-ivory); }
.el-feature__title { font-family: var(--font-polysans); font-size: 32px; line-height: 1.19; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 var(--spacing-16); }
.el-feature__body { font-size: 18px; line-height: 1.25; color: var(--color-steel); margin: 0; max-width: 46ch; }

/* Data dashboard card */
.el-data { background: var(--color-canvas-white); border-radius: var(--radius-2xl); padding: var(--card-padding); box-shadow: none; }
.el-data__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.el-data__title { font-family: var(--font-polysans); font-weight: 400; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; margin: 0; }
.el-data__meta { font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--color-steel); }
.el-data__value { font-family: var(--font-polysans); font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; }
.el-data__delta { font-size: 12px; line-height: 1.15; color: var(--color-brass); }
.el-chart .grid { stroke: var(--color-mist); stroke-width: 1; }
.el-chart .primary { stroke: var(--color-ember-orange); stroke-width: 2; fill: none; }
.el-chart .secondary { stroke: var(--color-brass); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.el-chart .track { stroke: var(--color-ash); fill: none; }
.el-chart .axis { font-family: var(--font-polysans); font-size: 12px; fill: var(--color-steel); }

/* Hero */
.el-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-40); align-items: center; }
.el-hero__title { font-family: var(--font-polysans); font-size: 66px; line-height: 0.91; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 var(--spacing-36); }
.el-hero__lead { font-size: 18px; line-height: 1.25; color: var(--color-steel); margin: 0 0 var(--spacing-36); max-width: 40ch; }
.el-hero__actions { display: flex; gap: var(--spacing-12); flex-wrap: wrap; }
@media (max-width: 720px) { .el-hero { grid-template-columns: 1fr; } .el-hero__title { font-size: 40px; line-height: 1.2; } }

/* Partner logo strip */
.el-logos__caption { font-family: var(--font-polysans); font-size: 13px; line-height: 1.38; letter-spacing: -0.02em; color: var(--color-brass); margin: 0 0 var(--spacing-20); }
.el-logos__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--element-gap) var(--spacing-40); }
.el-logos__slot { height: 28px; display: inline-flex; align-items: center; color: var(--color-graphite); }