/* Дизайн-система сайта FastShipping.
 *
 * Вынесена из index.html, когда страниц стало больше одной: оферта, политика
 * обработки данных, реквизиты и документация обязаны выглядеть частью того же
 * сайта, а не набором случайных страниц. Для проверяющего из ЮKassa это ещё и
 * признак того, что сайт настоящий, а не собран за вечер под заявку.
 */

  :root{
    --paper:#EDF1F6; --surface:#FFFFFF; --surface-2:#F5F8FC;
    --ink:#0F1A2A; --ink-soft:#4B5B72; --ink-faint:#7386A0;
    --line:#D9E1EC; --line-soft:#E7EDF4;
    --brand:#2E6BFF; --brand-strong:#1E4FD0; --brand-wash:#E7EEFF;
    --live:#12A874; --live-wash:#DCF5EC;
    --shadow:0 1px 2px rgba(15,26,42,.05), 0 12px 32px -12px rgba(15,26,42,.18);
    --shadow-sm:0 1px 2px rgba(15,26,42,.06);
    --r:14px; --r-lg:22px;
    --maxw:1140px;
    --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0A1120; --surface:#111C2E; --surface-2:#0E1829;
      --ink:#EAF1FB; --ink-soft:#9DB0C9; --ink-faint:#697E9C;
      --line:#213048; --line-soft:#1A263B;
      --brand:#5A8CFF; --brand-strong:#8DAEFF; --brand-wash:#16233D;
      --live:#2FCD93; --live-wash:#123024;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.6);
      --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0A1120; --surface:#111C2E; --surface-2:#0E1829;
    --ink:#EAF1FB; --ink-soft:#9DB0C9; --ink-faint:#697E9C;
    --line:#213048; --line-soft:#1A263B;
    --brand:#5A8CFF; --brand-strong:#8DAEFF; --brand-wash:#16233D;
    --live:#2FCD93; --live-wash:#123024;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; margin:0}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
  .eyebrow{font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-strong)}
  .mono{font-family:var(--mono)}

  /* --- focus + buttons --- */
  a:focus-visible, button:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}
  .btn{
    display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans);
    font-weight:600; font-size:1rem; padding:.72em 1.25em; border-radius:11px;
    border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent)}
  .btn-primary:hover{background:var(--brand-strong); transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--brand); color:var(--brand-strong); background:var(--surface)}
  .btn-lg{padding:.9em 1.5em; font-size:1.05rem}

  /* --- header --- */
  header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
  .nav{display:flex; align-items:center; gap:22px; height:68px}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em}
  .brand .mark{flex:none}
  .nav .links{display:flex; gap:24px; margin-left:14px}
  .nav .links a{color:var(--ink-soft); font-size:.95rem; font-weight:500}
  .nav .links a:hover{color:var(--ink)}
  .nav .spacer{flex:1}
  .nav .cta{display:flex; align-items:center; gap:12px}
  .nav .login{color:var(--ink-soft); font-weight:600; font-size:.95rem}
  .nav .login:hover{color:var(--ink)}
  @media (max-width:840px){ .nav .links{display:none} .nav .login{display:none} }

  /* --- hero --- */
  .hero{padding:72px 0 84px}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .hero h1{font-size:clamp(2.35rem, 5.4vw, 4rem); font-weight:800}
  .hero h1 .hl{color:var(--brand)}
  .hero .lead{margin-top:22px; font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--ink-soft); max-width:34ch}
  .hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
  .trust{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); letter-spacing:.02em}
  .trust span{display:inline-flex; align-items:center; gap:7px}
  .trust .dot{width:6px; height:6px; border-radius:50%; background:var(--live)}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:48px 0 60px} }

  /* --- hero dispatch card --- */
  .dispatch{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px; overflow:hidden}
  .dispatch .bar{display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px}
  .dispatch .bar .title{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
  .live-pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--live); background:var(--live-wash); padding:4px 10px; border-radius:999px}
  .live-pill .pulse{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .map{position:relative; border-radius:14px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-soft)}
  .map svg{display:block; width:100%; height:auto}
  .eta-chip{position:absolute; left:14px; bottom:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); padding:10px 12px; display:flex; align-items:center; gap:11px; max-width:74%}
  .eta-chip .ava{width:34px; height:34px; border-radius:9px; background:var(--brand-wash); color:var(--brand-strong); display:grid; place-items:center; flex:none}
  .eta-chip .who{font-size:.82rem; line-height:1.25}
  .eta-chip .who b{font-weight:600}
  .eta-chip .who .mono{color:var(--ink-faint); font-size:.72rem}
  .eta-chip .eta{margin-left:auto; text-align:right; flex:none}
  .eta-chip .eta .n{font-family:var(--mono); font-weight:600; font-size:.95rem; color:var(--live)}
  .eta-chip .eta .l{font-size:.64rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em}

  /* --- section scaffolding --- */
  section{padding:78px 0}
  .sec-head{max-width:640px; margin-bottom:44px}
  .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:12px}
  .sec-head p{margin-top:14px; color:var(--ink-soft); font-size:1.08rem}
  .center{margin-inline:auto; text-align:center}

  /* --- trust strip --- */
  .strip{border-block:1px solid var(--line-soft); background:var(--surface-2)}
  .strip .wrap{display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:center; padding-block:20px; font-family:var(--mono); font-size:.8rem; color:var(--ink-soft)}
  .strip b{color:var(--ink)}

  /* --- pipeline --- */
  .pipe{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step}
  .step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 22px 24px; box-shadow:var(--shadow-sm)}
  .step .num{counter-increment:step; font-family:var(--mono); font-weight:600; font-size:.78rem; color:var(--brand-strong); letter-spacing:.05em}
  .step .num::before{content:"0" counter(step)}
  .step h3{font-size:1.16rem; margin:12px 0 8px; font-weight:700}
  .step p{font-size:.94rem; color:var(--ink-soft)}
  .step .ic{position:absolute; top:22px; right:20px; color:var(--brand); opacity:.85}
  @media (max-width:860px){ .pipe{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .pipe{grid-template-columns:1fr} }

  /* --- spotlight (killer feature) --- */
  .spot{background:var(--surface); border-block:1px solid var(--line-soft)}
  .spot .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .spot ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px}
  .spot li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft)}
  .spot li b{color:var(--ink); font-weight:600}
  .spot li .ck{flex:none; width:22px; height:22px; border-radius:6px; background:var(--live-wash); color:var(--live); display:grid; place-items:center; margin-top:2px}
  @media (max-width:900px){ .spot .grid{grid-template-columns:1fr; gap:36px} }

  /* track mock */
  .track{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow)}
  .track .brandline{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line-soft)}
  .track .logo-chip{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#7aa0ff);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:.9rem}
  .track .brandline .co{font-weight:600}
  .track .prog{display:flex; align-items:center; gap:6px; margin:18px 4px}
  .track .node{width:13px;height:13px;border-radius:50%;border:2px solid var(--line); background:var(--surface); flex:none}
  .track .node.done{background:var(--live); border-color:var(--live)}
  .track .node.act{background:var(--brand); border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-wash)}
  .track .seg{height:2px;flex:1;background:var(--line);border-radius:2px}
  .track .seg.done{background:var(--live)}
  .track .status{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:6px}
  .track .status .s{font-weight:600}
  .track .status .e{font-family:var(--mono); color:var(--live); font-weight:600; font-size:.95rem}
  .track .selfserve{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px}
  .track .selfserve button{font-family:var(--sans); font-size:.85rem; font-weight:500; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.5em .8em; cursor:pointer}
  .track .selfserve button:hover{border-color:var(--brand); color:var(--brand-strong)}

  /* --- features grid --- */
  .feats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .2s ease, border-color .2s}
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 40%, var(--line))}
  .card .ic{width:42px;height:42px;border-radius:11px;background:var(--brand-wash);color:var(--brand-strong);display:grid;place-items:center;margin-bottom:16px}
  .card h3{font-size:1.12rem; font-weight:700; margin-bottom:8px}
  .card p{font-size:.94rem; color:var(--ink-soft)}
  @media (max-width:860px){ .feats{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .feats{grid-template-columns:1fr} }

  /* --- pricing --- */
  .plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch}
  .plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm)}
  .plan.hot{border-color:var(--brand); box-shadow:var(--shadow); position:relative}
  .plan.hot::after{content:"Оптимальный"; position:absolute; top:-11px; right:20px; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--brand); padding:4px 10px; border-radius:999px}
  .plan .name{font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
  .plan .price{font-family:var(--display); font-weight:800; font-size:2rem; margin:12px 0 2px; letter-spacing:-.03em; white-space:nowrap}
  .plan .price span{font-family:var(--sans); font-weight:500; font-size:.95rem; color:var(--ink-faint)}
  .plan .lim{color:var(--ink-soft); font-size:.94rem; margin:14px 0 20px; display:grid; gap:9px}
  .plan .lim div{display:flex; gap:9px; align-items:center}
  .plan .lim .ck{color:var(--live); flex:none}
  .plan .btn{margin-top:auto; justify-content:center}
  .plans-note{margin-top:16px; text-align:center; font-size:.9rem; color:var(--ink-soft)}
  @media (max-width:1080px){ .plans{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:660px){ .plans{grid-template-columns:1fr; max-width:440px; margin-inline:auto} }

  /* --- CTA band --- */
  .band{background:linear-gradient(135deg, var(--ink), #16273f); color:#EAF1FB; border-radius:26px; padding:56px 48px; text-align:center; position:relative; overflow:hidden}
  :root[data-theme="dark"] .band, :root:not([data-theme="light"]) .band{border:1px solid var(--line)}
  .band h2{color:#fff; font-size:clamp(1.7rem,3.6vw,2.6rem)}
  .band p{color:#AFC0DA; margin:14px auto 0; max-width:48ch}
  .band .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}
  .band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28)}
  .band .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#fff; color:#fff}
  .band .glow{position:absolute; inset:auto -10% -60% auto; width:60%; height:120%; background:radial-gradient(circle, color-mix(in srgb,var(--brand) 55%, transparent), transparent 62%); pointer-events:none}

  /* --- footer --- */
  footer.site{border-top:1px solid var(--line-soft); background:var(--surface-2); padding:56px 0 34px; margin-top:12px}
  .foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px}
  .foot h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:0 0 14px}
  .foot a{color:var(--ink-soft); font-size:.94rem; display:block; padding:4px 0}
  .foot a:hover{color:var(--brand-strong)}
  .foot .about{color:var(--ink-soft); font-size:.92rem; max-width:34ch; margin-top:12px}
  .foot .social{display:flex; gap:10px; margin-top:16px}
  .foot .social a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--ink-soft);padding:0}
  .foot .social a:hover{border-color:var(--brand); color:var(--brand-strong)}
  .legal{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--ink-faint); font-size:.82rem}
  @media (max-width:860px){ .foot{grid-template-columns:1fr 1fr} .foot .brandcol{grid-column:1 / -1} }
  @media (max-width:480px){ .foot{grid-template-columns:1fr} }

  /* reveal */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .live-pill .pulse{animation:none} }

  /* ——— Текстовые страницы: оферта, политика, реквизиты, документация ———
   *
   * Отдельный набор правил, а не общий с лендингом: там короткие блоки на
   * широком экране, здесь — длинный текст, который читают подряд. Ширина
   * ограничена примерно 70 знаками в строке: на всю ширину монитора глаз
   * теряет начало следующей строки.
   */
  .doc{ padding:56px 0 96px }
  .doc .wrap{ max-width:760px }

  .doc .crumbs{
    font-family:var(--mono); font-size:12px; letter-spacing:.04em;
    color:var(--ink-faint); margin:0 0 20px; display:flex; gap:8px; flex-wrap:wrap;
  }
  .doc .crumbs a{ color:var(--ink-faint); text-decoration:none }
  .doc .crumbs a:hover{ color:var(--brand) }

  .doc h1{
    font-family:var(--display); font-weight:700;
    font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.02em;
    margin:0 0 12px; text-wrap:balance;
  }
  .doc .updated{
    font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
    margin:0 0 36px; padding-bottom:20px; border-bottom:1px solid var(--line);
  }

  .doc h2{
    font-family:var(--display); font-weight:700; font-size:21px;
    letter-spacing:-.01em; margin:40px 0 14px; scroll-margin-top:80px;
  }
  .doc h3{ font-size:17px; font-weight:600; margin:26px 0 10px }
  .doc p{ margin:0 0 14px; color:var(--ink-soft) }
  .doc li{ margin:0 0 8px; color:var(--ink-soft) }
  .doc ul,.doc ol{ margin:0 0 16px; padding-left:22px }
  .doc strong{ color:var(--ink); font-weight:600 }
  .doc a{ color:var(--brand) }

  /* Оферта нумеруется сквозным списком: на пункт удобно сослаться в переписке */
  .doc ol.clauses{ list-style:none; padding:0; counter-reset:clause }
  .doc ol.clauses > li{
    counter-increment:clause; position:relative; padding-left:42px; margin-bottom:14px;
  }
  .doc ol.clauses > li::before{
    content:counter(clause) "."; position:absolute; left:0; top:0;
    font-family:var(--mono); font-size:13px; color:var(--ink-faint);
  }

  /* Карточка реквизитов: то, что проверяющий ищет глазами в первую очередь */
  .req{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:24px 26px; margin:0 0 28px;
    box-shadow:var(--shadow-sm);
  }
  .req dl{ margin:0; display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:12px 20px }
  .req dt{ color:var(--ink-faint); font-size:13.5px }
  .req dd{ margin:0; color:var(--ink); font-weight:500 }
  .req dd.mono{ font-family:var(--mono) }
  @media (max-width:520px){
    .req dl{ grid-template-columns:1fr; gap:4px 0 }
    .req dt{ margin-top:12px }
  }

  /* Врезка с важным предупреждением внутри длинного текста */
  .note{
    border-left:3px solid var(--brand); background:var(--brand-wash);
    padding:14px 18px; border-radius:0 var(--r) var(--r) 0; margin:0 0 20px;
  }
  .note p{ color:var(--ink) }
  .note p:last-child{ margin-bottom:0 }

  /* Поясняющий абзац под блоком шагов: мелко, но не настолько, чтобы это
     читалось как отписка мелким шрифтом */
  .foot-note{
    margin:26px auto 0; max-width:70ch; text-align:center;
    font-size:14px; color:var(--ink-soft);
  }

  /* ——— Документация: код, таблицы, оглавление ——— */

  .doc pre{
    background:var(--surface-2); border:1px solid var(--line);
    border-radius:var(--r); padding:14px 16px; margin:0 0 18px;
    overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.55;
    color:var(--ink);
  }
  .doc :not(pre) > code{
    font-family:var(--mono); font-size:.88em; background:var(--surface-2);
    border:1px solid var(--line-soft); border-radius:5px; padding:1px 5px;
    color:var(--ink); white-space:nowrap;
  }

  /* Таблица параметров. На узком экране уезжает в собственную прокрутку, а не
     ломает страницу: горизонтальный скролл всего документа читать невозможно */
  .doc .table-wrap{ overflow-x:auto; margin:0 0 20px }
  .doc table{ border-collapse:collapse; width:100%; font-size:14px; min-width:480px }
  .doc th,.doc td{
    text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-soft);
    vertical-align:top;
  }
  .doc th{ color:var(--ink-faint); font-weight:600; font-size:12.5px; white-space:nowrap }
  .doc td:first-child{ font-family:var(--mono); font-size:13px; white-space:nowrap }
  .doc td{ color:var(--ink-soft) }

  /* Оглавление страницы документации */
  .toc{
    background:var(--surface-2); border:1px solid var(--line-soft);
    border-radius:var(--r); padding:16px 20px; margin:0 0 32px;
  }
  .toc h2{ font-size:13px; margin:0 0 10px; color:var(--ink-faint);
    font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; font-weight:600 }
  .toc ol{ margin:0; padding-left:20px }
  .toc li{ margin:0 0 6px }

  /* Плитки на странице-указателе документации */
  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:0 0 32px }
  .card-link{
    display:block; text-decoration:none; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px;
    box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
  }
  .card-link:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
  .card-link h3{ margin:0 0 6px; font-size:16.5px; color:var(--ink) }
  .card-link p{ margin:0; font-size:14px; color:var(--ink-soft) }
  @media (prefers-reduced-motion:reduce){ .card-link{ transition:none } .card-link:hover{ transform:none } }