.article-intro{padding-bottom:22px}
.article-library{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:8px 0 58px
}
.article-tile{
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:flex-start;
  padding:25px;
  color:var(--ink);
  border:1px solid #e7dfea;
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.article-tile.feature{
  grid-row:span 2;
  justify-content:flex-end;
  min-height:530px;
  color:#fff;
  background:radial-gradient(circle at 82% 12%,rgba(255,140,34,.38),transparent 32%),linear-gradient(145deg,#211329,#5f167c)
}
.article-tile>span{
  color:#721c91;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.14em
}
.article-tile.feature>span{color:#ffb06d}
.article-tile h2{
  margin:14px 0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(1.32rem,2vw,1.75rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.042em
}
.article-tile.feature h2{font-size:clamp(1.6rem,2.7vw,2.45rem)}
.article-tile p{color:var(--text-soft);font-size:15px;line-height:1.6}
.article-tile.feature p{color:#e4dce7}
.article-tile b{margin-top:auto;color:#721c91}
.article-tile.feature b{color:#ffb06d}
.article-tile:hover{
  transform:translateY(-3px);
  border-color:#cfaedb;
  box-shadow:0 18px 42px rgba(89,38,105,.12)
}
.light-button{color:#fff!important;border-color:rgba(255,255,255,.35)!important}
.article-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:44px;
  align-items:start
}
.toc{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:16px;
  border:1px solid #e7dfea;
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:var(--shadow-soft)
}
.toc b{
  margin-bottom:4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em
}
.toc a{color:var(--muted);font-size:13px;text-decoration:none}
.toc a:hover{color:var(--green);text-decoration:underline}
.article-long{width:100%;max-width:none}
.article-long>section:first-child{padding-top:0}
.key-point,.limits-box{
  margin:20px 0;
  padding:18px 20px;
  border-radius:14px
}
.key-point{background:linear-gradient(120deg,#fff0df,#f1e8fb)}
.limits-box{background:#fff0e5}
.key-point p,.limits-box p{margin:5px 0 0;color:var(--ink)}
.benefit-grid,.category-checks,.market-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px
}
.benefit-grid>div,.category-checks>div,.market-grid>div,.source-flow>div{
  padding:17px;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:var(--shadow-soft)
}
.benefit-grid p,.category-checks p,.market-grid p{
  margin:5px 0 0;
  font-size:14px
}
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  overscroll-behavior-x:contain
}
.table-scroll:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.decision-table{
  width:100%;
  min-width:660px;
  border:0;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  text-align:left
}
.decision-table th,.decision-table td{
  padding:13px 15px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:400;
  vertical-align:top
}
.decision-table thead th{
  color:#fff;
  background:var(--dark);
  font-weight:750
}
.decision-table tbody th{font-weight:700}
.decision-table tr>*:last-child{border-right:0}
.decision-table tbody tr:last-child>*{border-bottom:0}
.decision-table th:first-child{width:22%}
.decision-table.compact th:first-child{width:24%}
.steps-vertical{margin:0;padding:0;list-style:none}
.steps-vertical li{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}
.steps-vertical span{color:var(--muted)}
.article-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:21px}
.pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.pass-grid>div{
  padding:18px;
  color:#fff;
  border-radius:var(--radius-card);
  background:linear-gradient(145deg,#26132f,#6a1c84)
}
.pass-grid span{
  color:#ffad68;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.12em
}
.pass-grid p{color:#c9d9dc;font-size:14px}
.source-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin:19px 0
}
.source-flow>div{
  display:flex;
  min-height:92px;
  flex-direction:column;
  justify-content:center
}
.source-flow span{color:var(--muted);font-size:13px}
.source-flow i{color:var(--green);font-style:normal;font-weight:900}
.home-articles{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:5px 0 0
}
.home-articles .article-tile{min-height:240px}
.home-articles .article-tile h2{font-size:1.35rem}

@media(max-width:850px){
  .article-layout{grid-template-columns:1fr;gap:16px}
  .toc{position:static;display:grid;grid-template-columns:repeat(2,1fr)}
  .article-library,.home-articles{grid-template-columns:1fr}
  .article-tile.feature{grid-row:auto;min-height:360px}
  .home-articles .article-tile{min-height:205px}
  .footer-links{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .benefit-grid,.category-checks,.market-grid,.pass-grid{grid-template-columns:1fr}
  .steps-vertical li{grid-template-columns:1fr;gap:4px}
  .source-flow{grid-template-columns:1fr}
  .source-flow i{transform:rotate(90deg);text-align:center}
  .toc{grid-template-columns:1fr}
  .article-actions{flex-direction:column}
  .article-actions .button{width:100%}
  .article-library{padding-bottom:40px}
  .article-tile{min-height:220px;padding:21px}
  .article-tile.feature{min-height:310px}
  .article-layout,.article-long{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .article-tile{transition:none}
  .article-tile:hover{transform:none}
}
