/* cryptocasinosignupbonus.com — тема «маркер по мелкому шрифту».
   Сайт про то, что написано под заголовком, поэтому он и выглядит как
   документ, по которому прошлись маркером: бумага, засечки в заголовках,
   моноширинные числа и одна кислотная полоса выделения. */

:root{
  --paper:#fcfcfa;
  --card:#ffffff;
  --ink:#16181d;
  --ink2:#595f6b;
  --ink3:#8a909c;
  --line:#e4e2da;
  --line2:#cfccc0;
  --mark:#d9f227;          /* маркер */
  --mark2:#eef7a4;
  --red:#d6352b;           /* красная ручка проверяющего */
  --dark:#16181d;
  --dark2:#23262e;
  --r:6px;
  --serif:"Spectral","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.66 var(--sans);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--mark);padding:8px 12px;z-index:20}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ----------------------------------------------------------- шапка ----- */
.masthead{border-bottom:1.5px solid var(--ink);background:var(--paper)}
.mast{display:flex;align-items:center;gap:22px;min-height:62px;flex-wrap:wrap}
.wordmark{
  font:700 20px/1 var(--serif);letter-spacing:-.01em;text-decoration:none;
  padding:3px 0;border-bottom:3px solid var(--mark);white-space:nowrap;
}
.wordmark b{font-weight:700;color:var(--ink2)}
.masthead nav{flex:1}
.masthead ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.masthead a{
  font:600 13.5px/1 var(--sans);text-decoration:none;color:var(--ink2);
  padding:5px 0;border-bottom:2px solid transparent;
}
.masthead a:hover{color:var(--ink);border-color:var(--line2)}
.masthead a[aria-current]{color:var(--ink);border-color:var(--mark)}
/* .masthead a специфичнее одного класса и красил текст кнопки в цвет
   пунктов меню — на тёмной плашке он почти пропадал. Селектор с тем же
   весом, и кнопка лаймовая: в шапке она должна быть самым ярким пятном. */
/* Переключатель языка: рядом с кнопкой, но заметно тише неё. */
.masthead a.lang{
  font:600 12.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink2);border:1px solid var(--line2);border-radius:var(--r);
  padding:8px 11px;text-decoration:none;white-space:nowrap;
}
.masthead a.lang:hover{color:var(--ink);border-color:var(--ink);background:var(--mark)}

.masthead a.mast-cta{
  font:800 15px/1 var(--sans);letter-spacing:.01em;
  background:var(--mark);color:var(--ink);border:1.5px solid var(--ink);
  padding:13px 22px;border-radius:var(--r);text-decoration:none;white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink);position:relative;overflow:hidden;
  animation:cta-breathe 3.6s ease-in-out infinite;
}
.masthead a.mast-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  transform:translateX(-120%);animation:cta-shine 3.6s ease-in-out infinite;
}
.masthead a.mast-cta:hover{background:#e7ff3d;transform:translateY(-1px);
  box-shadow:4px 5px 0 var(--ink)}
.masthead a.mast-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@keyframes cta-breathe{0%,88%,100%{box-shadow:3px 3px 0 var(--ink)}
  94%{box-shadow:3px 3px 0 var(--ink),0 0 0 6px rgba(217,242,39,.32)}}
@keyframes cta-shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

