/* Tokens live in tokens.css (loaded first in why_en.html). --prot used to be
   #3b82e0 here vs #5090e6 in index.html; consolidated onto index.html's
   value (used there 6x vs 1x here, a purely decorative accent). */
    *{box-sizing:border-box}
    /* Фокус с клавиатуры (аудит №13, ТЗ-4) — единое правило на всех страницах. */
    :where(button, .btn, a, input, select, textarea, summary, [tabindex]):focus-visible {
      outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); }
    /* Respect the "reduce motion" system setting (see index.css/passport.css/
       raceplan.css) — one safety-net rule in case of animations/transitions. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:0.01ms !important; animation-iteration-count:1 !important;
        transition-duration:0.01ms !important; scroll-behavior:auto !important;
      }
    }
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-size:var(--fs-md); line-height:var(--lh-prose); font-family:var(--font-sans);
      -webkit-font-smoothing:antialiased;
    }
    .num{font-variant-numeric:tabular-nums}
    /* Reviewer decision 07.10 §1: 680px at every width (was 760). */
    .wrap{max-width:680px; margin:0 auto; padding:0 16px 80px}
    a{color:var(--acc-text); text-decoration:none}

    /* top nav row — same masthead language as /plan etc. (D1); markup here
       is this hub page's own (why_en.html, not one of the restricted 17), so
       the wordmark/back link text changed directly in the template. */
    .top{display:flex; align-items:center; justify-content:space-between;
         padding:16px 0; position:sticky; top:0; background:var(--bg); z-index:5;
         border-bottom:1px solid var(--pl); margin-bottom:8px}
    .top .mark{order:-1; font-family:var(--font-head); font-weight:var(--fw-brand); font-size:1.375rem;
               letter-spacing:-.005em; color:var(--ink)}
    .top a.back{color:var(--mut); font-weight:500; font-size:var(--fs-sm)}
    .top a.back:hover{color:var(--ink)}

    /* hero */
    .hero{padding:24px 0 8px}
    .hero h1{font-family:var(--font-head); font-weight:var(--fw-head); font-size:var(--fs-4xl); line-height:1.15; margin:0 0 12px; letter-spacing:-.3px}
    .hero p{color:var(--ink); font-size:var(--fs-md); line-height:var(--lh-prose); margin:0; max-width:62ch}

    /* table of contents */
    .toc{display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; margin:24px 0 8px}
    .toc a{
      display:flex; align-items:center; gap:8px; min-height:var(--tap-min);
      background:none; border:0; border-radius:0; min-width:0;
      padding:8px 0; font-size:var(--fs-md); font-weight:600; color:var(--ink);
    }
    .toc a:hover, .toc a:focus-visible{color:var(--acc-text)}

    /* section card → section (D2): no frame, hairline divider on top. */
    .card{
      background:none; border:0; border-radius:0;
      padding-block:var(--sp-8); border-top:1px solid var(--pl); margin:0; scroll-margin-top:72px;
    }
    .card > h2{
      display:flex; align-items:center; gap:8px;
      font-family:var(--font-head); font-weight:600; font-size:var(--fs-3xl);
      margin:0 0 12px; letter-spacing:0;
    }
    .card > h2 .ic{
      width:38px; height:38px; flex:none; display:grid; place-items:center;
      background:none; border:1px solid var(--pl-soft); border-radius:var(--r-sm); font-size:var(--fs-xl);
    }
    .card p{margin:0 0 16px; color:#d7dce4; max-width:62ch; line-height:var(--lh-prose)}
    .card p.lead{color:var(--ink)}
    .card b{color:var(--ink)}
    .mut{color:var(--mut); font-size:var(--fs-sm)}

    /* right-value list (tiers), D2: rows divided by --pl-soft, value in ink,
       not purple. */
    .tier{list-style:none; margin:0 0 16px; padding:0; border:0; background:none}
    .tier li{display:flex; justify-content:space-between; align-items:center; gap:16px;
             padding:12px 0; border-top:1px solid var(--pl-soft)}
    .tier li:first-child{border-top:0}
    .tier .k{color:var(--ink); font-size:var(--fs-base)}
    .tier .v{font-family:var(--font-text,var(--font-sans)); font-weight:600; color:var(--ink);
             font-variant-numeric:tabular-nums; white-space:nowrap}

    /* metric glossary */
    .terms{display:flex; flex-direction:column; gap:12px; margin:0 0 16px}
    .term{border-left:3px solid var(--prot); padding:2px 0 2px 16px}
    .term .t{font-weight:800; color:var(--ink)}
    .term .t small{font-weight:600; color:var(--mut); font-size:var(--fs-sm); margin-left:8px}
    .term .d{color:var(--ink); font-size:var(--fs-base); margin-top:2px}

    /* highlighted example */
    .callout{
      background:rgba(224,98,59,.10); border:1px solid rgba(224,98,59,.40);
      border-radius:var(--r-md); padding:12px 16px; margin:0 0 16px; font-size:var(--fs-base);
    }
    .callout b{color:#ffb59c}

    /* formula block */
    .formula{
      background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--good);
      border-radius:var(--r-sm); padding:12px 16px; margin:0 0 16px;
      font-size:var(--fs-sm); line-height:1.5; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#cfd6df;
    }

    /* plain lists */
    .card ul.bul{margin:0 0 16px; padding-left:2px; list-style:none}
    .card ul.bul li{position:relative; padding:3px 0 3px 24px; color:#d7dce4}
    .card ul.bul li::before{content:"›"; position:absolute; left:4px; top:3px;
                            color:var(--acc); font-weight:800}
    .card ul.bul li b{color:var(--ink)}

    /* numbered steps */
    .steps{counter-reset:s; list-style:none; margin:0 0 16px; padding:0}
    .steps li{counter-increment:s; position:relative; padding:4px 0 12px 40px; color:#d7dce4}
    .steps li::before{
      content:counter(s); position:absolute; left:0; top:1px;
      width:26px; height:26px; display:grid; place-items:center;
      background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
      font-weight:800; font-size:var(--fs-sm); color:var(--acc);
    }

    /* warning */
    .warn{background:rgba(217,162,59,.10); border:1px solid rgba(217,162,59,.38);
          border-radius:var(--r-md); padding:16px 16px}
    .warn h2{font-size:var(--fs-lg); margin:0 0 8px; color:var(--warn)}
    .warn p{margin:0; color:#e6dcc6; font-size:var(--fs-base)}

    /* sources under a section (D2) */
    .src{border-top:1px solid var(--pl-soft); margin:2px 0 0; padding:12px 0 16px;
         color:var(--mut); font-size:var(--fs-sm); line-height:1.5}
    .src .lbl{display:inline-flex; align-items:center; gap:4px;
              font-family:var(--font-num); font-size:var(--fs-sm); font-weight:500;
              letter-spacing:var(--tr-rub); text-transform:uppercase; color:var(--mut); margin-right:4px}

    .foot{color:var(--mut); font-size:var(--fs-sm); text-align:center; margin-top:24px}
    .foot a{color:var(--mut)}

    /* shared icon set (Lucide via <use>) — same pattern as index.html,
       instead of emoji in chips/headings/label captions */
    .icon{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;
          stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:-3px}
    .toc a .icon{width:14px; height:14px; margin-right:1px}
    .card > h2 .ic .icon{width:20px; height:20px}
    .src .lbl .icon{width:13px; height:13px}
    .warn h2 .icon{width:18px; height:18px}

    @media (max-width:560px){
      .hero h1{font-size:var(--fs-4xl)}
      .card{padding-block:var(--sp-6)}
    }

/* TZ-why-readability: article prose; keep the existing 680px column. */
.card p, .card li, .tier .k, .term .d, .callout, .warn p {
  font-size:1.0625rem; line-height:1.6;
}
@media (min-width:720px) {
  .card p, .card li, .tier .k, .term .d, .callout, .warn p {
    font-size:var(--fs-lg);
  }
  .toc { grid-template-columns:repeat(2,minmax(0,1fr)); }
}