/* AscendTaxes shared components — presentation only.
   Buttons, inputs, cards, tables, pills, metrics, sheets, empty/error/skeletons.
   Does not replace page CSS. Additive, then migrate. */
.asc-btn,.btn{
  border-radius:12px;
}
.btn.pri{box-shadow:var(--e-1,0 1px 2px rgba(6,32,63,.06))}
.card{border-radius:16px}
.cc-more-sheet,.cc-modal .sheet{border-radius:20px}

/* Metric pair — use whitespace, not a card wall */
.lx-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 24px;
  margin:20px 0 8px;
  padding:16px 0 4px;
  border-top:1px solid var(--line,rgba(255,255,255,.065));
}
.lx-m{min-width:0}
.lx-m .k{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--txt-3,var(--ascend-txt-3,#8592ac));
  margin-bottom:6px;
}
.lx-m .v{
  display:block;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--txt,var(--ascend-txt,#EAF0FA));
  line-height:1.15;
}
.lx-m .v.pos{color:var(--good,var(--ascend-ok,#1F9D63))}
.lx-m .v.neg{color:var(--danger,var(--ascend-error,#E5484D))}
.lx-m .s{
  display:block;
  font-size:12px;
  color:var(--txt-3,var(--ascend-txt-3,#8592ac));
  margin-top:4px;
  line-height:1.4;
}

.lx-trust{
  margin:12px 0 4px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--txt-3,var(--ascend-txt-3,#8592ac));
  font-weight:500;
}
.lx-hero.is-scenario{
  box-shadow:inset 0 0 0 1px rgba(200,162,75,.38);
}
.lx-scenario-flag{
  display:none;
  margin:10px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--warn,var(--ascend-amber,#C8A24B));
  letter-spacing:-.01em;
}
.lx-hero.is-scenario .lx-scenario-flag{display:block}

.asc-empty,.empty{
  text-align:left;
}
.ai-badge{
  color:var(--ascend-blue,#0B5DAE);
  background:var(--ascend-soft,#E7F0FB);
}
.asc-skel{
  height:12px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(127,178,236,.12),rgba(127,178,236,.22),rgba(127,178,236,.12));
  background-size:200% 100%;
  animation:ascSkel 1.2s ease-out infinite;
}
@keyframes ascSkel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .asc-skel{animation:none;background:rgba(127,178,236,.14)}
  .btn,.card.tap,.nav-item,.pill,.chip,.action{transition:none}
}

/* Product story on marketing — no fabricated dashboard */
.asc-know{
  padding:80px 0 48px;
  background:var(--ascend-mkt-surface,#0B1426);
  border-top:1px solid rgba(148,178,255,.1);
  border-bottom:1px solid rgba(148,178,255,.1);
  scroll-margin-top:80px;
}
.asc-know .steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:32px;
}
.asc-know .step{
  padding:4px 8px 4px 20px;
  border-left:2px solid rgba(21,116,209,.45);
  text-align:left;
}
.asc-know .step h3{
  font-family:var(--ff-display,'Space Grotesk',system-ui,sans-serif);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-.03em;
  margin:0 0 10px;
}
.asc-know .step .n{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ascend-interactive,#1574D1);
  margin-bottom:12px;
}
.asc-know .step p{
  color:var(--muted,#93a1b8);
  font-size:.95rem;
  line-height:1.6;
  margin:0;
}

@media(max-width:1024px){
  .lx-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .asc-know{padding:48px 0 32px}
  .asc-know .steps{grid-template-columns:1fr;gap:24px}
  .asc-know .sec-title{font-size:1.7rem}
  .lx-metrics{grid-template-columns:1fr;gap:16px}
  .btn.pri,.nba .btn,.lx-hero .btn{
    min-height:44px;
  }
  .lx-hero .big-num{font-size:42px}
  .lxr{height:44px}
}
@media(max-width:480px){
  .lx-hero .big-num,.big-num{font-size:40px}
  .lx-out .row,.ltb-line{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .lx-out .row .rt,.ltb-line span{
    white-space:normal;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-weight:700;
  }
  .lx-out .row .rv,.ltb-line b,.as-v,.dv,.stat-card .sv{
    font-size:20px;
    font-family:var(--ff-ui,Inter,system-ui,sans-serif);
    font-variant-numeric:tabular-nums;
  }
}
@media(max-width:390px){
  .asc-know{padding:36px 0 24px}
  .asc-know .sec-title{font-size:1.4rem;letter-spacing:-.03em}
  .asc-know .step h3{font-size:1.15rem}
  .asc-know .hero-ctas{flex-direction:column;align-items:stretch}
  .asc-know .hero-ctas .btn{width:100%;min-height:44px;justify-content:center}
  .lx-hero .big-num,.big-num{font-size:32px;letter-spacing:-.04em}
  .lx-head{flex-direction:column;align-items:stretch}
}