/* ------------------------------------------------------ первый экран --- */
.hero{padding:34px 0 8px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.crumbs{font:500 12.5px/1 var(--sans);color:var(--ink3);margin:0 0 14px}
.crumbs a{color:var(--ink3)}
.eyebrow{
  font:700 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 12px;
}
.eyebrow::before{content:"";display:inline-block;width:22px;height:3px;background:var(--mark);
  vertical-align:middle;margin-right:9px}
h1{
  font:700 clamp(31px,4.4vw,50px)/1.07 var(--serif);letter-spacing:-.02em;
  margin:0 0 16px;text-wrap:balance;
}
h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--mark) 58%);padding:0 2px}
.lede{font:400 19.5px/1.55 var(--sans);color:var(--ink2);margin:0 0 20px;max-width:56ch}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.btn{font:700 14.5px/1 var(--sans);padding:14px 20px;border-radius:var(--r);text-decoration:none}
.btn-a{background:var(--mark);color:var(--ink);border:1.5px solid var(--ink)}
.btn-a:hover{background:var(--mark2)}
.btn-b{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
.btn-b:hover{border-color:var(--ink)}

/* лента первого экрана — «квитанция» с итогом */
.tape{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);overflow:hidden}
.tape-top{padding:20px 22px 14px;border-bottom:1px dashed var(--line2)}
.tape-unit{display:block;font:700 46px/1 var(--mono);letter-spacing:-.03em}
.tape-unit i{font-style:normal;font-size:20px;color:var(--ink2)}
.tape-label{display:block;font:500 13.5px/1.4 var(--sans);color:var(--ink2);margin-top:7px}
.tape-rows{list-style:none;margin:0;padding:6px 22px}
.tape-rows li{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px dotted var(--line);font-size:14px;
}
.tape-rows li:last-child{border-bottom:0}
.tape-rows b{font-weight:500;color:var(--ink)}
.tape-rows span{display:none}
.tape-rows em{font:600 15px/1 var(--mono);font-style:normal}
.tape-rows li.dim{color:var(--ink3)}
.tape-rows li.dim em{color:var(--ink3)}
.tape-rule{height:0}
.tape-note{margin:0;padding:12px 22px 18px;font-size:12.5px;line-height:1.5;color:var(--ink3);
  border-top:1px dashed var(--line2)}

/* ------------------------------------------------------------ текст ---- */
.band{padding:34px 0 58px}
.prose{max-width:78ch}
.prose h2{
  font:700 clamp(24px,2.7vw,31px)/1.2 var(--serif);letter-spacing:-.015em;
  margin:44px 0 14px;text-wrap:balance;
}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 19px/1.3 var(--sans);margin:28px 0 8px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink);text-decoration-color:var(--line2)}
.prose a:hover{text-decoration-color:var(--red)}
/* Ссылки-объекты внутри прозы красят себя сами: .prose a специфичнее и иначе
   перекрашивает текст кнопки в цвет её собственного фона. */
.prose a.card,.prose a.offer{color:var(--ink)}
.prose a.deal-go,.prose a.offer-go{color:var(--paper)}
.prose i{font-style:italic}
.nofile{color:var(--ink3);font-style:italic}

.toc{
  border:1px solid var(--line);border-left:4px solid var(--mark);border-radius:var(--r);
  background:var(--card);padding:16px 20px;margin:0 0 30px;
}
.toc p{font:700 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14.5px}
.toc li{margin-bottom:5px;break-inside:avoid}

.note{
  border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r);
  background:var(--card);padding:15px 19px;margin:0 0 22px;font-size:15px;color:var(--ink2);
}

.steps{list-style:none;counter-reset:s;margin:0 0 24px;padding:0}
.steps li{counter-increment:s;display:flex;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(s);flex:0 0 30px;height:30px;border-radius:50%;background:var(--mark);
  border:1.5px solid var(--ink);font:700 13px/27px var(--mono);text-align:center;
}
.steps b{display:block;font:700 16px/1.4 var(--sans);margin-bottom:2px}
.steps span{display:block;font-size:14.5px;color:var(--ink2);line-height:1.55}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:15px 0;font:600 16.5px/1.4 var(--sans);list-style:none;
  display:flex;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--ink3)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:2px solid var(--mark)}
.faq div{padding:2px 0 17px;color:var(--ink2);font-size:15.5px}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 24px}
.pc>div{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--card)}
.pc-good{border-top:3px solid var(--mark)}
.pc-bad{border-top:3px solid var(--red)}
.pc h3{font:700 12px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;margin:0 0 10px}
.pc ul{margin:0;padding-left:18px;font-size:14.5px}

