/* Dot-com bubble lesson. All rules scoped under .dtc-* */
.dtc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dtc-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.dtc-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the years */
.dtc-yrs { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.dtc-yr { font: 700 26px var(--sans); color: var(--text); text-align: center; letter-spacing: .01em; }
.dtc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: baseline; transition: border-color .3s, box-shadow .3s; }
.dtc-card span { font: 600 13px var(--sans); color: var(--dim); }
.dtc-card b { font: 700 22px var(--sans); color: var(--text); }
.dtc-bt { grid-column: 1 / -1; height: 14px; border-radius: 7px; background: rgba(169,155,255,.08); overflow: hidden; }
.dtc-bt i { display: block; height: 100%; width: 0; border-radius: 7px; transition: width .35s ease-out, background .3s; }
.dtc-on i { background: var(--mint); }
.dtc-nq i { background: var(--violet-bright); }
.dtc-yrs.peak .dtc-nq { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.dtc-yrs.peak .dtc-nq i { background: var(--gold); }
.dtc-yrs.fall .dtc-nq i { background: var(--red); }
.dtc-pk { grid-column: 1 / -1; font: 600 12px var(--sans); color: var(--gold); visibility: hidden; }
.dtc-yrs.seen .dtc-pk { visibility: visible; }
.dtc-on.lit { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }

/* Pets.com */
.dtc-g { width: 100%; max-width: 340px; }
.dtc-bagbox { width: 132px; filter: drop-shadow(0 12px 22px rgba(252,192,80,.22)); }
.dtc-ledger { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.dtc-ledger .gauge { width: 100%; }
.dtc-bag { display: block; width: 100%; height: auto; }
.dtc-bagbox.go { animation: dtcGo .5s ease-out; }
@keyframes dtcGo { 40% { transform: translateX(26px) rotate(6deg); opacity: .4; } 41% { transform: translateX(-20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dtc-bagb { fill: #C98B3A; stroke: #F0C27A; stroke-width: 2; }
.dtc-bagt { fill: #9E6A28; }
.dtc-paw { fill: #FFF1DA; }

/* Amazon */
.dtc-amz { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.dtc-row { display: flex; flex-direction: column; gap: 6px; }
.dtc-row > span { font: 600 13px var(--sans); color: var(--dim); }
.dtc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.dtc-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.dtc-col i { display: block; width: 100%; max-width: 64px; background: var(--mint); border-radius: 6px 6px 2px 2px; order: 2; flex-shrink: 0; }
.dtc-col em { font: 700 13px var(--sans); color: var(--text); font-style: normal; order: 1; }
.dtc-col small { font: 600 12px var(--sans); color: var(--faint); order: 3; }
.dtc-px { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.dtc-pxbar { height: 22px; border-radius: 6px; background: rgba(169,155,255,.08); overflow: hidden; }
.dtc-pxbar i { display: block; height: 100%; width: 100%; background: var(--violet-bright); border-radius: 6px; }
.dtc-amz.low .dtc-pxbar i { background: var(--red); }
.dtc-px b { font: 700 20px var(--sans); color: var(--text); min-width: 52px; text-align: right; }
.dtc-back { font: 700 14px var(--sans); color: var(--mint); text-align: center; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }

@media (max-height: 700px) {
  .dtc-hero img { max-height: 30vh; }
  .dtc-yr { font-size: 22px; }
  .dtc-card { padding: 8px 10px; }
  .dtc-bagbox { width: 100px; }
}