/* Блоки статей сайту студії — assets/article.css (22.10.2026, журнал №112; з лабораторії demo/_proto/cost-layout/,
   план docs/36_Umberform/22_Оформлення_сторінки_цін.md). Розмітку графіків збирає tools/site_charts.py.
   Композиція — стара сторінка цін (F:\Web Studio - Website\pricing.html: «вікно програми», рядок цифр, FIG, таймлайн,
   картки-висновки, колонки 01–03, питання у дві колонки). Вигляд — Umberform (№78, №79): Geist без моно, крем,
   лимон — «ми» на кожному графіку, бірюза — цифри, гострі кути, лінії 1 px на 16 % крему.
   Спільний для /website-cost/ і наступних сторінок (виробники, редизайн). Дзеркальний графік і інші кольори карток — лише в лабораторії. */

.art { --line: rgba(243, 241, 230, .16); --lw: 240px; padding: 15% 5% 8%; }
.art .cap { margin: 0; font: 400 .72rem/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.art a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art .cta-hole { text-decoration: none; }

/* ── 1. герой ── */
.art-hero h1 { margin: 0; max-width: 16ch; font: var(--fw-h1) 6rem/6.5rem var(--font-primary); letter-spacing: -.01em; }
.hero-sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 2rem; }
.hero-sub p { margin: 0; max-width: 46rem; font: 300 var(--fs-h)/1.5 var(--font-text); opacity: .85; }
.hero-sub .hero-meta { flex: none; font-size: var(--fs-m); opacity: 1; white-space: nowrap; }
.hero-meta b { font-weight: 500; margin-right: .6rem; }
.hero-meta a { opacity: .65; text-decoration: none; transition: opacity .2s, color .2s; }
.hero-meta a:hover, .hero-meta a:focus-visible { opacity: 1; color: var(--lime); }

/* ── 2. «вікно програми» з графіком ринку ── */
.stage { margin-top: 5rem; }
.win { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); background: rgba(243, 241, 230, .025); }
.win-side { padding: 1rem .9rem; border-right: 1px solid var(--line); }
.win-side p { margin: 0; }
.win-brand { padding: .2rem .3rem .6rem; font: 500 var(--fs-m) var(--font-primary); }
.win-grp { padding: 1.3rem .3rem .45rem; font: 400 .7rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.win-it { display: flex; align-items: center; gap: .6rem; padding: .35rem .3rem; font: 300 .88rem/1.3 var(--font-text); opacity: .85; }
.win-it span { margin-left: auto; opacity: .5; font-variant-numeric: tabular-nums; }
.win-it.us { color: var(--lime); opacity: 1; }
.k { flex: none; display: block; width: 14px; height: 6px; }
.k-range { background: rgba(243, 241, 230, .55); }
.k-us { background: var(--lime); }
.win-main { min-width: 0; }
.win-bar { display: flex; align-items: center; gap: .9rem; height: 46px; padding: 0 1.3rem; border-bottom: 1px solid var(--line); font: 400 .82rem var(--font-text); }
.win-id { display: flex; align-items: center; gap: .45rem; opacity: .75; }
.win-id i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--lime); background: conic-gradient(var(--lime) 0 50%, transparent 50%); }
.win-ttl { font-weight: 500; }
.win-pg { margin-left: auto; opacity: .5; }
.win-doc { padding: 2.2rem 2.5rem 2.4rem; }
.win-doc h2, .sec-h { margin: 0; max-width: 24ch; font: var(--fw-h1) 2.25rem/1.2 var(--font-primary); letter-spacing: -.03rem; }
.win-doc > p, .sec-lead, .sec-after, .lede p { max-width: 46rem; margin: 1.2rem 0 0; font: 300 var(--fs-l)/1.65 var(--font-text); opacity: .85; }
.stage-note { max-width: 52rem; margin: 1.2rem 0 0; font: 300 var(--fs-s)/1.6 var(--font-text); opacity: .65; }

/* ── графік-діапазони (22.10, ідея 1 — подача KS-036 старої сторінки): компактний блок, назви праворуч біля осі,
   дрібніший шрифт, ніж у статті, значення жирно біля смуги, колонка «як платите», вісь знизу, підсвітка рядка ── */
.ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 2.4rem; }
.ch-head b { font: 500 1.05rem var(--font-primary); }
.ch-head span { font: 400 .7rem var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.ch { --lw: 180px; --tw: 72px; --cg: 18px; margin-top: 1.4rem; font-variant-numeric: tabular-nums; }
.ch-cols, .ch-row { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--tw); column-gap: var(--cg); align-items: center; }
.ch-cols { padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.ch-cols span { font: 400 .66rem var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.ch-cols span:last-child { text-align: right; }
.ch-body { position: relative; padding: .5rem 0 2.2rem; }
.ch-grid { position: absolute; top: 0; bottom: 1.6rem; left: calc(var(--lw) + var(--cg)); right: calc(var(--tw) + var(--cg)); pointer-events: none; }
.ch-grid i { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px dashed rgba(243, 241, 230, .12); }
.ch-grid em { position: absolute; bottom: -1.5rem; left: 0; transform: translateX(-50%); font: 400 .7rem var(--font-text);
  font-style: normal; opacity: .45; white-space: nowrap; }
.ch-row { position: relative; min-height: 46px; margin: 0 -.6rem; padding: 0 .6rem; transition: background .15s; }
.ch-row:hover { background: rgba(243, 241, 230, .035); }
.ch-lab { text-align: right; }
.ch-lab b { display: block; font: 500 .92rem/1.25 var(--font-primary); }
.ch-lab span { display: block; margin-top: .1rem; font: 300 .72rem/1.3 var(--font-text); opacity: .5; }
.ch-row.us .ch-lab b { color: var(--lime); }
.ch-track { position: relative; height: 46px; }
.ch-bar { position: absolute; top: 50%; left: var(--a); width: calc(var(--b) - var(--a)); height: 10px;
  background: rgba(243, 241, 230, .42); transform: translateY(-50%); transform-origin: left center; }
.ch-track.us .ch-bar { background: var(--lime); }
.ch-track.open .ch-bar { -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); }
.ch-val { position: absolute; top: 50%; left: calc(var(--b) + 8px); transform: translateY(-50%);
  font: 500 .8rem var(--font-text); white-space: nowrap; color: var(--light); }
.ch-track.us .ch-val { color: var(--lime); }
.ch-track.flip .ch-val, .ch-track.open .ch-val { left: auto; right: calc(100% - var(--a) + 8px); }
.ch-tag { text-align: right; font: 400 .78rem var(--font-text); opacity: .55; }
.ch-row.us .ch-tag { color: var(--lime); opacity: 1; }
html.anim [data-in]:not(.in) .ch-bar { transform: translateY(-50%) scaleX(0); }
html.anim [data-in]:not(.in) .ch-val { opacity: 0; }
[data-in].in .ch-bar { transform: translateY(-50%) scaleX(1); transition: transform 1s var(--ease-out); }
[data-in].in .ch-val { opacity: 1; transition: opacity .5s .55s; }
/* картка для графіків поза «вікном» (години, тижні) — та сама рамка, що й у таймлайну */
.ccard { margin-top: 2.4rem; padding: .2rem 1.6rem 1.2rem; border: 1px solid var(--line); background: rgba(243, 241, 230, .025); }
.ccard > .ch-head { margin-top: 1.2rem; }
/* світло під «вікном» — як на старій сторінці, гострі кути */
.stage { position: relative; isolation: isolate; }
.stage::after { content: ''; position: absolute; z-index: -1; left: -3%; right: -3%; top: 40%; bottom: -3.5rem; pointer-events: none;
  background: radial-gradient(55% 50% at 50% 100%, rgba(243, 241, 230, .09), transparent 72%); }

/* ── 3. рядок великих цифр ── */
.proof { padding-top: 7rem; }
.proof ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.proof li { display: flex; align-items: baseline; gap: .7rem; }
.proof b { font: 500 2.4rem/1 var(--font-primary); letter-spacing: -.02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.proof li.us b { color: var(--lime); }
.proof span { font: 300 .95rem/1.3 var(--font-text); opacity: .75; }
.proof .cap { margin-top: 2.2rem; }
.proof-sm { padding-top: 2.2rem; }
.proof-sm ul { justify-content: flex-start; gap: 1.5rem 3rem; }
.proof-sm b { font-size: 2rem; }
html.anim .proof[data-in]:not(.in) li { opacity: 0; transform: translateY(16px); }
.proof[data-in].in li { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.proof[data-in].in li:nth-child(2) { transition-delay: .08s; } .proof[data-in].in li:nth-child(3) { transition-delay: .16s; }
.proof[data-in].in li:nth-child(4) { transition-delay: .24s; }

/* ── 4. заява + FIG 0.1–0.3 ── */
.statement { padding-top: 8rem; }
.statement .big { margin: 0; max-width: 18ch; font: var(--fw-h1) clamp(2.6rem, 4.4vw, 4.2rem)/1.08 var(--font-primary); letter-spacing: -.02em; }
.lede { margin-top: 1rem; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4.5rem 0 3.5rem; }
.figc { margin: 0; padding-right: 2rem; }
.figc + .figc { padding-left: 2rem; border-left: 1px solid var(--line); }
.fig-svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 1.5rem auto 2rem; overflow: visible; }
.figc h3 { margin: 0; font: 500 var(--fs-m)/1.35 var(--font-primary); }
.figc p { max-width: 300px; margin: .4rem 0 0; font: 300 .95rem/1.55 var(--font-text); opacity: .75; }
.bx path { stroke: rgba(243, 241, 230, .4); stroke-width: 1; stroke-linejoin: round; transition: stroke .7s var(--ease-out); }
.bx .t { fill: #101115; } .bx .l { fill: #090a0d; } .bx .r { fill: #0c0d11; }
.bx.thin path { stroke-width: .8; }
.bx.ac path { stroke: var(--lime); }
.figc:hover .bx:not(.ac) path { stroke: rgba(243, 241, 230, .7); }
html.anim .figc[data-in]:not(.in) .sl { opacity: 0; transform: translateY(-14px); }
.figc[data-in].in .sl { opacity: 1; transform: none; transition: opacity .5s, transform .8s var(--ease-out); transition-delay: var(--d); }

/* ── розділи ── */
.sec { margin-top: 8rem; padding-top: 4rem; border-top: 1px solid var(--line); }
.sec-lead { margin-top: 1.4rem; }

/* ── 5. дві колонки ── */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 2.6rem; }
.cols2 > div { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.cols2 ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.cols2 li { position: relative; margin: 0 0 .7rem; padding-left: 1.6rem; font: 300 var(--fs-l)/1.5 var(--font-text); opacity: .85; }
.cols2 li::before { content: '+'; position: absolute; left: 0; color: var(--lime); font-weight: 400; }
.cols2 > div + div li::before { content: '≈'; color: var(--teal); }
.cols2 .more { margin: 1.4rem 0 0; font: 400 var(--fs-m) var(--font-primary); }

/* ── 6. години — смуги з відрізками ── */
.hb-legend { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.hb-legend li { display: flex; align-items: center; gap: .55rem; font: 300 .88rem var(--font-text); opacity: .85; }
.hb-legend i { display: block; width: 16px; height: 8px; background: var(--c); }
.r-design { --c: var(--lime); --ink: var(--dark); }
.r-dev { --c: #F3F1E6; --ink: var(--dark); }
.r-test { --c: var(--teal); --ink: var(--dark); }
.r-texts { --c: #8d8b84; --ink: var(--dark); }
.r-lead { --c: #4b4a47; --ink: var(--light); }
.ch-hours { row-gap: 1.3rem; }
.hb-track { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.hb-bar { display: flex; width: var(--w); height: 34px; transform-origin: left center; }
.seg { min-width: 0; background: var(--c); border-right: 1px solid var(--dark); overflow: hidden; }
.seg:last-child { border-right: 0; }
.seg .v { display: block; padding: 0 .5rem; font: 500 .78rem/34px var(--font-text); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg.tight .v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hb-note { flex: none; font: 300 .8rem var(--font-text); opacity: .55; }
.hb-list { display: none; }
.hb-list i { display: inline-block; width: 8px; height: 8px; margin-right: .3rem; background: var(--c); }
html.anim .ch-hours[data-in]:not(.in) .hb-bar { transform: scaleX(0); }
.ch-hours[data-in].in .hb-bar { transform: scaleX(1); transition: transform 1.1s var(--ease-out); }

/* ── 9. таймлайн 36 місяців ── */
.board { margin-top: 2.6rem; border: 1px solid var(--line); background: rgba(243, 241, 230, .025); }
.board-h { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.3rem; border-bottom: 1px solid var(--line); font: 400 .82rem var(--font-text); }
.board-h b { font-weight: 500; } .board-h span { opacity: .55; }
.tl { display: grid; grid-template-columns: 210px minmax(0, 1fr) 150px; gap: 1rem 1.5rem; padding: 1.6rem 1.3rem 2rem; }
.tl-head { position: relative; height: 2.8rem; }
.tl-head .yr { position: absolute; top: 0; left: var(--x); font: 400 .7rem var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.tl-head .mo { position: absolute; top: 1.5rem; left: var(--x); transform: translateX(-50%); font: 400 .72rem var(--font-text); opacity: .45; font-variant-numeric: tabular-nums; }
.tl-head .mo:first-of-type { transform: none; }
.tl-head .mo.hot { color: var(--lime); opacity: 1; }
.tl-tot-h { align-self: end; padding-bottom: .2rem; text-align: right; font: 400 .7rem var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.tl-track { position: relative; height: 3rem; }
.tl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 60%; border-top: 1px dashed rgba(243, 241, 230, .2); }
.tl-track::after { content: ''; position: absolute; left: 0; right: 0; top: calc(60% - 4px); height: 8px;
  background: repeating-linear-gradient(90deg, rgba(243, 241, 230, .18) 0 1px, transparent 1px calc(100% / 36)); }
.pay { position: absolute; z-index: 1; top: 60%; left: var(--x); }
.pay i { position: absolute; left: 0; top: 0; width: 11px; height: 11px; background: var(--light); transform: translate(-50%, -50%) rotate(45deg); }
.pay em { position: absolute; left: -4px; bottom: 12px; font: 400 .8rem var(--font-text); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .85; }
.tl-track.us .pay i { width: 15px; height: 15px; background: var(--lime); }
.tl-track.us .pay em { color: var(--lime); opacity: 1; }
.tl-tot { align-self: center; text-align: right; }
.tl-tot b { font: 500 var(--fs-m) var(--font-primary); font-variant-numeric: tabular-nums; }
.tl-tot.us b { color: var(--lime); }
.tl-mini { display: none; }
/* під таймлайном — та сама порівняльна таблиця, що на сайті зараз (текст не губимо) */
.board-foot { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font: 300 .92rem/1.45 var(--font-text); }
.board-foot th, .board-foot td { padding: .75rem 1.3rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(243, 241, 230, .1); }
.board-foot thead th { font: 400 .7rem var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.board-foot thead th.us { color: var(--lime); opacity: 1; }
.board-foot tbody th { font-weight: 400; opacity: .9; }
.board-foot td { opacity: .8; }
.board-foot tr:last-child th, .board-foot tr:last-child td { border-bottom: 0; }
html.anim .tl[data-in]:not(.in) .pay { opacity: 0; transform: scale(.4); }
.tl[data-in].in .pay { opacity: 1; transform: none; transition: opacity .45s, transform .5s var(--ease-out); transition-delay: var(--d); }

/* ── 10. картки-висновки: «дірка» зліва внизу, примарна цифра. Кольори — html[data-cards] (лабораторія) ── */
.finds { margin-top: 8rem; }
.qframe { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 12px; border: 1px solid rgba(243, 241, 230, .1); }
.qc { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; margin: 0;
  padding: 1.6rem 3.5rem 1.8rem 1.8rem; overflow: hidden; color: var(--dark); }
.qc blockquote { position: relative; z-index: 1; margin: 0; max-width: 17em; font: 400 clamp(1.6rem, 2.3vw, 2.1rem)/1.15 var(--font-primary); letter-spacing: -.02em; }
.qc .ghost { position: absolute; right: -1.2rem; bottom: -3.6rem; font: 500 clamp(14rem, 24vw, 22rem)/1 var(--font-primary);
  letter-spacing: -.04em; pointer-events: none; user-select: none; }
.qc .who { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; font: 400 .9rem/1.4 var(--font-text); }
.qc .mk { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--dark); }   /* «дірка» — колір тла сторінки */
.qc .vr { flex: none; width: 1px; height: 40px; background: rgba(6, 7, 10, .14); }
.qc .who b { display: block; font-weight: 500; }
.qc .who span span { color: rgba(6, 7, 10, .62); }
.qc.c1 { background: var(--lime); } .qc.c1 .ghost { color: rgba(255, 255, 255, .38); }
.qc.c2 { background: var(--light); } .qc.c2 .ghost { color: rgba(6, 7, 10, .06); }
html.anim .qframe[data-in]:not(.in) .qc { opacity: 0; transform: translateY(24px); }
.qframe[data-in].in .qc { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.qframe[data-in].in .qc + .qc { transition-delay: .12s; }

/* ── 11. колонки 01 / 02 / 03 ── */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8rem; }
.c3 { padding-right: 2rem; }
.c3 + .c3 { padding-left: 2rem; border-left: 1px solid var(--line); }
.c3 .num { margin: 0; font: 400 .75rem var(--font-text); letter-spacing: .1em; opacity: .45; font-variant-numeric: tabular-nums; }
.c3 h2 { margin: .7rem 0 1rem; font: 500 1.35rem/1.25 var(--font-primary); }
.c3 p, .c3 li { font: 300 1rem/1.6 var(--font-text); opacity: .82; }
.c3 p { margin: 0 0 .9rem; }
.c3 ol { margin: 0 0 .9rem; padding-left: 1.2em; }
.c3 li { margin-bottom: .4rem; }

/* ── 12. заклик ── */
.pre { padding: 9rem 0 7rem; text-align: center; }
.pre-h { max-width: 16ch; margin: 0 auto; font: var(--fw-h1) clamp(2.4rem, 4.4vw, 4rem)/1.1 var(--font-primary); letter-spacing: -.02em; }
.pre-p { max-width: 36rem; margin: 1.5rem auto 2.4rem; font: 300 var(--fs-l)/1.6 var(--font-text); opacity: .8; }

/* ── 13. питання у дві колонки ── */
.qa { padding-top: 4rem; border-top: 1px solid var(--line); }
.qa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; margin-top: 2rem; }
.qa-item { border-top: 1px solid rgba(243, 241, 230, .18); }
.qa-item summary { display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.1rem 0; list-style: none; cursor: pointer; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:focus-visible { outline: 1px solid var(--light); outline-offset: 4px; }
.qa-item h3 { margin: 0; font: 500 var(--fs-m)/1.35 var(--font-primary); }
.qa-item summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: .3rem; transition: transform .2s; }
.qa-item summary i::before, .qa-item summary i::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--light); opacity: .7; }
.qa-item summary i::after { transform: rotate(90deg); }
.qa-item[open] summary i { transform: rotate(45deg); }
.qa-item p { max-width: 52ch; margin: 0; padding: 0 0 1.3rem; font: 300 var(--fs-m)/1.6 var(--font-text); opacity: .8; }

/* ── джерела й підпис ── */
.sources { margin-top: 6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.sources p:not(.cap) { max-width: 52rem; margin: 1rem 0 0; font: 300 .95rem/1.6 var(--font-text); opacity: .65; }

@media (prefers-reduced-motion: reduce) {
  .art [data-in] *, .art [data-in] { transition: none !important; }
}

/* ── телефон і вузькі екрани ── */
@media (max-width: 1000px) {
  .win { grid-template-columns: 1fr; }
  .win-side { display: none; }
  .figs, .cols3 { grid-template-columns: 1fr; }
  .figc, .c3 { padding: 2rem 0 0; }
  .figc + .figc, .c3 + .c3 { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 2rem; }
  .fig-svg { max-width: 240px; margin: 1rem 0 1.5rem; }
}
@media (max-width: 768px) {
  .art { padding: 30% 5% 16%; }
  .art-hero h1 { font-size: 3.2rem; line-height: 3.4rem; }
  .hero-sub { flex-direction: column; align-items: flex-start; }
  .win-doc { padding: 1.4rem 1.1rem 1.6rem; }
  .win-bar { padding: 0 1.1rem; } .win-pg { display: none; }
  .win-doc h2, .sec-h { font-size: 1.8rem; }
  /* телефон: назва й «як платите» — рядком над смугою, значення над смугою від лівого краю (iPhone 15, 22.10) */
  .ch-cols { display: none; }
  .ch-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .2rem; padding-top: .6rem; padding-bottom: .4rem; }
  .ch-lab { text-align: left; } .ch-lab span { display: none; }
  .ch-track { grid-column: 1 / -1; grid-row: 2; height: 42px; }
  .ch-tag { grid-row: 1; grid-column: 2; }
  .ch-grid { left: 0; right: 0; }
  .ch .ch-track .ch-val { top: 2px; left: 0; right: auto; transform: none; }
  .ch .ch-track .ch-bar { top: 75%; }
  .ccard { padding: .2rem 1rem 1rem; }
  .ch-head { flex-direction: column; gap: .3rem; }
  .mir-cols { display: none; }
  .mir-row, .mir-axis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .mir-lab { grid-column: 1 / -1; text-align: left; padding: .5rem 0 0; }
  .mir-lab span { display: inline; margin-left: .4rem; }
  .mir-axis > span:first-child { display: none; }
  .hb-list { display: block; flex-basis: 100%; font: 400 .85rem var(--font-text); opacity: .8; font-variant-numeric: tabular-nums; }
  .seg.narrow .v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tl > .tl-lab:first-child { display: none; }
  .board-foot th, .board-foot td { padding: .6rem .7rem; font-size: .85rem; }
  .proof { padding-top: 4.5rem; }
  .proof ul { flex-direction: column; gap: 1.1rem; }
  .proof b { font-size: 2rem; }
  .statement { padding-top: 5rem; }
  .sec { margin-top: 5rem; padding-top: 3rem; }
  .cols2 { grid-template-columns: 1fr; gap: 2rem; }
  .hb-track { flex-wrap: wrap; }
  .tl { grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1.2rem 1.1rem 1.4rem; }
  .tl-head, .tl-track, .tl-tot-h { display: none; }
  .tl-tot { align-self: start; }
  .tl-mini { display: block; grid-column: 1 / -1; }
  .tl-lab + .tl-track + .tl-tot { display: contents; }
  .tl-tot b { grid-column: 2; grid-row: auto; }
  .tl-mini { width: var(--w); height: 8px; margin: .1rem 0 1rem; background: rgba(243, 241, 230, .55); }
  .tl-tot.us .tl-mini { background: var(--lime); }
  .finds { margin-top: 5rem; }
  .qframe { grid-template-columns: 1fr; }
  .qc { min-height: 320px; padding-right: 1.6rem; }
  .qc .ghost { font-size: 11rem; bottom: -2.6rem; }
  .cols3 { margin-top: 5rem; }
  .pre { padding: 6rem 0 5rem; }
  .qa-cols { grid-template-columns: 1fr; }
}

.ch-market { --lw: 360px; }   /* 22.10 (Олег): підписи в один рядок, графік компактніший */

/* 22.10, третя ітерація (Олег): бокова колонка «вікна» ширша — джерела з датами в один рядок; смуги цін товщі;
   рядок «як читати» під заголовком графіка. На екранах до 1240 px бічна колонка стає смугою над графіком —
   інакше при 260 + 360 px графіку лишалось ~90 px (1001 px). */
.win { grid-template-columns: 260px minmax(0, 1fr); }
.win-it { white-space: nowrap; }
.ch-bar { height: 16px; }
.ch-track.us .ch-bar { height: 18px; }
.ch-note { max-width: 46rem; margin: .5rem 0 0; font: 300 .9rem/1.5 var(--font-text); opacity: .65; }
@media (max-width: 1240px) {
  .win { grid-template-columns: 1fr; }
  .win-side { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.6rem; border-right: 0; border-bottom: 1px solid var(--line); padding: .8rem 1.3rem; }
  .win-brand { padding: 0; margin-right: .6rem; }
  .win-grp { padding: 0; }
  .win-it { padding: 0; } .win-it span { margin-left: .5rem; }
}

/* 22.10, четверта ітерація (Олег): одна ширина колонки з назвами на всіх графіках сторінки — --chart-lw.
   Назви скрізь вирівняні праворуч, біля осі. Лише для ширших за телефон: мобільні правила вище лишаються. */
.art { --chart-lw: 360px; }
@media (min-width: 769px) {
  .ch, .ch-market { --lw: var(--chart-lw); }
  .ch-hours { display: grid; grid-template-columns: var(--chart-lw) minmax(0, 1fr); column-gap: 18px; row-gap: 1.1rem;
    align-items: center; padding: .6rem 0 .4rem; }
  .hb-lab { text-align: right; }
  .hb-lab b { font: 500 .92rem/1.25 var(--font-primary); }
  .hb-lab span { font: 300 .72rem/1.3 var(--font-text); opacity: .5; }
  .tl { grid-template-columns: var(--chart-lw) minmax(0, 1fr) 150px; column-gap: 18px; }
  .tl-lab { text-align: right; }
  .tl-lab b { font: 500 .92rem/1.25 var(--font-primary); }
  .mir-cols, .mir-row, .mir-axis { grid-template-columns: var(--chart-lw) minmax(0, 1fr) minmax(0, 1fr) 64px; }
  .board-foot { table-layout: fixed; }
  .board-foot th:first-child { width: calc(var(--chart-lw) + 1.3rem); }
}
.hb-lab b, .hb-lab span, .tl-lab b, .tl-lab span { display: block; }
.tl-lab span { margin-top: .1rem; font: 300 .72rem/1.3 var(--font-text); opacity: .5; }

/* 22.10 (Олег: ціни — стартові, скрізь «from»): «from» перед великою цифрою — дрібно, над лінією цифри */
.from { font: 300 var(--fs-s) var(--font-text); color: var(--light); opacity: .75; letter-spacing: 0; }
.proof b .from { vertical-align: .55em; margin-right: .2rem; }
/* 22.10: на iPhone 15 «Last updated: October 2026 How we count →» виходив за край на 15 px (nowrap) — переносити */
@media (max-width: 768px) { .hero-sub .hero-meta { white-space: normal; } .hero-meta b { display: block; margin: 0 0 .2rem; } }


/* ═══ 23.10 (журнал №114): розкладка «дві колонки + навігатор» і шкали шрифтів / відступів — з лабораторії
   demo/_proto/cost-3col/ (three.css, type.css; перемикачі лабораторії прибрано, лишився обраний варіант: вузька ¼) ═══ */
/* Лабораторія «три колонки» (22.10.2026): ⅔ — дані, ⅓ — навігатор. Перемикач html[data-layout="wide"] — як зараз на сайті.
   Лише від 1200 px: вужче дві колонки не вміщають графіки — там навігатор стає компактним блоком під заголовком. */

.art-aside { display: none; }

@media (min-width: 1200px) {
  .art { --chart-lw: 300px; }
  .art-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 0 4rem; align-items: start; }
  /* колонка на всю висоту статті: угорі — зміст і ціни, «прилипають»; унизу — демо й посилання, видно наприкінці читання.
     Обгортка .aside-stick закінчується перед посиланнями, тож прилипле їх не накриває (22.10: в одну прилиплу не влазило на 900 px) */
  .art-aside { display: flex; flex-direction: column; align-self: stretch; margin-top: 5rem; }
  .aside-stick { flex: 1; }
  .aside-in { position: sticky; top: 120px; }
  .aside-links { margin-top: 4rem; }

  /* ліва ⅔: що на всю ширину не влазить — перебудувати */
  .win { grid-template-columns: 1fr; }
  .win-side { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.6rem; border-right: 0;
    border-bottom: 1px solid var(--line); padding: .8rem 1.3rem; }
  .win-brand { padding: 0; margin-right: .6rem; }
  .win-grp, .win-it { padding: 0; }
  .win-it span { margin-left: .5rem; }
  .win-doc { padding: 1.8rem 1.8rem 2rem; }
  .proof ul { justify-content: flex-start; gap: 1.4rem 3rem; }
  .qframe { grid-template-columns: 1fr; }
  .qc { min-height: 300px; }
  .qc .ghost { font-size: 15rem; bottom: -3rem; }
  .cols3 { grid-template-columns: 1fr; }
  .c3 { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 2rem 0 0; }
  .c3 + .c3 { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 2rem; }
  .c3 .num { grid-row: 1 / span 9; padding-top: .35rem; }
  .c3 > :not(.num) { grid-column: 2; }
  .qa-cols { grid-template-columns: 1fr; }
  .tl { grid-template-columns: var(--chart-lw) minmax(0, 1fr) 120px; }
}

/* ── навігатор ── */
.aside-in { display: grid; gap: 2rem; padding-bottom: 1rem; }
.art-aside .cap { margin-bottom: .9rem; }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc li a { display: block; margin-left: -1px; padding: .42rem 0 .42rem 1rem; border-left: 1px solid transparent;
  font: 400 .92rem/1.3 var(--font-text); color: var(--light); opacity: .6; text-decoration: none; transition: opacity .2s, color .2s, border-color .2s; }
.toc li a:hover, .toc li a:focus-visible { opacity: 1; }
.toc li a.on { opacity: 1; color: var(--lime); border-left-color: var(--lime); }
/* 27.10 (Олег, журнал №151): зміст згорнуто в один рядок — поточний розділ лаймом, торкання розгортає список.
   Картка з цінами піднімається (ціни: з 1 130 до 877 px). Де пунктів < 4 — змісту немає (site_article.py).
   Без JavaScript — повний список, як було (.fold-on ставить umberform.js) */
.toc-cur { display: none; }
.toc.fold-on .toc-cur { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; box-sizing: border-box;
  padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 2px; background: none; color: var(--lime); cursor: pointer;
  font: 400 .86rem/1.3 var(--font-text); text-align: left; }
.toc-cur span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-cur i { flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform .3s var(--ease-out); }
.toc.open .toc-cur i { transform: translateY(15%) rotate(-135deg); }
.toc-cur:focus-visible { outline: 1px solid var(--lime); outline-offset: 3px; }
.toc.fold-on ol { margin-top: .6rem; }
.toc.fold-on:not(.open) ol { display: none; }
.aside-card { padding: 1.3rem 1.4rem 1.5rem; border: 1px solid var(--line); background: rgba(243, 241, 230, .03); }
.aside-prices { margin: 0; }
.aside-prices div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(243, 241, 230, .1); }
.aside-prices dt { font: 300 .95rem var(--font-text); opacity: .8; }
.aside-prices dd { margin: 0; font: 500 .95rem var(--font-primary); color: var(--lime); font-variant-numeric: tabular-nums; }
.aside-note { margin: .9rem 0 1.2rem; font: 300 .82rem/1.5 var(--font-text); opacity: .65; }
/* 27.10 (Олег, стандарт кнопки, журнал №151): у картці — M 48 px / 16 px, ширина за текстом (було на всю картку —
   рішення 23.10: 267 px на комп'ютері, 433 на планшеті) */
.aside-card .cta-hole { min-height: 48px; padding: 0 22px 0 36px; font-size: 16px; justify-content: center; }
.aside-links ul { margin: 0 0 1.8rem; padding: 0; list-style: none; }
.aside-demos li + li { margin-top: .6rem; }
.aside-demos a { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.aside-demos img { flex: none; width: 64px; height: 48px; object-fit: cover; background: #1b1c20; transition: transform .5s var(--ease-out); }
.aside-demos a:hover img, .aside-demos a:focus-visible img { transform: scale(1.06); }
.aside-demos b { display: block; font: 500 .92rem var(--font-primary); transition: color .2s; }
.aside-demos a:hover b, .aside-demos a:focus-visible b { color: var(--lime); }
.aside-demos span span { display: block; font: 300 .75rem var(--font-text); opacity: .55; }
.aside-more li a { display: flex; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--line);
  font: 400 .92rem var(--font-text); text-decoration: none; opacity: .85; transition: opacity .2s, color .2s; }
.aside-more li:last-child a { border-bottom: 1px solid var(--line); }
.aside-more li a:hover, .aside-more li a:focus-visible { opacity: 1; color: var(--lime); }

/* вужче 1200 px: навігатор — компактним блоком під заголовком (ціни + кнопка), без змісту й демо */
@media (max-width: 1199px) {
  .art-grid { display: flex; flex-direction: column; }
  .art-aside { display: block; order: -1; margin-top: 3rem; }
  .art-aside .toc, .art-aside .aside-links { display: none; }
  .aside-in { position: static; }
  .aside-card { max-width: 30rem; }
}


/* ── варіант «вузька» (22.10, Олег: «права колонка краще вужча»): 12-колонкова сітка — дані 8 колонок, 1 колонка повітря,
   навігатор 3 колонки (¼ замість ⅓). Графікам ширше, навігатор відділений порожнечею, а не рамкою. ── */
@media (min-width: 1200px) {
  .art-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .art-main { grid-column: 1 / span 8; }
  .art-aside { grid-column: 10 / span 3; min-width: 0; }
  .aside-in { gap: 1.7rem; }
  .toc li a { padding: .36rem 0 .36rem .85rem; font-size: .86rem; }
  .aside-card { padding: 1rem 1.05rem 1.15rem; }
  .aside-prices div { padding: .42rem 0; }
  .aside-prices dt, .aside-prices dd { font-size: .86rem; }
  .aside-note { font-size: .78rem; margin: .8rem 0 1rem; }
  .aside-demos img { width: 52px; height: 39px; }
  .aside-demos b, .aside-more li a { font-size: .86rem; }
}

/* Шкала шрифтів статті (22.10.2026, Олег: «побудуй логіку в розмірах шрифтів до всієї сторінки»).
   Основа — стандарт сайту від 24.09 (assets/umberform.css): мінімум 16 px; текст < 24 px — вага ≥ 300, прозорість ≥ .7.
   Замір до правки: понад 25 різних розмірів, дрібне 10,6–15,2 px (зміст і ціни праворуч — 13,8 px).

   Ролі → розміри (кожен текст на сторінці має одну з цих ролей):
     display    96  заголовок сторінки (h1)
     statement  42–56  велика заява: «What actually drives the price?», заклик унизу
     num        40  великі цифри ($200, $1,100…)
     h2         36  заголовок розділу
     quote      26–30  цитата в картці-висновку
     lead       24  вступ під h1; заголовок блоку (01–03) — = --fs-h
     h3 / body  20  заголовок фігури (500); текст статті (300) — = --fs-l
     ui         18  те, що натискають і порівнюють: назви в графіках, ціни й посилання праворуч, кнопки, питання FAQ — = --fs-m
     meta       16  підписи під назвами, значення на смугах, примітки, джерела, зміст сторінки — = --fs-s
     micro      13  ЛИШЕ великі літери з розрядкою (ON THIS PAGE, PRICE RANGE), підписи осей, цифри всередині смуг —
                    виняток зі стандарту 16 px: великі літери 13 px читаються як 16 px малими; вага 500, прозорість ≥ .7
   Після схвалення — у assets/article.css (і змінні — у :root assets/umberform.css для наступних сторінок). */

.art {
  --t-display: 6rem; --t-statement: clamp(2.6rem, 3.6vw, 3.5rem); --t-num: 2.5rem; --t-h2: 2.25rem;
  --t-quote: clamp(1.6rem, 2vw, 1.875rem); --t-lead: var(--fs-h); --t-h3: var(--fs-l); --t-body: var(--fs-l);
  --t-ui: var(--fs-m); --t-meta: var(--fs-s); --t-micro: .8125rem;
}
/* micro — одна манера на всю сторінку */
.art .cap, .win-grp, .ch-head span, .ch-cols span, .tl-head .yr, .tl-tot-h, .board-foot thead th, .art-aside .cap, .c3 .num {
  font: 500 var(--t-micro)/1.3 var(--font-text) !important; letter-spacing: .12em !important; text-transform: uppercase; opacity: .72 !important; }
.ch-grid em, .tl-head .mo, .seg .v { font-size: var(--t-micro) !important; font-weight: 500 !important; }
.ch-grid em, .tl-head .mo { opacity: .72 !important; }

/* заголовки */
.art-hero h1 { font-size: var(--t-display); line-height: 1.06; }
.statement .big, .pre-h { font-size: var(--t-statement) !important; line-height: 1.1 !important; }
.win-doc h2, .sec-h { font-size: var(--t-h2) !important; }
.c3 h2 { font-size: var(--t-lead) !important; line-height: 1.25 !important; }
.figc h3, .qa-item h3 { font: 500 var(--t-h3)/1.3 var(--font-primary) !important; }
.proof b { font-size: var(--t-num) !important; }
.proof-sm b { font-size: 2rem !important; }
.qc blockquote { font-size: var(--t-quote) !important; line-height: 1.2 !important; }

/* текст статті — 20 / 300 скрізь, де людина читає */
.hero-sub p:not(.hero-meta) { font-size: var(--t-lead) !important; }
.win-doc > p, .sec-lead, .sec-after, .lede p, .cols2 li, .c3 p, .c3 li, .pre-p, .qa-item p {
  font-size: var(--t-body) !important; font-weight: 300 !important; line-height: 1.6 !important; opacity: .85 !important; }

/* ui — 18: що натискають і порівнюють */
.hero-meta, .hero-meta b, .cols2 .more, .ch-head b, .board-h b, .win-brand, .win-ttl,
.ch-lab b, .hb-lab b, .tl-lab b, .tl-tot b, .aside-prices dt, .aside-prices dd, .aside-demos b, .aside-more li a { font-size: var(--t-ui) !important; }
/* кнопки «крапка-дірка» — розмір сайту (20 px, assets/umberform.css), не роль ui: 23.10 у картці вийшла нижчою за решту сайту */
.ch-lab b, .hb-lab b, .tl-lab b { font-weight: 500 !important; line-height: 1.3 !important; }
.aside-prices dt { font-weight: 300 !important; opacity: .85 !important; }
.tl-tot b { font-size: var(--t-h3) !important; }

/* meta — 16: підписи, значення, примітки, джерела, зміст */
.ch-lab span, .hb-lab span, .tl-lab span, .ch-val, .ch-tag, .ch-note, .stage-note, .win-it, .win-bar, .win-id,
.proof span, .figc p, .hb-legend li, .hb-note, .hb-list, .pay em, .board-h span, .board-foot th, .board-foot td,
.qc .who, .sources p:not(.cap), .toc li a, .aside-note, .aside-demos span span, .art-aside .aside-more li a span {
  font-size: var(--t-meta) !important; }
.ch-lab span, .hb-lab span, .tl-lab span, .ch-tag, .win-it span, .board-h span, .figc p, .hb-note, .aside-demos span span, .aside-note,
.sources p:not(.cap), .stage-note, .ch-note { opacity: .75 !important; font-weight: 300 !important; }
.ch-lab span, .tl-lab span, .hb-lab span { line-height: 1.35 !important; margin-top: .15rem !important; }
.toc li a { opacity: .78; }
.toc li a.on { opacity: 1; }

/* під нові розміри — трохи більше повітря в рядках графіків і колонка назв ширша */
.ch-row { min-height: 56px; }
.ch-track { height: 56px; }
.ch-hours { row-gap: 1.3rem !important; }
.hb-bar { height: 36px; } .seg .v { line-height: 36px !important; }
@media (min-width: 1200px) { .art { --chart-lw: 320px; } }

/* телефон: заголовки менші, текст статті — 18 */
@media (max-width: 768px) {
  .art { --t-display: 3.2rem; --t-statement: 2.4rem; --t-num: 2rem; --t-h2: 1.8rem; --t-lead: var(--fs-l); --t-body: var(--fs-m); --t-quote: 1.5rem; }
  .ch-row, .ch-track { min-height: 0; }
}

/* після заміру 22.10 (1280 px): «Small website / from $2,000» ламалось на 18 px у вузькій колонці → «from» — у підписі картки;
   підписи значень ринку налазили на край → у вузькій розкладці значення над смугою (праворуч від кінця смуги — у трьох
   правих рядках); підписи під назвами — рівними рядками, без «сироти» в одне слово */
.aside-prices dt, .aside-prices dd { white-space: nowrap; }
.ch-lab span { text-wrap: balance; }
@media (min-width: 1200px) {
  .ch-market .ch-val { top: 4px; left: var(--a); right: auto; transform: none; }
  /* перший у .ch-body — сітка, тож рядки: 2 конструктор, 3 шаблон, 4 фрилансер, 5 ми, 6 агенція */
  .ch-market .ch-row:nth-child(n+4) .ch-val { left: auto; right: calc(100% - var(--b)); }
  .ch-market .ch-bar { top: 74%; }
  .ch-market .ch-row { min-height: 64px; }
  .ch-market .ch-track { height: 64px; }
}

/* ── «вікно» ринку, 22.10: легенда кольорів у смузі, джерела внизу (замість бокової панелі) ── */
.win { grid-template-columns: 1fr !important; }
.win-bar { flex-wrap: wrap; height: auto !important; min-height: 50px; padding: .7rem 1.6rem !important; gap: .5rem 1.6rem !important; }
.win-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.win-legend > span { display: inline-flex; align-items: center; gap: .55rem; font: 400 var(--t-meta) var(--font-text); opacity: .85; }
.win-legend > span.us { color: var(--lime); opacity: 1; }
.win-legend .k { width: 18px; height: 8px; }
.win-bar .win-pg { margin-left: auto; display: block !important; font: 400 var(--t-meta) var(--font-text); opacity: .72; }
.win-src { padding: 1.4rem 1.8rem 1.6rem; border-top: 1px solid var(--line); background: rgba(243, 241, 230, .02); }
.win-src ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.win-src li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding-top: .8rem; border-top: 1px solid rgba(243, 241, 230, .1); }
.win-src b { font: 500 var(--t-meta)/1.35 var(--font-primary); }
.win-src span { grid-column: 1; font: 300 var(--t-meta)/1.4 var(--font-text); opacity: .75; }
.win-src em { grid-column: 2; grid-row: 1; font: 400 var(--t-meta) var(--font-text); font-style: normal; opacity: .72; white-space: nowrap; }
@media (max-width: 768px) { .win-src ul { grid-template-columns: 1fr; } .win-bar .win-pg { margin-left: 0; } }

/* ── картки-висновки, 22.10 (Олег: «одна біля одної, одна ширша, друга вужча»): 3 : 2 у вузькій розкладці.
   Велика — цитата 26–30 px, мала — 24 px (роль lead), примарні цифри під розмір картки ── */
@media (min-width: 1200px) {
  .qframe { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; }
  .qc { min-height: 400px !important; padding: 1.5rem 1.5rem 1.6rem 1.6rem !important; }
  .qc.c1 .ghost { font-size: 17rem !important; bottom: -3.4rem !important; }
  .qc.c2 .ghost { font-size: 12rem !important; bottom: -2.4rem !important; }
}
.qc.c2 blockquote { font-size: var(--t-lead) !important; line-height: 1.25 !important; }

/* колонка назв у графіках, 22.10: дворядкові підписи праворуч мали рваний лівий край і читались погано →
   ліворуч; колонка підписана в шапці («WHO BUILDS IT · WHAT YOU GET») */
.ch-lab, .hb-lab, .tl-lab { text-align: left !important; }
.ch-lab span { text-wrap: pretty; }
.win-src li { align-content: start; }
/* рядки графіків — з повітрям і тонкою лінією між ними: дворядкові підписи злипались із назвою наступного рядка */
.ch-row { padding-top: .75rem !important; padding-bottom: .75rem !important; border-top: 1px solid rgba(243, 241, 230, .07); }
.ch-body > .ch-row:nth-child(2) { border-top: 0; }
/* тижні у вузькій розкладці: колонка «us / market» дублює колір — прибрано, доріжці ширше */
@media (min-width: 1200px) {
  .ch-weeks { --tw: 0px; }
  .ch-weeks .ch-tag, .ch-weeks .ch-cols span:last-child { display: none; }
}

/* ── заклик унизу, 22.10: панель, як «вікно» й картки (не центрований блок) ── */
.pre.pre-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start;
  margin-top: 7rem; padding: 2.2rem 2.4rem 2.4rem; text-align: left; border: 1px solid var(--line);
  border-left: 3px solid var(--lime); background: rgba(243, 241, 230, .025); }
.pre-panel .pre-h { max-width: none; margin: .9rem 0 0; font-size: var(--t-h2) !important; line-height: 1.15 !important; }
.pre-panel .pre-p { max-width: none; margin: 0 0 1.6rem !important; }
.pre-panel .cta-hole { justify-self: start; }
@media (max-width: 1000px) { .pre.pre-panel { grid-template-columns: 1fr; row-gap: 1.4rem; padding: 1.6rem 1.4rem 1.8rem; } }

/* ── питання — у дві колонки й у вузькій розкладці (22.10, Олег) ── */
@media (min-width: 1200px) {
  .qa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 2.5rem !important; }
}
/* питання FAQ — те, що натискають → роль ui (18), не h3 (20): у двох колонках 20 px ламало питання на два рядки */
.qa-item h3 { font-size: var(--t-ui) !important; }

/* ── 22.10, нижній блок і «from» ── */
/* «from» перед ціною — роль meta (16, 300), сама ціна — як була; у картці праворуч рядок може перейти на два — тоді ціна праворуч */
.aside-prices div { flex-wrap: wrap; column-gap: .6rem; }
.aside-prices dd { margin-left: auto !important; }
.from { font: 300 var(--t-meta) var(--font-text); color: var(--light); opacity: .75; letter-spacing: 0; }
.proof b .from { font-size: var(--t-meta); vertical-align: .55em; margin-right: .2rem; }
/* кнопка в картці цін — сховати, поки на екрані панель заклику (lab.js) */
/* підпис автора й дата — вгорі, праворуч від вступу, двома рядками */
.hero-sub .hero-meta { display: grid; gap: .35rem; justify-items: end; white-space: normal !important; text-align: right; }
.hero-meta .by { font: 400 var(--t-meta) var(--font-text); opacity: .8; }
@media (max-width: 768px) { .hero-sub .hero-meta { justify-items: start; text-align: left; } }
/* панель заклику — колонки однакової ваги, вирівняні по центру */
.pre.pre-panel { align-items: center !important; }
.pre-panel .pre-h { margin-bottom: 1.6rem !important; }
.pre-panel .pre-p { margin: 0 !important; }


/* ── 22.10 (Олег): демо — в один рядок; підписи по центру під кадрами — «Architecture» (93 px при 16 px) ширше за колонку
   (81 px на 1280), центрована назва заходить у проміжок по 6 px і сусідів не торкається ── */
.aside-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aside-demos li + li { margin-top: 0 !important; }
.aside-demos a { flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.aside-demos img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
.aside-demos b, .aside-demos span span { white-space: nowrap; }
.aside-demos a > span { display: block; }

/* ── кнопка розбору — лише праворуч; ліва панель показує на неї («паркування», lab.js) ── */
.pre-cue { display: none; }
@media (min-width: 1200px) {
  .pre-panel .cta-hole { display: none; }
  .pre-cue { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font: 500 var(--t-ui) var(--font-primary); }
  .pre-cue i { font-style: normal; font-size: 1.6rem; line-height: 1; color: var(--lime);
    transition: transform .5s var(--ease-out); }
  .pre-panel.is-parked .pre-cue i { transform: translateX(8px); }
  .pre.pre-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aside-card { transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .aside-card.is-parked { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
  .aside-in { padding-bottom: 0; }
}
/* демо в рядку — підписи до кадрів: назва — meta 16 px, назва демо — micro (13, великі літери); проміжок 14 px.
   Заміряно 22.10 на 1280: колонка 80 px; Furniture 68 · Architecture 93 · Interiors 62; TARNHOLM 77 · VORMLAND 80 · SALTHOLM 73 */
.aside-demos { gap: 14px !important; }
.aside-demos b { font: 500 var(--t-meta)/1.3 var(--font-primary) !important; }
.aside-demos span span { font: 500 var(--t-micro)/1.3 var(--font-text) !important; letter-spacing: .06em; text-transform: uppercase; opacity: .72 !important; margin-top: .1rem; }

/* 22.10 (Олег): підписи демо — від лівого краю, як решта тексту. Кадри однієї висоти; колонка «Architecture» (93 px)
   ширша за інші — інакше від лівого краю назва налазила б на сусідню (колонка 80 px на 1280) */
.aside-demos { grid-template-columns: minmax(68px, 1fr) minmax(93px, 1.25fr) minmax(62px, 1fr) !important; }
.aside-demos a { align-items: flex-start !important; text-align: left !important; }
.aside-demos img { aspect-ratio: auto !important; height: 72px !important; object-fit: cover; }
.aside-links ul { margin-bottom: 0 !important; }

/* 23.10 (Олег): кнопка на всю ширину картки — текст при наведенні з'являється на тому самому місці, що й у спокої
   (на сайті кнопка за шириною тексту й обидва написи по центру; тут спокійний — ліворуч, тож і наведений — ліворуч) */
.aside-card .cta-hole .t2 { justify-content: center; padding-left: 0; }   /* 27.10: кнопка за текстом — обидва написи по центру, як скрізь */

/* «from» — одною колонкою: ціни праворуч у колонці однакової ширини, «from» — праворуч від неї, на одній лінії
   (23.10, Олег: «from написаний криво» — у кожному рядку починався в іншому місці, бо ціни різної ширини) */
.aside-prices dd { display: grid; grid-template-columns: auto 3.6em; column-gap: .4rem; align-items: baseline; text-align: right; }   /* 3.6em — під «$3,300» (~60 px) */
.aside-prices dd .from { justify-self: end; }
/* 1280 px: у картці ~231 px — назва й ціна в один рядок; кнопка — висота й шрифт сайту, лише правий відступ менший (34 → 16),
   інакше «Get a free review» на 20 px ламався на два рядки */
.aside-prices div { flex-wrap: nowrap !important; align-items: baseline; }
.aside-card .cta-hole { white-space: nowrap; }

/* 23.10 (Олег, знімок): на широкому екрані кнопка в картці ширша за 420 px, до яких росте «дірка» на сайті
   (assets/umberform.css), — правий край лишався лимонним. Тут дірка росте до 900 px (кнопка до ~560 px на 2560),
   трохи довше, щоб швидкість на око була та сама */
/* 27.10: кнопка тепер за текстом (~205 px) — 420 px дірки сайту вистачає, окремі 900 px не потрібні */

/* ── рядки цифр, 23.10 (Олег: «ужасно зроблений, скільки тут колонок?» — колонок не було, пари стояли підряд):
   рівні колонки на всю ширину лівої частини (4 у першому, 3 в обслуговуванні), лінія зверху, число над підписом,
   «from» дрібно в рядку перед числом, на одній базовій лінії; телефон — 2 колонки ── */
.proof ul { display: grid !important; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 1.5rem !important; }
.proof-sm ul { --n: 3; }
.proof li { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: .45rem !important;
  padding-top: 1rem; border-top: 1px solid var(--line); }
.proof b { display: flex; align-items: baseline; gap: .35rem; line-height: 1 !important; white-space: nowrap; }
.proof b .from { vertical-align: baseline !important; margin: 0 !important; }
.proof span:not(.from) { line-height: 1.35; }
@media (max-width: 768px) { .proof ul, .proof-sm ul { --n: 2; row-gap: 1.6rem !important; } }

/* ── 23.10 (Олег, 4 знімки) ── */
/* 1, 4: весь текст статті — однієї ширини (--measure, як був ~46rem) і рівний з обох боків, тож правий край однаковий у всіх
   розділах, включно з 01–03. Лише від 1200 px: на телефоні вирівнювання з обох боків дає дірки між словами (замір 23.10) */
.art { --measure: 46rem; }
.art .hero-sub p:not(.hero-meta), .art .win-doc > p, .art .sec-lead, .art .sec-after, .art .lede p, .art .stage-note,
.art .ch-note, .art .c3 p, .art .c3 ol { max-width: var(--measure) !important; }
@media (min-width: 1200px) {
  .art .hero-sub p:not(.hero-meta), .art .win-doc > p, .art .sec-lead, .art .sec-after, .art .lede p, .art .stage-note, .art .c3 p {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
}
/* 2: легенда годин — на всю ширину блоку, а не зібрана ліворуч */
.hb-legend { justify-content: space-between; }
/* 3: цифри обслуговування — того ж розміру, що й верхній рядок цифр (роль num) */
.proof-sm b { font-size: var(--t-num) !important; }
/* правий край тексту — одна лінія для всіх розділів: межа рахується від лівого краю лівої частини, тож у 01–03 (зсув під номер)
   і в панелі ринку (внутрішній відступ) ширина менша на цей зсув */
@media (min-width: 1200px) {
  .art .c3 p, .art .c3 ol { max-width: calc(var(--measure) - 4rem) !important; }
  .art .win-doc > p { max-width: calc(var(--measure) - 1.8rem - 1px) !important; }
}
.art .hb-legend { display: flex !important; justify-content: space-between !important; }
/* легенда годин — 5 колонок в один ряд на всю ширину блоку (п'ятий пункт падав на другий рядок); довгі підписи
   переносяться всередині своєї колонки, кольоровий квадратик — біля першого рядка */
@media (min-width: 769px) {
  .art .hb-legend { display: grid !important; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between !important; column-gap: 1.5rem; }
  .art .hb-legend li { align-items: flex-start; }
  .art .hb-legend i { flex: none; margin-top: .45em; }
}
/* на ≤ 1500 px ліва частина вужча за 46rem — ширина тексту менша, щоб правий край був однаковий в усіх блоках */
@media (min-width: 1200px) and (max-width: 1499px) { .art { --measure: 41rem; } }

/* ── панель заклику, варіант Б (23.10, Олег): підпис окремим рядком над обома колонками; заголовок і абзац — з однієї
   лінії; рядок зі стрілкою — внизу правої колонки. .pre-l/.pre-r «розчиняються» в сітку панелі (display: contents) ── */
@media (min-width: 1200px) {
  .pre.pre-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto 1fr; grid-template-areas: "cap cap" "h p" "h cue"; align-items: start !important; row-gap: 0; }
  .pre-panel .pre-l, .pre-panel .pre-r { display: contents; }
  .pre-panel .cap { grid-area: cap; margin: 0 0 1.1rem; }
  .pre-panel .pre-h { grid-area: h; margin: 0 !important; }
  .pre-panel .pre-p { grid-area: p; margin: 0 !important; }
  .pre-panel .pre-cue { grid-area: cue; align-self: end; }
  /* перший рядок заголовка й абзацу — верх літер на одній лінії (у заголовка рядок щільніший) */
  .pre-panel .pre-h { line-height: 1.15 !important; padding-top: .1rem; }
}

/* ── шкала відступів, 23.10 (Олег: «відступи всюди по-різному; має бути видно, що до якого блоку належить»).
   Замір до правки (1440): заголовок → текст 0/19/22/32; текст → графік 38/42/72; графік → текст 19/56; цифри — за 112 px
   від свого «вікна»; лінія питань упритул до панелі (0 px); розділи відділені то лінією, то порожнечею.
   Правило (що ближче — то тісніше пов'язане):
     16  абзац → абзац; підпис під графіком
     24  заголовок → його текст
     40  текст ↔ графік / таблиця / малюнок (до й після)
     64  лінія розділу → заголовок; блок, що підсумовує попередній (цифри під «вікном», заклик під «What to prepare»)
     128 + лінія — між розділами, однаково всюди ── */
.art { --s1: 1rem; --s2: 1.5rem; --s3: 2.5rem; --s4: 4rem; --s5: 8rem; }

/* розділи: 128 + лінія + 64 — однаково для всіх, включно з «What actually drives…», картками, 01–03 і питаннями */
.art .sec, .art .statement, .art .finds, .art .cols3, .art .qa {
  margin-top: var(--s5) !important; padding-top: var(--s4) !important; border-top: 1px solid var(--line) !important; }
/* блоки-підсумки — належать попередньому, тож 64 без лінії */
.art .stage + .proof { padding-top: 0 !important; margin-top: var(--s4) !important; }
.art .pre.pre-panel { margin-top: var(--s4) !important; }
.art .cols3 .c3:first-child { padding-top: 0 !important; }

/* заголовок → текст: 24 */
.art .sec-lead, .art .win-doc h2 + p, .art .lede > p:first-child { margin-top: var(--s2) !important; }
.art .statement .lede { margin-top: 0 !important; }
.art .proof-sm { padding-top: var(--s2) !important; }
.art .qa-cols { margin-top: var(--s2) !important; }
.art .c3 h2 { margin-bottom: var(--s2) !important; }

/* текст ↔ графік / таблиця / малюнок: 40 */
.art .sec-lead + .cols2, .art .sec-lead + .ccard, .art .sec-lead + .board, .art .ch-head { margin-top: var(--s3) !important; }
.art .ccard > .ch-head:first-child { margin-top: 1.2rem !important; }
.art .figs { margin-top: var(--s3) !important; margin-bottom: 0 !important; }
.art .figs + .lede > p:first-child { margin-top: var(--s3) !important; }
.art .ccard + .sec-after, .art .board + .sec-after, .art .proof + .sec-after, .art .cols2 + .sec-after { margin-top: var(--s3) !important; }

/* абзац → абзац, підписи: 16 */
.art .sec-after + .sec-after, .art .lede > p + p, .art .c3 p + p { margin-top: var(--s1) !important; }
.art .c3 p { margin-bottom: 0 !important; } .art .c3 p + ol, .art .c3 ol + p { margin-top: var(--s1) !important; }
.art .proof .cap, .art .stage-note { margin-top: var(--s1) !important; }
/* пункти 01–03 між собою — лінія і 40 / 40 (крок «текст ↔ блок»), було 32 / 32 */
@media (min-width: 1200px) { .art .c3 + .c3 { margin-top: var(--s3) !important; padding-top: var(--s3) !important; } }

/* ── 23.10 /website-redesign/ (журнал №115–118): ті самі блоки, що на цінах, + картки діагнозу, кроки, карта адрес ── */
.art .sec .cols3-tight { margin-top: var(--s3) !important; padding-top: 0 !important; border-top: 0 !important; }
.art .cols3-tight + .sec-after { margin-top: var(--s3) !important; }
.art .c3 h3 { margin: .7rem 0 0; font: 500 var(--t-lead)/1.25 var(--font-primary); }
.art .c3 h3 + p { margin-top: var(--s1) !important; }
.c3-fix b { font-weight: 400; color: var(--teal); }
.art .c3 .c3-price { font: 400 var(--fs-m)/1.4 var(--font-text); color: var(--lime); opacity: 1; }
.art .c3 ul { margin: 0; padding-left: 1.2em; }
.art .c3 p + ul { margin-top: var(--s1) !important; }
.art .c3 ul li { margin-bottom: .4rem; }
.redirect-map code { font: 400 .85rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0; }
.redirect-map td:last-child { color: var(--lime); opacity: .9; }
.steps { counter-reset: st; list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: var(--measure); }
.steps li { counter-increment: st; position: relative; margin: 0 0 var(--s1); padding-left: 3rem; font: 300 var(--fs-l)/1.5 var(--font-text); opacity: .85; }
.steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: .35em; font: 400 .75rem var(--font-text); letter-spacing: .1em; opacity: .55; font-variant-numeric: tabular-nums; }
.steps b, .cols2 li b, .c3 li b { font-weight: 500; }
.art .steps + .sec-after { margin-top: var(--s3) !important; }
.art .stage-note:has(+ .sec) { margin-bottom: 0; }
/* карта адрес на телефоні — рядок у стовпчик (iPhone 23.10: таблиця 453 px на екрані 393) */
@media (max-width: 640px) {
  .redirect-map { table-layout: auto !important; }
  .redirect-map thead { display: none; }
  .redirect-map tr { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(243, 241, 230, .1); }
  .redirect-map tr:last-child { border-bottom: 0; }
  .redirect-map th, .redirect-map td { display: block; width: auto !important; padding: .15rem .9rem !important; border: 0 !important; }
  .redirect-map td:nth-child(2) { font-size: .8rem; opacity: .6; }
  .redirect-map td:last-child::before { content: '→ '; }
  .redirect-map code { word-break: break-all; }
}
/* ── 23.10 /website-review/ (№119): оцінка в «вікні»-розборі, таблиця правок, список без номерів ── */
.art .win-doc .review-score { margin-top: var(--s3) !important; }
.art .win-doc .review-score + .cols2 { margin-top: var(--s3); }
.fixes td:last-child { color: var(--lime); opacity: .9; }
.fixes tr.big th, .fixes tr.big td { opacity: .7; }
.steps.plain li::before { content: '—'; top: .1em; font-size: 1rem; }
@media (max-width: 640px) {
  .fixes { table-layout: auto !important; }
  .fixes thead { display: none; }
  .fixes tr { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(243, 241, 230, .1); }
  .fixes tr:last-child { border-bottom: 0; }
  .fixes th, .fixes td { display: block; width: auto !important; padding: .15rem .9rem !important; border: 0 !important; }
  .fixes td:nth-child(2) { opacity: .6; }
}

/* ── 23.10 довідники /guides/… (№122): блок коду й код у тексті ── */
.art pre.code { max-width: 100%; margin: var(--s2) 0 0; padding: 1.2rem 1.4rem; overflow-x: auto; background: rgba(243, 241, 230, .04);
  border: 1px solid var(--line); font: 400 .85rem/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--light); white-space: pre; }
.art pre.code + .sec-after { margin-top: var(--s3) !important; }
.art p code, .art li code { font: 400 .9em ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--lime); }
.art .ccard + .ccard { margin-top: var(--s3); }
.art .proof-sm + .sec-after { margin-top: var(--s3) !important; }

/* довідник №2 (№124): у таблиці правок назва сторінки — окремим рядком над причиною */
.fixes-5 tbody th b { display: block; margin-bottom: .2rem; color: var(--lime); font-weight: 500; }

/* довідник №3 (№126): карта адрес на 4 колонки — справжні рядки виділено */
.redirect-map tr.real th code, .redirect-map tr.real td:first-of-type { color: var(--lime); }
.redirect-map.map-4 td:nth-child(3) { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .redirect-map.map-4 td:nth-child(3) { font-size: .8rem; opacity: .6; } }
.redirect-map.map-4 code { font-size: .78rem; }
.redirect-map.map-4 td:last-child code { word-break: break-all; }

/* довідник №4 (26.10, журнал №127–128): 20 сайтів бюро — таблиця, телефон стовпчиком, як карта адрес */
.sites-map td:nth-child(2), .sites-map td:nth-child(3) { font-variant-numeric: tabular-nums; }
.sites-map td:last-child { color: var(--lime); opacity: .9; }
@media (max-width: 640px) {
  .sites-map { table-layout: auto !important; }
  .sites-map thead { display: none; }
  .sites-map tr { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(243, 241, 230, .1); }
  .sites-map tr:last-child { border-bottom: 0; }
  .sites-map th, .sites-map td { display: block; width: auto !important; padding: .15rem .9rem !important; border: 0 !important; }
  .sites-map td:nth-child(3) { opacity: .6; font-size: .85rem; }
  .sites-map td:last-child::before { content: '→ '; }
}

/* хаб /guides/ (26.10, журнал №131): чотири довідники — картки-посилання 2 × 2, на телефоні стовпчиком */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--s3); border-top: 1px solid var(--line); }
.hub-card { display: block; padding: 2rem 2rem 2.2rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.hub-card:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--line); }
.hub-card .num { margin: 0; font: 400 .75rem var(--font-text); letter-spacing: .1em; opacity: .45; font-variant-numeric: tabular-nums; }
.hub-card h3 { margin: .7rem 0 1rem; font: 500 1.35rem/1.25 var(--font-primary); transition: color .2s ease; }
.hub-card p:not(.num) { margin: 0 0 1.2rem; font: 300 1rem/1.6 var(--font-text); opacity: .82; }
.hub-more { font: 400 .78rem var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.hub-card:hover h3, .hub-card:focus-visible h3 { color: var(--lime); }
@media (max-width: 640px) {
  .hub { grid-template-columns: 1fr; }
  .hub-card, .hub-card:nth-child(even) { padding: 1.6rem 0; border-left: 0; }
}
/* картка хаба — посилання цілком, але без загального підкреслення .art a (знімок 26.10: підкреслено весь текст) */
.art a.hub-card { text-decoration: none; }
.art a.hub-card:hover .hub-more, .art a.hub-card:focus-visible .hub-more { text-decoration: underline; text-underline-offset: 3px; }


/* ── Зворот карток-доказів (27.10, Олег, журнал №157–158; лабораторія demo/_proto/proof-cards/, варіант F «дірка»).
   Лицьовий бік — як був. Торкання чи клік відкриває темний зворот: чорний кружок картки (.mk) розростається на всю картку,
   як крапка кнопок сайту (.cta-hole). Розмітка — tools/site_proof.py, поведінка — assets/umberform.js (.on, --hx --hy --hr).
   Лише по кліку (як фото на About, 30.09); «менше анімацій» — зворот просто проступає */
.qc.qf { cursor: pointer; }
.qf-back { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 1.6rem 1.8rem 1.7rem;
  background: #0B0C10; color: var(--light); pointer-events: none;
  clip-path: circle(0 at var(--hx, 40px) var(--hy, 90%)); transition: clip-path .75s cubic-bezier(.65, 0, .25, 1); }
.qc.on .qf-back { pointer-events: auto; clip-path: circle(var(--hr, 150%) at var(--hx, 40px) var(--hy, 90%)); }
.qc.qf .mk { transition: transform .45s var(--ease-out); }
/* 27.10 (Олег, №160: «без затримки, розкривається трохи, текст — одразу»): на комп'ютері мишка на картці — кружок одразу стає
   колом 130 px, крізь нього видно зворот разом із текстом; клік — відкриває повністю; мишка пішла — коло закривається.
   Телефон — лише торкання */
@media (hover: hover) and (pointer: fine) {
  .qc.qf.peek:not(.on) .qf-back { clip-path: circle(130px at var(--hx, 40px) var(--hy, 90%)); transition-duration: .45s; }
  /* підпис лицьового боку ховається, поки коло відкрите: інакше на межі кола змішується з текстом звороту */
  .qc.qf .who > span:last-child { transition: opacity .3s; } .qc.qf.peek .who > span:last-child { opacity: 0; }
}
}
@media (prefers-reduced-motion: reduce) {
  .qf-back { clip-path: none; opacity: 0; transition: opacity .3s; }
  .qc.on .qf-back { clip-path: none; opacity: 1; }
}
.qf-h { margin: 0 0 20px; font: 400 12px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.qf-viz { margin-bottom: auto; }
.qf-m { margin: 24px 0 0; padding-right: 8.5rem; font: 400 .9rem/1.4 var(--font-text); opacity: .65; }
/* графіки звороту: світлі лінії, наше — лаймом; смуги ростуть, коли зворот відкрито */
.v-bars { display: grid; gap: 10px; }
.vb { display: grid; grid-template-columns: minmax(6.5em, 36%) minmax(0, 1fr) auto; align-items: center; gap: 12px; font: 400 .9rem/1.2 var(--font-text); }
.vb-t { height: 14px; border-radius: 2px; background: rgba(243, 241, 230, .1); overflow: hidden; }
.vb-t i { display: block; height: 100%; width: 0; background: rgba(243, 241, 230, .38); transition: width 1s var(--ease-out) .35s; }
.qc.on .vb-t i { width: var(--w); }
.vb.us .vb-t i { background: var(--lime); }
.vb b { min-width: 4.6em; text-align: right; font: 500 1.05rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.vb:not(.us) b { opacity: .6; } .vb.us b { color: var(--lime); }
.v-dots { display: flex; flex-wrap: wrap; gap: 8px; max-width: 290px; }
.vd i { display: block; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid rgba(243, 241, 230, .4); border-radius: 50%; }
.vd.on i { background: var(--lime); border-color: var(--lime); }
.v-dots.lab { max-width: none; gap: 10px 24px; }
.v-dots.lab .vd { display: flex; align-items: center; gap: 8px; font: 400 .95rem/1.2 var(--font-text); }
.v-dots.lab .vd:not(.on) { opacity: .55; }
.v-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 1rem/1.3 var(--font-text); }
.v-checks li { display: flex; gap: 10px; }
.v-checks i { font-style: normal; font-weight: 600; color: var(--lime); }
.v-codes { display: grid; gap: 8px; }
.vc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid rgba(243, 241, 230, .2); border-radius: 2px; font: 400 .9rem/1.2 var(--font-text); }
.vc code { font: 500 .9rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vc span { opacity: .7; }
.vc i { font-style: normal; font-weight: 700; }
.vc.ok i { color: var(--lime); } .vc.bad { opacity: .55; }
.v-tpl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.t-a { display: grid; grid-template-columns: repeat(10, 14px); gap: 4px; }
.t-a i { width: 14px; height: 18px; border-radius: 1px; background: var(--light); opacity: .8; }
.t-b { display: flex; align-items: flex-end; gap: 10px; }
.t-b i { display: block; box-sizing: border-box; }
.t-b i:nth-child(1) { width: 40px; height: 40px; border: 1.5px solid var(--light); }
.t-b i:nth-child(2) { width: 40px; height: 40px; border: 1.5px solid var(--light); border-radius: 50%; }
.t-b i:nth-child(3) { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--light); }
.v-unit { margin: 12px 0 0; font: 400 .8rem/1.35 var(--font-text); opacity: .62; }
/* позначка «↻ The numbers» — унизу праворуч, у рядку підпису; на телефоні — над підписом, у потоці */
.qf-hint { position: absolute; right: 1.1rem; bottom: 1.5rem; z-index: 3; padding: .35rem .65rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 12px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--light);
  background: rgba(6, 7, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s; }