.facts{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:15px;background:var(--card);
  border:1px solid var(--line)}
.facts caption{text-align:left;font:700 11.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;padding:0 0 9px;color:var(--ink2)}
.facts th{text-align:left;font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);
  width:44%;vertical-align:top}
.facts td{padding:9px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:14px}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.readmark{font-size:12.5px;color:var(--ink3);margin:0 0 22px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0 0 26px}
.card{
  border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;background:var(--card);
  text-decoration:none;display:block;
}
.card:hover{border-color:var(--ink);box-shadow:3px 3px 0 var(--mark)}
.card h3{font:700 17px/1.28 var(--serif);margin:0 0 7px}
.card p{margin:0;font-size:14px;color:var(--ink2);line-height:1.5}
.card-meta{display:inline-block;margin-top:10px;font:600 11px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);background:var(--mark2);padding:4px 7px}

/* ------------------------------------------------- реестр предложений -- */
.deals{margin:0 0 12px}
.deal{
  display:grid;grid-template-columns:44px 1fr 210px;gap:16px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:15px 17px;margin-bottom:11px;
}
.deal:hover{border-color:var(--line2)}
.deal-no{font:700 13px/1 var(--mono);color:var(--ink);background:var(--mark);
  border:1.5px solid var(--ink);border-radius:50%;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center}
.deal-name{font:700 19px/1.2 var(--serif);margin:0 0 3px;display:block}
.deal-head{display:block;font:600 15.5px/1.4 var(--sans);margin-bottom:5px}
.deal-head b{background:linear-gradient(transparent 60%,var(--mark2) 60%)}
.deal-note{display:block;font-size:14px;color:var(--ink2);line-height:1.5;margin-bottom:8px}
.deal-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font:600 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line2);padding:4px 7px;border-radius:3px;color:var(--ink2)}
.tag-x{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag-base{background:var(--mark2);border-color:var(--mark)}
.deal-cost{text-align:right}
.cost-fig{display:block;font:700 26px/1 var(--mono);letter-spacing:-.02em}
.cost-lab{display:block;font-size:11.5px;line-height:1.35;color:var(--ink2);margin-top:6px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}
.deal-go{
  display:block;margin-top:11px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:700 13px/1 var(--sans);padding:11px 10px;border-radius:var(--r);text-align:center;
}
.deal-go:hover{background:var(--dark2)}
.deals-foot{margin:0 0 26px;font-size:13.5px;color:var(--ink2);max-width:76ch}

/* таблица цены оффера */
.costs{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);
  border:1px solid var(--line2);margin:0 0 10px}
.costs thead th{background:var(--ink);color:var(--paper);font:700 11px/1.3 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;padding:11px 10px;text-align:left}
.costs td,.costs th{padding:9px 10px;border-bottom:1px solid var(--line)}
.costs tbody th{text-align:left;font-weight:600}
.costs .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.costs tbody tr:nth-child(even){background:#fbfaf5}
.costs .hot{background:var(--mark2);font-weight:700}
.costs tr:last-child td,.costs tr:last-child th{border-bottom:0}

/* ---------------------------------------------------------- оффер ------ */
.offer{
  display:block;text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);
  border-radius:var(--r);background:var(--card);margin:0 0 26px;position:relative;
}
.offer::before{content:"";position:absolute;inset:6px 6px auto auto;width:64px;height:8px;
  background:var(--mark)}
