/* Стили статей блога «Первые деньги». Подключается во всех материалах. */
:root{
  --teal-950:#052B2A; --teal-800:#0A4744; --teal-700:#0F6259;
  --gold-500:#F2B705; --gold-600:#D69E00;
  --paper-050:#FBF6EC; --card-050:#FFFFFF;
  --ink-900:#16241F; --ink-600:#4E5D56; --line:#E4DBC8;
  --accent:#0F6259;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --paper-050:#0B1512; --card-050:#10221F; --ink-900:#EDEAE2; --ink-600:#B7C4BD; --line:#20342F; --accent:#7FBFB2; color-scheme: dark; }
}
:root[data-theme="dark"]{ --paper-050:#0B1512; --card-050:#10221F; --ink-900:#EDEAE2; --ink-600:#B7C4BD; --line:#20342F; --accent:#7FBFB2; color-scheme: dark; }
:root[data-theme="light"]{ --paper-050:#FBF6EC; --card-050:#FFFFFF; --ink-900:#16241F; --ink-600:#4E5D56; --line:#E4DBC8; --accent:#0F6259; color-scheme: light; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper-050); color:var(--ink-900);
  font-family:'PT Sans',-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.display{ font-family:'Unbounded',sans-serif; font-weight:800; letter-spacing:-0.01em; text-wrap:balance; }
.label{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; }
a{ color:inherit; }
img{ max-width:100%; display:block; height:auto; }
.wrap{ max-width:680px; margin:0 auto; padding:0 24px; }

.topnav{ background:var(--card-050); border-bottom:1px solid var(--line); }
.topnav-inner{ max-width:680px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topnav-logo{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink-900); text-decoration:none; white-space:nowrap; }
.topnav-links{ display:flex; gap:16px; }
.topnav-links a{ font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--ink-600); text-decoration:none; white-space:nowrap; }
.topnav-links a:hover, .topnav-links a.active{ color:var(--accent); }

.hero{
  background: radial-gradient(ellipse 120% 60% at 15% 0%, rgba(242,183,5,0.16), transparent 55%),
              linear-gradient(165deg, var(--teal-700) 0%, var(--teal-950) 78%);
  color:#F4EFE2; padding:46px 0 40px;
}
.hero-inner{ display:flex; flex-direction:column; gap:16px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-500); }
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); }
.hero h1{ font-size:clamp(1.6rem, 4.2vw + 0.5rem, 2.25rem); line-height:1.18; margin:0; color:#FBF6EC; }
.hero p.sub{ font-size:1.04rem; color:#CFE3DD; margin:0; max-width:48ch; }

figure{ margin:26px 0 0; }
figure img{ border-radius:16px; border:1px solid var(--line); }
figcaption{ font-size:0.88rem; color:var(--ink-600); margin-top:9px; font-family:'JetBrains Mono',monospace; }

section{ padding:34px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
h2{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.3rem; margin:0 0 14px; }
h3{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.05rem; margin:22px 0 10px; }
p{ margin:0 0 15px; } p:last-child{ margin-bottom:0; }
.muted{ color:var(--ink-600); }
ul,ol{ margin:0 0 15px; padding-left:22px; }
li{ margin-bottom:9px; } li:last-child{ margin-bottom:0; }

.note{ background:var(--card-050); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:18px 0; }
.note-title{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.note.warn{ border-color:#B4451F; }
.note.warn .note-title{ color:#B4451F; }

.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.steps li{ display:flex; gap:13px; align-items:flex-start; background:var(--card-050); border:1px solid var(--line); border-radius:13px; padding:14px 16px; margin:0; }
.steps .n{ flex:none; width:27px; height:27px; border-radius:8px; background:var(--teal-700); color:#F4EFE2;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; }

.tbl-wrap{ overflow-x:auto; margin:16px 0; }
table{ width:100%; border-collapse:collapse; min-width:420px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:0.96rem; vertical-align:top; }
th{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-600); }

.related{ background:var(--card-050); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:20px 0 0; }
.related b{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-600); display:block; margin-bottom:10px; }
.related ul{ margin:0; padding-left:20px; }
.related a{ color:var(--accent); }

.bridge-card{ background:linear-gradient(165deg, var(--teal-700), var(--teal-950)); color:#F4EFE2; border-radius:18px; padding:28px 26px; text-align:center; }
.bridge-card h2{ color:#FBF6EC; margin-bottom:12px; }
.bridge-card p{ color:#CFE3DD; }
.cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--gold-500); color:#22190A;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1rem; padding:15px 26px; border-radius:12px;
  text-decoration:none; margin:18px auto 0; box-shadow:0 10px 24px -10px rgba(242,183,5,0.55); }
.cta-btn:hover{ background:var(--gold-600); }
.cta-btn:focus-visible{ outline:3px solid #F4EFE2; outline-offset:3px; }
.cta-note{ font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:#AFC7C0; display:inline-block; margin-top:10px; }

footer{ padding:34px 0 52px; text-align:center; }
.back-link{ font-family:'JetBrains Mono',monospace; font-size:0.84rem; color:var(--ink-600); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.back-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

@media (max-width:520px){
  .wrap{ padding:0 18px; }
  .note,.related{ padding:16px 17px; }
}

/* Блок расчёта: используется там, где показываем, как считается число */
.calc{ background:var(--card-050); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:18px 0; }
.calc-line{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; flex-wrap:wrap; }
.calc-line + .calc-line{ border-top:1px dashed var(--line); }
.calc-line b{ font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.calc-total b{ color:var(--accent); font-size:1.15rem; }