.qc.on .qf-hint { background: rgba(243, 241, 230, .14); }
.qf-hint:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.qf-from { display: none; } .qc.on .qf-from { display: inline; } .qc.on .qf-to { display: none; }
.qc.qf .who { padding-right: 8.5rem; }
@media (max-width: 768px) {
  .qf-back { padding: 1.4rem 1.4rem 1.5rem; }
  .qf-the { display: none; }
  .qc.qf .who, .qf-m { padding-right: 0; }
  .qc.qf .who { margin-top: 0; }
  .qf-hint { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: auto 0 12px; }
}

/* 27.10 (Олег, журнал №163): заголовок сторінки — на ширину основної колонки (8 із 12, до краю тексту статті), рядки
   рівної довжини (balance); було 16ch — вузький стовпчик біля лівого краю. Вужче 1200 px — уся ширина */
.art-hero h1 { max-width: none; text-wrap: balance; }
@media (min-width: 1200px) { .art-hero h1 { max-width: calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px); } }

/* 27.10 (Олег, журнал №164): єдиний стандарт заголовків (заміряно 14 сторінок: h2 мали 52 · 36 · 24 px, h3 — 24 · 22 · 20 · 18).
   h1 — один кегль (--t-display), у межах основної колонки;
   h2 — розділ: --t-h2 (36 px, телефон 29); заява на цінах («What actually drives the price?») — теж h2-розміру;
   h3 — два розміри: картка (01–03, хаб довідників, FIG) — --t-lead (24 / 20), питання FAQ — --t-ui (18) */
.statement .big { font-size: var(--t-h2) !important; line-height: 1.2 !important; max-width: 24ch; }
.hub-card h3, .figc h3 { font: 500 var(--t-lead)/1.25 var(--font-primary) !important; }
/* h1 — один кегль на всіх сторінках-статтях (--t-display, 96 px; телефон 51), ширина — 8 колонок, рядки рівні (Олег, 27.10: «заголовки одного розміру»; підбір під ширину прибрано) */