.offer-in{padding:20px 22px}
.offer-kick{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 9px}
.offer h3{font:700 22px/1.22 var(--serif);margin:0 0 8px;max-width:30ch}
.offer p{margin:0 0 14px;font-size:15px;color:var(--ink2);max-width:62ch}
.offer-terms{list-style:none;margin:0 0 15px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.offer-terms li{border-top:2px solid var(--mark);padding-top:8px;font-size:13.5px;color:var(--ink2)}
.offer-terms b{display:block;font:700 14.5px/1.3 var(--sans);color:var(--ink);margin-bottom:2px}
.offer-go{display:inline-block;background:var(--ink);color:var(--paper);font:700 14px/1 var(--sans);
  padding:13px 22px;border-radius:var(--r)}
.offer-note{margin:11px 0 0;font-size:12.5px;color:var(--ink3)}

/* ---------------------------------------------------- схемы и кадры ---- */
.fig,.pic{margin:0 0 26px}
.fig svg,.pic img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
.fig figcaption,.pic figcaption{font-size:13.5px;color:var(--ink2);margin-top:9px;line-height:1.55;
  border-left:3px solid var(--mark);padding-left:11px}
.pic-shot img{background:#fff}
.dia{display:block}
.d-body{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.d-card{fill:#f7f6f0;stroke:var(--line2);stroke-width:1.5}
.d-card-hot{fill:var(--mark2);stroke:var(--ink);stroke-width:1.5}
.d-arrow{stroke:var(--ink3);stroke-width:1.5;fill:none}
.d-tip{fill:var(--ink3)}
.d-hole{fill:var(--card);stroke:var(--ink3);stroke-width:2}
.d-live{fill:var(--mark);stroke:var(--ink);stroke-width:2}
.d-sock{fill:var(--mark2);stroke:var(--ink);stroke-width:1.5}
.d-tick{fill:var(--mark)}
.d-big{font:700 24px var(--mono);fill:var(--ink);text-anchor:middle}
.d-big2{font:700 15px var(--sans);fill:var(--ink);text-anchor:middle}
.d-small{font:400 12px var(--sans);fill:var(--ink2);text-anchor:middle}
.d-num{font:600 10px var(--mono);fill:var(--ink3);text-anchor:middle;letter-spacing:.1em}
.d-step{font:700 14px var(--mono);fill:var(--ink);text-anchor:middle}
.d-mult{font:700 30px var(--mono);fill:var(--red);text-anchor:middle}
.d-cap{font:600 11px var(--mono);fill:var(--ink3);text-anchor:middle;letter-spacing:.1em}

/* ------------------------------------------------------------ далее ---- */
.next{border-top:1.5px solid var(--ink);margin-top:40px;padding-top:18px}
.next p{font:700 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;margin:0 0 11px}
.next ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px}
.next a{font-size:15px;text-decoration-color:var(--line2)}

/* ------------------------------------------------------------ подвал --- */
.foot{border-top:1.5px solid var(--ink);background:var(--card);padding:34px 0 88px;margin-top:10px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:26px;
  margin-bottom:26px}
.foot h4{font:700 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 11px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot a{font-size:14.5px;color:var(--ink2);text-decoration-color:var(--line)}
.foot a:hover{color:var(--ink)}
.foot-legal{font-size:12.5px;line-height:1.6;color:var(--ink3);margin:0;max-width:96ch;
  border-top:1px solid var(--line);padding-top:16px}

.bar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);z-index:9}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 20px}
.bar p{margin:0;font-size:13px;color:#d8d5c9}
.bar a{background:var(--mark);color:var(--ink);font:700 13.5px/1 var(--sans);padding:11px 17px;
  border-radius:var(--r);text-decoration:none;white-space:nowrap}

/* ------------------------------------------------- правая колонка ------ */
/* Держится у края текста, пока страницу листают. Появляется только там, где
   рядом с прозой есть свободные 300px: ниже этого внизу и так стоит полоса. */
.band-grid{display:block}
.rail{display:none}

@media (min-width:1080px){
  .band-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:40px;align-items:start}
  .rail{display:block;position:sticky;top:20px}
  .bar{display:none}
}

.rail-card{
  border:1.5px solid var(--ink);border-radius:var(--r);padding:20px 18px 17px;
  background:var(--paper);box-shadow:5px 5px 0 var(--ink);
  background-image:radial-gradient(120% 70% at 15% 0%,rgba(217,242,39,.42),transparent 62%);
  background-size:190% 190%;background-repeat:no-repeat;
  animation:rail-drift 14s ease-in-out infinite alternate;
}
@keyframes rail-drift{from{background-position:0% 0%}to{background-position:100% 40%}}

.rail-when{
  margin:0 0 9px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);
}
.rail-head{margin:0 0 9px;font:700 21px/1.22 var(--serif);letter-spacing:-.015em}
.rail-mark{
  position:relative;display:inline-block;padding:0 4px;margin:0 -4px;
  background:linear-gradient(var(--mark),var(--mark)) left center/0% 72% no-repeat;
  animation:rail-stroke 5.5s ease-in-out infinite;
}
@keyframes rail-stroke{0%,8%{background-size:0% 72%}
  34%,72%{background-size:100% 72%}94%,100%{background-size:0% 72%}}

