/* ===========================================================
   Статья «Сколько в DeFi можно зарабатывать при капитале
   от $10 000» — /defi-income/

   Здесь только стили самой статьи. Шрифты — общий static/css/fonts.css
   (@font-face, подключать ПЕРВЫМ); копировать их сюда нельзя — правило
   в templates/landings/CLAUDE.md.
   Футера у страницы нет: статья заканчивается последней карточкой.
   =========================================================== */


/* =========================================================================
   DeFi-БАЗА — design tokens
   (из дизайн-системы: colors / typography / radii)
   ========================================================================= */
:root{
  /* ---- Base palette ---- */
  --grey-100:rgb(255,255,255);
  --grey-200:rgb(245,245,245);
  --grey-300:rgb(235,235,235);
  --grey-800:rgb(47,47,49);
  --black:rgb(0,0,0);

  --lime-400:rgb(190,235,113);

  /* ---- Surfaces ---- */
  --surface-page:var(--grey-300);
  --surface-card:var(--grey-100);
  --surface-soft:var(--grey-200);
  --surface-invert:var(--black);

  /* ---- Text ---- */
  --text-strong:var(--black);
  --text-body:var(--grey-800);
  --text-on-invert:var(--grey-100);
  --text-accent-on-invert:var(--lime-400);

  /* ---- Lines ---- */
  --line-hairline:rgba(47,47,49,0.1);
  --line-divider:rgba(47,47,49,0.18);

  /* ---- Families ---- */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"PT Mono","SF Mono",ui-monospace,monospace;

  /* ---- Weights ---- */
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* ---- Radii ---- */
  --radius-card:32px;
  --radius-card-sm:28px;
  --radius-tile:18px;
  --radius-pill:100px;
  --radius-round:50%;
  --radius-highlight:10px;

}

/* =========================================================================
   Base
   ========================================================================= */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--surface-page);
  font-family:var(--font-sans);
  color:var(--text-strong);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{margin:0;}

/* =========================================================================
   Page layout
   ========================================================================= */
.page{
  background:var(--surface-page);
  min-height:100vh;
  padding:clamp(24px,6vw,50px) 16px 96px;
  box-sizing:border-box;
}
.article{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Section = white card */
.card{
  background:var(--surface-card);
  border-radius:var(--radius-card);
  padding:clamp(28px,6vw,56px);
  display:flex;
  flex-direction:column;
  gap:28px;
  position:relative;
}

/* Text group inside a card */
.prose{
  display:flex;
  flex-direction:column;
  gap:20px;
  font-size:18px;
  line-height:1.65;
  text-wrap:pretty;
  color:var(--text-strong);
  position:relative;
}

strong{font-weight:var(--weight-semibold);color:var(--text-strong);}

/* =========================================================================
   Typography
   ========================================================================= */
.h1{
  margin:0;
  font-weight:var(--weight-medium);
  font-size:clamp(32px,5vw,46px);
  line-height:1.1;
  letter-spacing:-1.2px;
  color:var(--text-strong);
  text-wrap:pretty;
}
.h2{
  margin:0;
  font-weight:var(--weight-medium);
  font-size:clamp(28px,4.2vw,36px);
  line-height:1.1;
  letter-spacing:-1px;
  color:var(--text-strong);
  text-wrap:pretty;
}
.h3{
  margin:0;
  font-weight:var(--weight-medium);
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.5px;
  color:var(--text-strong);
  text-wrap:pretty;
}
.lead{font-size:18px;line-height:1.55;color:var(--text-strong);}
/* Лид вне .prose — тот же кегль, но межстрочный как в основном тексте. */
.lead--loose{line-height:1.65;text-wrap:pretty;}
.strong-line{font-weight:var(--weight-bold);color:var(--text-strong);}
.accent-phrase{
  font-size:clamp(20px,2.6vw,23px);
  line-height:1.4;
  font-weight:var(--weight-medium);
  letter-spacing:-0.3px;
  color:var(--text-strong);
  text-wrap:pretty;
}

/* Mono label */
.mono-label{
  font-family:var(--font-mono);
  font-weight:var(--weight-bold);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-strong);
}

/* =========================================================================
   Image placeholder
   ========================================================================= */
/* Слот под картинку: высоту держит aspect-ratio модификатора, картинка
   растянута внутрь абсолютом. */
.placeholder{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-tile);
}
.placeholder--cover{aspect-ratio:32/9;}
.placeholder--wide{aspect-ratio:21/9;}
.placeholder--product{aspect-ratio:16/9;}
/* Slightly taller wide slot: 688×313 at full column width. */
.placeholder--tall{aspect-ratio:688/313;}
.placeholder .slot-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Без aspect-ratio (iOS Safari < 15, Android WebView/Chrome < 88, in-app webview)
   высота слота обнулилась бы вместе с картинкой — держим пропорцию ratio-хаком. */
@supports not (aspect-ratio: 1 / 1){
  .placeholder--cover{height:0;padding-bottom:calc(9 / 32 * 100%);}
  .placeholder--wide{height:0;padding-bottom:calc(9 / 21 * 100%);}
  .placeholder--product{height:0;padding-bottom:calc(9 / 16 * 100%);}
  .placeholder--tall{height:0;padding-bottom:calc(313 / 688 * 100%);}
}