.rail-sub{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink2)}

/* Бегущая строка: то, что читается в правилах до того, как кнопка нажата. */
.rail-tick{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 10px;
  border:1px dashed var(--line2);border-radius:var(--r);background:rgba(255,255,255,.55);
}
.rail-tick-lab{
  margin:0;font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);white-space:nowrap;
}
.rail-tick-win{height:19px;overflow:hidden;flex:1}
.rail-tick-win ul{margin:0;padding:0;list-style:none;animation:rail-roll 12s steps(1) infinite}
.rail-tick-win li{height:19px;font:600 13px/19px var(--sans);white-space:nowrap}
@keyframes rail-roll{
  0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-19px)}
  40%,56%{transform:translateY(-38px)}60%,76%{transform:translateY(-57px)}
  80%,96%{transform:translateY(-76px)}100%{transform:translateY(-95px)}}

.rail-go{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font:800 16px/1 var(--sans);text-align:center;
  background:var(--mark);border:1.5px solid var(--ink);border-radius:var(--r);
  padding:16px 14px;text-decoration:none;position:relative;overflow:hidden;
  box-shadow:4px 4px 0 var(--ink);animation:cta-breathe 3.6s ease-in-out infinite;
}
.prose a.rail-go,.rail-go{color:var(--ink)}
.rail-go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  transform:translateX(-120%);animation:cta-shine 3.6s ease-in-out infinite;
}
.rail-go::before{content:"→";font:700 17px/1 var(--sans);order:2;
  transition:transform .18s ease;animation:rail-nudge 3.6s ease-in-out infinite}
@keyframes rail-nudge{0%,70%,100%{transform:translateX(0)}82%{transform:translateX(5px)}}
.rail-go:hover{background:#e7ff3d;transform:translateY(-2px);box-shadow:5px 7px 0 var(--ink)}
.rail-go:hover::before{transform:translateX(5px)}
.rail-go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

.rail-fine{margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink2)}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .deal{grid-template-columns:36px 1fr;gap:13px}
  .deal-cost{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .cost-lab{margin-top:0}
  .deal-go{width:100%;margin-top:9px}
  .pc{grid-template-columns:1fr}
  .toc ol{columns:1}
  .mast-cta{display:none}
  .costs{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:520px){
  body{font-size:16.5px}
  /* На узком экране nav с flex:1 садился в остаток строки и разворачивал
     пункты в столбец на четверть высоты экрана. Отдаём ему целую строку. */
  .mast{gap:9px;min-height:0;padding-block:12px}
  .masthead nav{flex:1 0 100%}
  .masthead ul{gap:12px 16px}
  .masthead a.lang{padding:6px 9px;font-size:11.5px}
  .band{padding:24px 0 44px}
  .bar p{display:none}
  .bar .wrap{justify-content:center}
  .tape-unit{font-size:38px}
  .cost-fig{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}