/* =========================================================================
   Chips
   ========================================================================= */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-weight:var(--weight-bold);
  font-size:12px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  white-space:nowrap;
  min-height:32px;
}
.chip--dark{
  background:var(--surface-invert);
  color:var(--text-accent-on-invert);
  border:1px solid transparent;
}
.chip--soft{
  background:var(--surface-soft);
  color:var(--text-body);
  border:1px solid var(--line-hairline);
}

/* =========================================================================
   Lime highlight behind headline text
   ========================================================================= */
.highlight{
  position:relative;
  display:inline-block;
  isolation:isolate;
  padding:0 8px;
}
.highlight::before{
  content:"";
  position:absolute;
  inset:6px -4px 4px -4px;
  background:var(--lime-400);
  border-radius:var(--radius-highlight);
  z-index:-1;
}

/* =========================================================================
   Intro — three columns
   ========================================================================= */
.tri{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  row-gap:28px;
}
.tri__col{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tri__col--1{padding-right:24px;}
.tri__col--2{padding:0 24px;border-left:1px solid var(--line-divider);}
.tri__col--3{padding-left:24px;border-left:1px solid var(--line-divider);}
.tri__title{font-weight:var(--weight-bold);color:var(--text-strong);font-size:16px;}
.tri__text{font-size:16px;line-height:1.55;text-wrap:pretty;}

/* Arrow list ("Где-то…") */
.arrow-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.arrow-list li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
}
.arrow-list .arrow{color:var(--text-strong);font-weight:var(--weight-semibold);}

/* =========================================================================
   Market-phase table
   ========================================================================= */
.phases{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line-divider);
}
.phases__row{
  display:grid;
  grid-template-columns:minmax(110px,150px) minmax(0,1fr);
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line-divider);
}
.phases__label{
  font-family:var(--font-mono);
  font-weight:var(--weight-bold);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-strong);
  padding-top:6px;
}

/* =========================================================================
   Quote
   ========================================================================= */
.quote{
  border-left:4px solid var(--black);
  padding-left:20px;
  font-style:italic;
}

/* =========================================================================
   "Вывод" plate (black)
   ========================================================================= */
.callout{
  background:var(--surface-invert);
  border-radius:var(--radius-card-sm);
  padding:clamp(24px,4.5vw,40px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.callout__label{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-weight:var(--weight-bold);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--lime-400);
}
.callout__dot{
  width:8px;
  height:8px;
  border-radius:var(--radius-round);
  background:var(--lime-400);
  flex:none;
}
.callout__text{
  font-size:clamp(20px,2.6vw,23px);
  line-height:1.45;
  font-weight:var(--weight-medium);
  letter-spacing:-0.3px;
  color:var(--text-on-invert);
  text-wrap:pretty;
}

/* =========================================================================
   Numbered rules (01 / 02 / 03)
   ========================================================================= */
.rules{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rule{
  background:var(--surface-soft);
  border:1px solid var(--line-hairline);
  border-radius:var(--radius-tile);
  padding:clamp(20px,3.5vw,28px);
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.rule__num{
  width:40px;
  height:40px;
  border-radius:var(--radius-round);
  background:var(--surface-invert);
  color:var(--lime-400);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:var(--weight-bold);
  font-size:14px;
}
.rule__text{font-size:17px;line-height:1.6;text-wrap:pretty;}

/* Emoji marker before a bold lead-in */
.emoji{margin-right:6px;}

/* =========================================================================
   Reasons (Причина 1 / 2 / 3)
   ========================================================================= */
.reasons{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.reason{
  padding:16px 0 28px;
  border-bottom:1px solid var(--line-divider);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.reason__text{font-size:17px;line-height:1.6;text-wrap:pretty;}

/* =========================================================================
   "Ориентир" plate (soft)
   ========================================================================= */
.benchmark{
  background:var(--surface-soft);
  border:1px solid var(--line-hairline);
  border-radius:var(--radius-tile);
  padding:clamp(22px,4vw,32px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.benchmark__text{
  font-size:clamp(22px,3vw,26px);
  line-height:1.3;
  font-weight:var(--weight-medium);
  letter-spacing:-0.5px;
  color:var(--text-strong);
  text-wrap:pretty;
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* Below 720px the three intro columns go straight into a single stacked
   column, skipping the intermediate 2-column state the auto-fit grid would
   otherwise land in (~660–720px), and the vertical dividers become horizontal
   ones. */
@media (max-width:720px){
  .tri{grid-template-columns:1fr;}
  .tri__col--1{padding-right:0;}
  .tri__col--2,
  .tri__col--3{
    padding:24px 0 0 0;
    border-left:none;
    border-top:1px solid var(--line-divider);
  }
}

/* Market-phase table: stack label above text on very narrow screens. */
@media (max-width:420px){
  .phases__row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .phases__label{padding-top:0;}
}

/* Full-bleed on small screens: white cards span the whole width, giving the
   content more room. The grey page background is kept only as a thin
   horizontal strip between cards (the 16px gap) and around the stack, so the
   blocks still read as separated. */
@media (max-width:420px){
  .page{
    padding:16px 0;          /* no side gutter; 16px grey band top & bottom */
  }
  .card{
    border-radius:0;          /* white band goes edge to edge */
    padding:28px 16px;        /* 16px text inset from the screen edge */
    gap:24px;
  }
}