/* ══════════════════════════════════════════════════════════════════════════
   academy.tg.tours — css/v2.css · the redesign of six sections, 21 Oct 2026.
   Founder, 20 Oct: «sections that look very vibe coded. The circle with the number
   inside … the soft corner boxes … Why not make a calendar? … make a drawing …
   like we did with the ticket». He approved the board on 21 Oct: «i like
   everything publish everythign (just keep a copy just i case we need to backtrack
   into the older version) keep for 10 days».
   Board: https://claude.ai/artifact/P9Wa2Z3nQiVdbR5cYQGCe7 (Shop-Path, Shop-Program,
   Shop-Tools, Shop-Reviews, Shop-FAQ, Shop-Cert). Plan + rules:
   build/academy-redesign-board/PLAN.md («21 Oct — PUBLISH»). Backup of the page
   before this change: build/backups/2026-10-21-before-redesign/academy-site/.

   Each section is scoped by its id, its classes carry a two-letter prefix:
     #put pa- (the road map) · #programma pr- (8 module tickets) · #instrumenty to-
     (the tools laid out on a plum lining) · #otzyvy rv- (postcards) · #voprosy fq-
     («Справочная», warm and light in both themes) · #dokument ce- (certificate +
     diploma).
   Drawn compositions keep the board's proportions: on a computer their insides are
   sized in container units (cqi) of the paper they sit on, with the px value just
   before as the fallback. Below that they stack, as on the board's phone frame.
   Animations play once when the section is really on screen (js/v2.js adds
   html.v2-anim and .v2-go); no script or reduced motion = the finished picture.
   Strict CSP: no inline style anywhere.
   ══════════════════════════════════════════════════════════════════════════ */

/* The real Playfair Display ITALIC (variable 400-900, Google Fonts, OFL). It lives here,
   not in assets/fonts/fonts.css: /assets/fonts/* is served immutable for a year, so a
   returning visitor would keep the old fonts.css and never get it; /css/* is cached
   10 minutes. Until now every italic on the page was a slanted copy of the upright face. */
/* cyrillic */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(../assets/fonts/PlayfairDisplay-italic-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* latin */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(../assets/fonts/PlayfairDisplay-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.v2{--txt:var(--txt-d);--mut:var(--txt-d-mut);--bg:var(--bg-d);--paper:#FCF0E5;--ink:#2E1128;--ink2:#5A4453;--ink3:#7A6272;
  --plum:#4C1F3C;--plum-d:#38152B;--coral-ink:#B23F4A;--gold-d:#C88F3E;--gold-ink:#9A630F;--hair:rgba(46,17,40,.16);
  --ease:cubic-bezier(.23,1,.32,1);--on-plum:#F4EAE6;--on-plum-mut:rgba(244,234,230,.72)}
.v2 ol,.v2 ul{list-style:none;margin:0;padding:0}

/* ── 1 · «Не «обучение», а путь» — a folded paper road map ──────────────────── */
#put .pa-map{position:relative;margin-top:40px;border-radius:6px;background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;color:var(--ink);
  box-shadow:0 40px 70px -30px rgba(8,1,6,.85),0 12px 24px -14px rgba(8,1,6,.6);overflow:hidden}
#put .pa-map__folds{position:absolute;inset:0;pointer-events:none}
#put .pa-map__topo{position:absolute;inset:0;width:100%;height:100%}
#put .pa-map__topo path{fill:none;stroke:rgba(76,31,60,.10);stroke-width:1.3}
#put .pa-map__rose{position:absolute;color:rgba(76,31,60,.28)}
#put .pa-road__casing{fill:none;stroke:rgba(76,31,60,.09);stroke-width:22;stroke-linecap:round}
#put .pa-road__line{fill:none;stroke:var(--plum);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 10}
#put .pa-end{position:absolute;color:var(--plum)}
#put .pa-end--flag{color:var(--gold-ink)}
#put .pa-m__pt{position:absolute;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--plum)}
#put .pa-m__post{position:absolute;background:rgba(76,31,60,.55)}
#put .pa-m__sign{border-radius:6px;background:var(--plum) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;color:var(--gold);
  font:700 15px/1.15 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 12px -6px rgba(46,17,40,.6),inset 0 0 0 1px rgba(240,183,96,.25)}
#put .pa-m__txt{margin:0;font:500 15px/1.45 var(--sans);color:var(--ink2);text-wrap:balance}

@media (min-width:1000px){
  #put .pa-map{aspect-ratio:1248/580;container-type:inline-size}
  #put .pa-map__folds{background:linear-gradient(90deg,transparent 33.1%,rgba(46,17,40,.10) 33.33%,rgba(255,255,255,.35) 33.6%,transparent 36%),
    linear-gradient(90deg,transparent 64%,rgba(255,255,255,.35) 66.4%,rgba(46,17,40,.10) 66.66%,transparent 66.9%),
    linear-gradient(180deg,transparent 49.6%,rgba(46,17,40,.07) 50%,rgba(255,255,255,.3) 50.4%,transparent 53%)}
  #put .pa-map__road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  #put .pa-end--home{left:3.526%;top:76.897%}
  #put .pa-end--flag{left:93.75%;top:20.345%}
  #put .pa-m{position:absolute;width:0;height:0}
  #put .pa-m:nth-child(1){left:18.910%;top:68.966%}
  #put .pa-m:nth-child(2){left:37.660%;top:55.517%}
  #put .pa-m:nth-child(3){left:56.090%;top:67.586%}
  #put .pa-m:nth-child(4){left:74.519%;top:45.172%}
  #put .pa-m:nth-child(5){left:92.147%;top:25.517%}
  #put .pa-m__sign{position:absolute;left:50%;transform:translateX(-50%)}
  #put .pa-m__txt{position:absolute;text-align:center}
  /* the board's px (a 1248 px map), then the same in units of the map's width */
  #put .pa-map__rose{right:30px;bottom:26px;width:92px;height:92px}
  #put .pa-end{width:40px;height:40px}
  #put .pa-m__pt{left:-8px;top:-8px;width:16px;height:16px}
  #put .pa-m__post{left:-1px;width:2px;top:-58px;height:50px}
  #put .pa-m__sign{bottom:56px;padding:9px 16px 10px}
  #put .pa-m__txt{top:20px;left:-104px;width:208px}
  #put .pa-map__rose{right:2.404cqi;bottom:2.083cqi;width:7.372cqi;height:7.372cqi}
  #put .pa-end{width:3.205cqi;height:3.205cqi}
  #put .pa-m__pt{left:-0.641cqi;top:-0.641cqi;width:1.282cqi;height:1.282cqi}
  #put .pa-m__post{top:-4.647cqi;height:4.006cqi}
  #put .pa-m__sign{bottom:4.487cqi;padding:0.721cqi 1.282cqi 0.801cqi;font-size:max(12px,1.202cqi)}
  #put .pa-m__txt{top:1.603cqi;left:-8.333cqi;width:16.667cqi;font-size:max(13.5px,1.202cqi)}
  /* the last stop sits near the map's right edge: its words lean left so none is cut */
  #put .pa-m:nth-child(5) .pa-m__txt{left:-160px;left:-12.821cqi}
}
/* tablet and phone: the road runs down the map */
@media (max-width:999px){
  #put .pa-map{margin-top:32px;padding:70px 40px 86px}
  #put .pa-map__folds{background:linear-gradient(180deg,transparent 33.1%,rgba(46,17,40,.10) 33.33%,rgba(255,255,255,.35) 33.6%,transparent 35%),
    linear-gradient(180deg,transparent 65%,rgba(255,255,255,.35) 66.4%,rgba(46,17,40,.10) 66.66%,transparent 66.9%)}
  #put .pa-map__road{display:none}
  #put .pa-end{width:40px;height:40px}
  #put .pa-end--home{left:38px;top:20px}
  #put .pa-end--flag{left:38px;bottom:26px}
  #put .pa-map__rose{width:64px;height:64px;right:16px;bottom:18px}
  #put .pa-ms{position:relative}
  #put .pa-ms::before{content:"";position:absolute;left:19px;top:-14px;bottom:-30px;border-left:3px dashed var(--plum)}
  #put .pa-m{position:relative;padding:0 0 34px 54px}
  #put .pa-m__pt{left:12px;top:6px;width:16px;height:16px}
  #put .pa-m__post{display:none}
  #put .pa-m__sign{display:inline-block;padding:9px 16px 10px;font-size:14px}
  #put .pa-m__txt{margin-top:10px;font-size:15.5px}
}
@media (max-width:760px){
  #put .pa-map{padding:70px 20px 86px}
  #put .pa-end--home,#put .pa-end--flag{left:18px}
}

/* ── 2 · «Программа курса» — a roll of eight tickets ───────────────────────── */
#programma .pr-roll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin-top:52px}
#programma .pr-tk{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:150px;
  filter:drop-shadow(0 20px 22px rgba(8,1,6,.55)) drop-shadow(0 4px 6px rgba(8,1,6,.4))}
#programma .pr-tk:nth-child(odd){transform:rotate(-.5deg)}
#programma .pr-tk:nth-child(even){transform:rotate(.5deg) translateY(30px)}
#programma .pr-tk__stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:10px 0 0 10px;
  background:var(--plum) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;
  -webkit-mask:radial-gradient(circle 9px at 100% 0,transparent 98%,#000),radial-gradient(circle 9px at 100% 100%,transparent 98%,#000),radial-gradient(circle 7px at 0 50%,transparent 98%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 9px at 100% 0,transparent 98%,#000),radial-gradient(circle 9px at 100% 100%,transparent 98%,#000),radial-gradient(circle 7px at 0 50%,transparent 98%,#000);
  mask-composite:intersect}
#programma .pr-tk__mod{font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(240,183,96,.7)}
#programma .pr-tk__num{font:500 50px/1 var(--serif);font-variant-numeric:lining-nums;color:var(--gold)}
#programma .pr-tk__body{position:relative;padding:24px 30px;border-radius:0 10px 10px 0;
  background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;color:var(--ink);
  -webkit-mask:radial-gradient(circle 9px at 0 0,transparent 98%,#000),radial-gradient(circle 9px at 0 100%,transparent 98%,#000),radial-gradient(circle 7px at 100% 50%,transparent 98%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 9px at 0 0,transparent 98%,#000),radial-gradient(circle 9px at 0 100%,transparent 98%,#000),radial-gradient(circle 7px at 100% 50%,transparent 98%,#000);
  mask-composite:intersect}
#programma .pr-tk__body::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:2px dashed rgba(46,17,40,.24)}
#programma .pr-tk h3{margin:0 0 8px;padding-right:22px;font:500 23px/1.22 var(--serif);color:var(--ink);text-wrap:balance}
#programma .pr-tk p{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink2)}
#programma .pr-tk__mark{position:absolute;right:22px;top:20px;width:20px;height:20px;color:rgba(154,99,15,.55)}
@media (max-width:900px){
  #programma .pr-roll{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:36px}
  #programma .pr-tk:nth-child(odd){transform:rotate(-.4deg)}
  #programma .pr-tk:nth-child(even){transform:rotate(.4deg)}
}
@media (max-width:760px){
  #programma .pr-tk{grid-template-columns:84px minmax(0,1fr);min-height:0}
  #programma .pr-tk__num{font-size:38px}
  #programma .pr-tk__mod{font-size:10px;letter-spacing:.16em}
  #programma .pr-tk__body{padding:18px 18px 20px 20px}
  #programma .pr-tk h3{font-size:19px;padding-right:18px}
  #programma .pr-tk p{font-size:15px}
  #programma .pr-tk__mark{right:14px;top:16px;width:16px;height:16px}
}

/* ── 3 · «Рабочие инструменты» — the tools laid out on a plum lining ───────── */
#instrumenty .to-lay{position:relative;margin-top:44px;border-radius:26px;background:var(--plum) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;
  box-shadow:inset 0 2px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(240,183,96,.10),0 1px 0 rgba(255,255,255,.05)}
#instrumenty .to-lay::after{content:"";position:absolute;inset:14px;border-radius:18px;border:1.5px dashed rgba(240,183,96,.18);pointer-events:none}
#instrumenty .to-o{position:relative;filter:drop-shadow(0 18px 14px rgba(8,1,6,.45)) drop-shadow(0 3px 3px rgba(8,1,6,.35));color:var(--ink)}
#instrumenty .to-paper{background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px}
#instrumenty .to-lbl{margin:0;font:600 16px/1.3 var(--sans);color:var(--ink)}
#instrumenty .to-lbl small{display:block;margin-top:4px;font:500 14px/1.35 var(--sans);color:var(--gold-ink)}
/* 1 the matrix: a folded map */
#instrumenty .to-mp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;border-radius:4px;overflow:hidden}
#instrumenty .to-mp i{display:block}
#instrumenty .to-mp i:nth-child(1){background:linear-gradient(90deg,rgba(46,17,40,.07),transparent 40%)}
#instrumenty .to-mp i:nth-child(2){background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 30%,rgba(46,17,40,.06))}
#instrumenty .to-mp i:nth-child(3){background:linear-gradient(90deg,rgba(255,255,255,.3),transparent 40%,rgba(46,17,40,.08))}
#instrumenty .to-mp__in{position:absolute;inset:0;padding:24px 26px}
#instrumenty .to-mp__h{margin:0;font:500 23px/1.2 var(--serif);color:var(--ink);max-width:16ch}
#instrumenty .to-mx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
#instrumenty .to-mx span{height:58px;border:1.5px dashed rgba(76,31,60,.35);border-radius:6px;display:grid;place-items:center;font:500 22px/1 var(--serif);color:rgba(154,99,15,.75)}
/* 2 the finance table: a till receipt */
#instrumenty .to-rc{height:100%;padding:22px 18px 30px;box-sizing:border-box;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x}
#instrumenty .to-rc .to-lbl{text-align:center;font-size:15px;padding-bottom:12px;border-bottom:1.5px dashed var(--hair)}
#instrumenty .to-rc__r{display:flex;align-items:baseline;gap:6px;margin-top:14px;font:500 14px/1.2 var(--sans);color:var(--ink2)}
#instrumenty .to-rc__r::after{content:"€";order:3;font-weight:700;color:var(--ink)}
#instrumenty .to-rc__r b{flex:1;border-bottom:1.5px dotted rgba(46,17,40,.3);order:2;transform:translateY(-3px)}
#instrumenty .to-rc__t{margin-top:18px;padding-top:12px;border-top:1.5px dashed var(--hair);font-weight:700;color:var(--ink)}
/* 3 the two practicums: tickets */
#instrumenty .to-pt{position:absolute;left:0;width:100%;height:96px;display:grid;grid-template-columns:72px minmax(0,1fr);border-radius:8px;overflow:hidden}
#instrumenty .to-pt--back{top:0;transform:translate(26px,-6px) rotate(6deg);opacity:.96}
#instrumenty .to-pt--front{top:34px}
#instrumenty .to-pt__s{display:grid;place-items:center;background:var(--plum-d) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;color:var(--gold);font:500 30px/1 var(--serif);border-right:2px dashed rgba(240,183,96,.35)}
#instrumenty .to-pt__b{padding:16px 18px}
#instrumenty .to-pt__b b{display:block;font:500 21px/1.15 var(--serif);color:var(--ink)}
#instrumenty .to-pt__b span{display:block;margin-top:6px;font:500 14px/1.3 var(--sans);color:var(--ink2)}
/* 4 the checklists: a clipboard */
#instrumenty .to-cb{height:100%;border-radius:14px;padding:30px 14px 14px;box-sizing:border-box;background:linear-gradient(160deg,#5A2747,#3A1730)}
#instrumenty .to-cb__clip{position:absolute;left:50%;top:-12px;width:88px;height:30px;transform:translateX(-50%);border-radius:8px;background:linear-gradient(180deg,#F6DDA4,#C9933F);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.15)}
#instrumenty .to-cb__p{height:100%;border-radius:4px;padding:18px;box-sizing:border-box}
#instrumenty .to-cb__row{display:flex;align-items:center;gap:10px;margin-top:14px}
#instrumenty .to-cb__box{flex:none;width:20px;height:20px;box-sizing:border-box;border:1.6px solid var(--ink2);border-radius:4px;display:grid;place-items:center;color:var(--gold-ink)}
#instrumenty .to-cb__box svg{width:18px;height:18px}
#instrumenty .to-cb__ln{flex:1;font:500 15px/1.2 var(--sans);color:var(--ink2)}
#instrumenty .to-cb__row:nth-child(-n+4) .to-cb__ln{text-decoration:line-through;text-decoration-color:rgba(154,99,15,.55);color:var(--ink3)}
/* 5 the document templates: a folder */
#instrumenty .to-fd__sheet{position:absolute;left:24px;right:30px;height:200px;border-radius:4px}
#instrumenty .to-fd__sheet--1{top:-26px;transform:rotate(-3deg)}
#instrumenty .to-fd__sheet--2{top:-14px;left:44px;transform:rotate(2deg)}
#instrumenty .to-fd__sheet i{position:absolute;left:22px;top:12px;font:600 13px/1 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
/* «Договор» sat exactly under the second sheet (board): it goes to the right end, where the back sheet shows */
#instrumenty .to-fd__sheet--1 i{left:auto;right:22px;top:8px}
#instrumenty .to-fd__front{position:absolute;inset:40px 0 0 0;border-radius:4px 12px 12px 12px;background:var(--plum) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:30px 28px}
#instrumenty .to-fd__tab{position:absolute;left:0;top:18px;width:140px;height:30px;border-radius:10px 10px 0 0;background:var(--plum)}
#instrumenty .to-fd__front .to-lbl{color:var(--gold);font:500 24px/1.2 var(--serif);max-width:12ch}
/* 6 the letter templates: envelopes */
#instrumenty .to-ev{position:absolute;width:250px;height:160px;border-radius:4px;overflow:hidden}
#instrumenty .to-ev::before{content:"";position:absolute;inset:0 0 auto 0;height:62%;
  background:linear-gradient(to bottom right,transparent 49.6%,rgba(46,17,40,.12) 50%,transparent 50.6%) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent 49.6%,rgba(46,17,40,.12) 50%,transparent 50.6%) right/50% 100% no-repeat}
#instrumenty .to-ev--1{left:0;top:0;transform:rotate(-6deg)}
#instrumenty .to-ev--2{left:36px;top:48px;transform:rotate(3deg)}   /* board 40 px: «Hola,» on the first envelope was cut to «Ho'» */
#instrumenty .to-ev__st{position:absolute;right:12px;top:12px;width:34px;height:42px;background:var(--plum) url(../assets/img/tex-paper-plum.webp);outline:2px dotted var(--paper);outline-offset:-3px}
#instrumenty .to-ev__hi{position:absolute;left:18px;bottom:16px;font:italic 400 22px/1 var(--serif);color:var(--plum)}
#instrumenty .to-ev--1 .to-ev__hi{bottom:auto;top:16px}
#instrumenty .to-ev__lbl{position:absolute;left:46px;top:214px;width:240px}
#instrumenty .to-ev__lbl .to-lbl{color:var(--paper)}
/* 7 the selling text: a printed outline */
#instrumenty .to-br{height:100%;padding:22px 20px;box-sizing:border-box;border-radius:4px}
#instrumenty .to-br .to-lbl{font:500 20px/1.2 var(--serif)}
#instrumenty .to-br__b{margin-top:14px;padding:12px 14px;border:1.5px solid rgba(76,31,60,.28);border-radius:6px;font:600 14px/1.2 var(--sans);color:var(--ink2)}
#instrumenty .to-br__b:first-of-type{background:rgba(240,183,96,.18);border-color:rgba(154,99,15,.45);color:var(--ink)}
#instrumenty .to-br__ar{display:block;width:2px;height:12px;margin:0 auto;background:rgba(76,31,60,.3)}
/* 8 the students' project reviews: a notebook */
#instrumenty .to-nb{position:relative;height:100%;border-radius:6px;padding:34px 22px 18px 52px;box-sizing:border-box;
  background:repeating-linear-gradient(transparent 0 27px,rgba(76,31,60,.13) 27px 28px) 0 14px,var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px}
#instrumenty .to-nb::before{content:"";position:absolute;left:38px;top:0;bottom:0;width:1.5px;background:rgba(240,183,96,.7)}
#instrumenty .to-nb__rings{position:absolute;left:18px;right:18px;top:-9px;height:20px;background:radial-gradient(circle at 9px 10px,#1D0B16 5px,transparent 5.5px) 0 0/26px 20px repeat-x}
#instrumenty .to-nb .to-lbl{font:italic 500 21px/1.3 var(--serif);color:var(--ink)}
#instrumenty .to-nb__lens{position:absolute;right:16px;bottom:12px;width:46px;height:46px;color:var(--gold-ink)}
/* 9 the platform access: a luggage tag */
#instrumenty .to-tg{position:relative;height:100%;border-radius:10px;padding:52px 18px 22px;box-sizing:border-box;background:var(--plum-d) url(../assets/img/tex-paper-plum.webp) 0 0/512px 512px;
  clip-path:polygon(22% 0,78% 0,100% 12%,100% 100%,0 100%,0 12%);color:var(--on-plum);text-align:center;box-shadow:inset 0 0 0 1px rgba(240,183,96,.2)}
#instrumenty .to-tg__hole{position:absolute;left:50%;top:18px;width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:var(--plum);box-shadow:inset 0 0 0 3px #C9933F}
#instrumenty .to-tg__str{position:absolute;left:50%;top:-58px;width:60px;height:80px;transform:translateX(-30%);color:#C9933F}
#instrumenty .to-tg img{display:inline-block;width:40px;height:40px;border-radius:50%}
#instrumenty .to-tg__l{margin:10px 0 0;font:600 15px/1.25 var(--sans);color:var(--on-plum)}
#instrumenty .to-tg__b{margin:8px 0 0;font:500 30px/1.05 var(--serif);color:var(--gold)}

/* computer: the flat-lay, every object where the board put it (a 1248 × 820 lining) */
@media (min-width:1100px){
  #instrumenty .to-lay{aspect-ratio:1248/820;container-type:inline-size}
  #instrumenty .to-o{position:absolute}
  #instrumenty .to-o--map{left:3.526%;top:6.585%;width:34.455%;height:36.585%;transform:rotate(-2.5deg)}
  #instrumenty .to-o--rc{left:41.026%;top:5.366%;width:14.103%;height:40.244%;transform:rotate(2deg)}
  #instrumenty .to-o--pt{left:58.173%;top:7.317%;width:24.038%;height:17.073%;transform:rotate(-4deg)}
  #instrumenty .to-o--tg{left:85.577%;top:10.488%;width:11.218%;height:30.488%;transform:rotate(7deg)}
  #instrumenty .to-o--cb{left:59.936%;top:32.683%;width:20.032%;height:40.244%;transform:rotate(2.5deg)}
  #instrumenty .to-o--fd{left:3.526%;top:52.439%;width:28.846%;height:35.366%;transform:rotate(1.8deg)}
  #instrumenty .to-o--ev{left:35.256%;top:52.439%;width:24.038%;height:31.707%;transform:rotate(-3deg)}
  #instrumenty .to-o--br{left:82.532%;top:48.780%;width:15.705%;height:40.244%;transform:rotate(-2.5deg)}
  #instrumenty .to-o--nb{left:60.897%;top:76.585%;width:20.032%;height:19.512%;transform:rotate(3deg)}
  #instrumenty .to-lbl{font-size:1.282cqi}
  #instrumenty .to-lbl small{margin-top:0.321cqi;font-size:1.122cqi}
  #instrumenty .to-mp__in{padding:1.923cqi 2.083cqi}
  #instrumenty .to-mp__h{font-size:1.843cqi}
  #instrumenty .to-mx{gap:0.962cqi;margin-top:1.603cqi}
  #instrumenty .to-mx span{height:4.647cqi;font-size:1.763cqi}
  #instrumenty .to-rc{padding:1.763cqi 1.442cqi 2.404cqi}
  #instrumenty .to-rc .to-lbl{font-size:1.202cqi;padding-bottom:0.962cqi}
  #instrumenty .to-rc__r{gap:0.481cqi;margin-top:1.122cqi;font-size:1.122cqi}
  #instrumenty .to-rc__r b{transform:translateY(-0.24cqi)}
  #instrumenty .to-rc__t{margin-top:1.442cqi;padding-top:0.962cqi}
  #instrumenty .to-pt{height:7.692cqi;grid-template-columns:5.769cqi minmax(0,1fr)}
  #instrumenty .to-pt--back{transform:translate(2.083cqi,-0.481cqi) rotate(6deg)}
  #instrumenty .to-pt--front{top:2.724cqi}
  #instrumenty .to-pt__s{font-size:2.404cqi}
  #instrumenty .to-pt__b{padding:1.282cqi 1.442cqi}
  #instrumenty .to-pt__b b{font-size:1.683cqi}
  #instrumenty .to-pt__b span{margin-top:0.481cqi;font-size:1.122cqi}
  #instrumenty .to-cb{padding:2.404cqi 1.122cqi 1.122cqi}
  #instrumenty .to-cb__clip{top:-0.962cqi;width:7.051cqi;height:2.404cqi}
  #instrumenty .to-cb__p{padding:1.442cqi}
  #instrumenty .to-cb__row{gap:0.801cqi;margin-top:1.122cqi}
  #instrumenty .to-cb__box{width:1.603cqi;height:1.603cqi}
  #instrumenty .to-cb__box svg{width:1.442cqi;height:1.442cqi}
  #instrumenty .to-cb__ln{font-size:1.202cqi}
  #instrumenty .to-fd__sheet{left:1.923cqi;right:2.404cqi;height:16.026cqi}
  #instrumenty .to-fd__sheet--1{top:-2.083cqi}
  #instrumenty .to-fd__sheet--2{top:-1.122cqi;left:3.526cqi}
  #instrumenty .to-fd__sheet i{left:1.763cqi;top:0.962cqi;font-size:1.042cqi}
  #instrumenty .to-fd__sheet--1 i{left:auto;right:1.763cqi;top:0.641cqi}
  #instrumenty .to-fd__front{inset:3.205cqi 0 0 0;padding:2.404cqi 2.244cqi}
  #instrumenty .to-fd__tab{top:1.442cqi;width:11.218cqi;height:2.404cqi}
  #instrumenty .to-fd__front .to-lbl{font-size:1.923cqi}
  #instrumenty .to-ev{width:20.032cqi;height:12.821cqi}
  #instrumenty .to-ev--2{left:2.885cqi;top:3.846cqi}
  #instrumenty .to-ev__st{right:0.962cqi;top:0.962cqi;width:2.724cqi;height:3.365cqi}
  #instrumenty .to-ev__hi{left:1.442cqi;bottom:1.282cqi;font-size:1.763cqi}
  #instrumenty .to-ev--1 .to-ev__hi{top:1.282cqi}
  #instrumenty .to-ev__lbl{left:3.686cqi;top:17.147cqi;width:19.231cqi}
  #instrumenty .to-br{padding:1.763cqi 1.603cqi}
  #instrumenty .to-br .to-lbl{font-size:1.603cqi}
  #instrumenty .to-br__b{margin-top:1.122cqi;padding:0.962cqi 1.122cqi;font-size:1.122cqi}
  #instrumenty .to-br__ar{height:0.962cqi}
  #instrumenty .to-nb{padding:2.724cqi 1.763cqi 1.442cqi 4.167cqi;
    background:repeating-linear-gradient(transparent 0 2.163cqi,rgba(76,31,60,.13) 2.163cqi 2.244cqi) 0 1.122cqi,var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px}
  #instrumenty .to-nb::before{left:3.045cqi}
  #instrumenty .to-nb__rings{left:1.442cqi;right:1.442cqi;top:-0.721cqi;height:1.603cqi}
  #instrumenty .to-nb .to-lbl{font-size:1.683cqi}
  #instrumenty .to-nb__lens{right:1.282cqi;bottom:0.962cqi;width:3.686cqi;height:3.686cqi}
  #instrumenty .to-tg{padding:4.167cqi 1.442cqi 1.763cqi}
  #instrumenty .to-tg__hole{top:1.442cqi;width:1.442cqi;height:1.442cqi}
  #instrumenty .to-tg__str{top:-4.647cqi;width:4.808cqi;height:6.41cqi}
  #instrumenty .to-tg img{width:3.205cqi;height:3.205cqi}
  #instrumenty .to-tg__l{margin:0.801cqi 0 0;font-size:1.202cqi}
  #instrumenty .to-tg__b{margin:0.641cqi 0 0;font-size:2.404cqi}
}
/* tablet: two columns of whole objects · phone: one column (the board's phone frame) */
@media (max-width:1099px){
  #instrumenty .to-lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px;align-items:start;padding:48px 40px 44px}
  #instrumenty .to-o--map{height:290px;transform:rotate(-1.25deg)}
  #instrumenty .to-o--rc{width:72%;height:270px;justify-self:center;transform:rotate(1deg)}
  #instrumenty .to-o--pt{height:150px;margin-right:30px;transform:rotate(-2deg)}
  #instrumenty .to-o--tg{width:58%;max-width:190px;height:240px;justify-self:center;margin-top:46px;transform:rotate(3.5deg)}
  #instrumenty .to-o--cb{height:300px;transform:rotate(1.25deg)}
  #instrumenty .to-o--fd{height:250px;margin-top:20px;transform:rotate(.9deg)}
  #instrumenty .to-o--ev{height:250px;transform:rotate(-1.5deg)}
  #instrumenty .to-ev{width:230px;height:150px}
  #instrumenty .to-ev__lbl{left:0;top:auto;bottom:0;width:100%}
  #instrumenty .to-o--br{height:300px;transform:rotate(-1.25deg)}
  #instrumenty .to-o--nb{height:190px;transform:rotate(1.5deg)}
  #instrumenty .to-mp__h{font-size:21px}
  #instrumenty .to-mx span{height:48px}
}
@media (max-width:760px){
  #instrumenty .to-lay{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:36px;padding:34px 16px 30px}
}

/* ── 4 · «Новичок и действующий профессионал» — two postcards, front and back ─ */
#otzyvy .rv-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;margin-top:52px;align-items:start}
#otzyvy .rv-pair{position:relative;margin:0}
#otzyvy .rv-pair:nth-child(2){margin-top:56px}
#otzyvy .rv-front{position:relative;z-index:2;aspect-ratio:3/2;border:12px solid #FBF4EA;border-radius:4px;overflow:hidden;background:#FBF4EA;transform:rotate(-2.4deg);
  box-shadow:0 36px 50px -28px rgba(8,1,6,.85),0 10px 18px -10px rgba(8,1,6,.55)}
#otzyvy .rv-pair:nth-child(2) .rv-front{transform:rotate(1.8deg)}
#otzyvy .rv-front img{display:block;width:100%;height:100%;object-fit:cover}
#otzyvy .rv-pair:nth-child(2) .rv-front img{object-position:50% 62%}
#otzyvy .rv-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,15,27,0) 38%,rgba(35,15,27,.82))}
#otzyvy .rv-front q{position:absolute;z-index:1;left:28px;right:28px;bottom:24px;font:italic 500 27px/1.25 var(--serif);color:#FFF6EA;text-shadow:0 2px 12px rgba(0,0,0,.45);quotes:"«" "»";text-wrap:balance}
#otzyvy .rv-back{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr;margin:-34px 14px 0 34px;border-radius:6px;
  background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;color:var(--ink);transform:rotate(1.2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 36px 60px -28px rgba(8,1,6,.85),0 10px 20px -12px rgba(8,1,6,.55)}
#otzyvy .rv-pair:nth-child(2) .rv-back{transform:rotate(-1.4deg)}
#otzyvy .rv-back__msg{padding:62px 26px 30px 30px;border-right:1px solid var(--hair)}
#otzyvy .rv-kick{margin:0 0 12px;font:700 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
#otzyvy .rv-t{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink2);text-wrap:pretty}
#otzyvy .rv-back__side{position:relative;display:flex;flex-direction:column;padding:56px 24px 30px}
#otzyvy .rv-post{position:relative;height:130px}
#otzyvy .rv-stamp{position:absolute;right:0;top:0;width:84px;height:102px;padding:6px;box-sizing:border-box;background:#fff;
  /* a solid content-box layer first: the perforation stays on the edge (the board's mask punched the whole photo) */
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/10px 10px;
  mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/10px 10px}
#otzyvy .rv-stamp img{display:block;width:100%;height:100%;object-fit:cover}
#otzyvy .rv-pm{position:absolute;right:46px;top:22px;width:108px;height:108px;color:var(--plum);opacity:.82;mix-blend-mode:multiply;transform:rotate(-13deg)}
#otzyvy .rv-pm--b{color:var(--violet);transform:rotate(9deg)}
#otzyvy .rv-to{margin-top:auto}
#otzyvy .rv-ln{border-bottom:1px solid var(--hair);padding:8px 0 6px;min-height:22px}
#otzyvy .rv-nm{font:500 30px/1.1 var(--serif);color:var(--ink)}
#otzyvy .rv-rl{font:600 15px/1.35 var(--sans);color:var(--ink2)}
@media (max-width:1000px){
  #otzyvy .rv-pairs{grid-template-columns:minmax(0,1fr);gap:64px;max-width:620px;margin-left:auto;margin-right:auto}
  #otzyvy .rv-pair:nth-child(2){margin-top:0}
}
@media (max-width:760px){
  #otzyvy .rv-pairs{gap:56px;margin-top:40px}
  #otzyvy .rv-front{border-width:8px}
  #otzyvy .rv-front q{left:16px;right:16px;bottom:14px;font-size:19px}
  #otzyvy .rv-back{grid-template-columns:minmax(0,1fr);margin:-24px 6px 0 14px}
  #otzyvy .rv-back__msg{order:2;padding:6px 20px 24px;border-right:0}
  #otzyvy .rv-back__side{order:1;padding:42px 20px 6px}
  #otzyvy .rv-post{height:118px}
  #otzyvy .rv-to{margin-top:0}
  #otzyvy .rv-nm{font-size:26px}
  #otzyvy .rv-t{font-size:15.5px}
}

/* ── 5 · «То, о чём спрашивают перед покупкой» — the «Справочная» board.
   Warm and light in BOTH themes (founder 20 Oct: the dark version felt harsh right
   before paying). Native <details>: it opens and closes with no script at all. ── */
#voprosy.v2{background:#FBEDE4;color:#2E1128}
#voprosy .h2{color:#2E1128}
#voprosy .eyebrow{color:#9A630F}
#voprosy .fq-board{max-width:1060px;margin:44px 0 0;padding:7px;border-radius:20px;background:rgba(76,31,60,.05);box-shadow:0 0 0 1px rgba(76,31,60,.10)}
#voprosy .fq-board__core{border-radius:14px;background:#FFF8F0 url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(76,31,60,.45),inset 0 2px 0 rgba(255,255,255,.7)}
#voprosy .fq-board__bar{display:flex;align-items:center;gap:12px;padding:18px 22px;background:#F4E0D3;border-bottom:1px solid rgba(154,99,15,.25)}
#voprosy .fq-board__bar svg{width:26px;height:26px;flex:none;color:#9A630F}
#voprosy .fq-board__name{font:700 14px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#7A4E12}
#voprosy .fq-all{margin-left:auto;min-height:40px;padding:10px 14px;border:0;border-radius:999px;background:rgba(154,99,15,.12);color:#7A4E12;font:600 14px/1 var(--sans);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease)}
#voprosy .fq-all[hidden]{display:none}
#voprosy .fq-all:active{transform:scale(.97)}
#voprosy .fq-all:focus-visible{outline:3px solid #DD5A5F;outline-offset:2px}
#voprosy .fq-row{border-bottom:1px dashed rgba(46,17,40,.14)}
#voprosy .fq-row:last-child{border-bottom:0}
#voprosy .fq-q{display:block;list-style:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background 160ms ease}
#voprosy .fq-q::-webkit-details-marker{display:none}
#voprosy .fq-q::marker{content:""}
#voprosy .fq-q:focus-visible{outline:3px solid #DD5A5F;outline-offset:-3px;border-radius:6px}
#voprosy .fq-q__in{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;color:#2E1128;font:600 19px/1.35 var(--sans);text-align:left}
#voprosy .fq-q:active{background:rgba(240,183,96,.16)}
@media (hover:hover) and (pointer:fine){#voprosy .fq-q:hover{background:rgba(240,183,96,.12)}}
#voprosy .fq-q__dot{width:8px;height:8px;margin-left:7px;border-radius:2px;background:rgba(154,99,15,.35)}
#voprosy .fq-q__go{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9A630F}
#voprosy .fq-q__go svg{width:16px;height:16px;transition:transform 220ms var(--ease)}
#voprosy .fq-row[open] .fq-q__in{color:#7A4E12}
#voprosy .fq-row[open] .fq-q__dot{background:#C88F3E}
#voprosy .fq-row[open] .fq-q__go svg{transform:rotate(180deg)}
#voprosy .fq-slip{position:relative;margin:0 18px 18px 52px;padding:22px 26px 24px;border-radius:2px 2px 8px 8px;background:#FFFFFF;color:var(--ink);
  box-shadow:0 14px 24px -16px rgba(76,31,60,.45),0 0 0 1px rgba(154,99,15,.18)}
#voprosy .fq-slip::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:radial-gradient(circle at 6px 6px,#FFFFFF 4.5px,transparent 5px) 0 0/12px 6px repeat-x}
#voprosy .fq-slip p{margin:0;max-width:66ch;font:400 17px/1.6 var(--sans);color:var(--ink2)}
#voprosy .fq-slip p+p{margin-top:12px}
@keyframes fq-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{clip-path:inset(-8px 0 0 0);transform:none}}
@media (prefers-reduced-motion:no-preference){#voprosy .fq-row[open] .fq-slip{animation:fq-print 280ms var(--ease) both}}
@media (max-width:760px){
  #voprosy .fq-board{margin-top:32px}
  #voprosy .fq-board__bar{padding:14px 16px}
  #voprosy .fq-board__name{font-size:12px;letter-spacing:.18em}
  #voprosy .fq-q__in{grid-template-columns:14px minmax(0,1fr) 18px;gap:12px;padding:18px 16px;font-size:17px}
  #voprosy .fq-q__dot{margin-left:3px}
  #voprosy .fq-q__go span{display:none}
  #voprosy .fq-slip{margin:0 10px 14px 12px;padding:18px 18px 20px}
  #voprosy .fq-slip p{font-size:16px}
}

/* ── 6 · «Сертификат или диплом» — the two real documents ─────────────────── */
#dokument{--hair:rgba(46,17,40,.18)}
#dokument .ce-docs{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:64px;align-items:end;margin-top:56px}
#dokument .ce-doc{margin:0}
#dokument .ce-doc__p{position:relative;aspect-ratio:1.414/1;box-sizing:border-box;background:var(--paper) url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 60px -28px rgba(8,1,6,.85),0 12px 22px -14px rgba(8,1,6,.6)}
#dokument .ce-doc figcaption{margin-top:30px;font:600 15px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center}
#dokument .ce-doc figcaption b{display:block;margin-bottom:8px;font:500 24px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--txt)}
/* the certificate: plain */
#dokument .ce-cert .ce-doc__p{transform:rotate(-2.2deg);padding:30px 34px;border-radius:2px}
#dokument .ce-cert .ce-doc__p::before{content:"";position:absolute;inset:14px;border:1.5px solid rgba(76,31,60,.35)}
#dokument .ce-d__brand{position:relative;display:flex;align-items:center;gap:10px;font:600 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
#dokument .ce-d__brand img{width:26px;height:26px;border-radius:50%}
#dokument .ce-d__title{position:relative;margin:22px 0 6px;font:500 46px/1 var(--serif);color:var(--plum)}
#dokument .ce-d__text{position:relative;margin:0;max-width:34ch;font:400 16px/1.5 var(--sans);color:var(--ink2)}
#dokument .ce-d__name{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:30px;max-width:300px;border-bottom:1.5px solid var(--hair);padding-bottom:6px}
#dokument .ce-d__yours{font:italic 500 26px/1.15 var(--serif);color:#A0701E;text-shadow:0 0 22px rgba(240,183,96,.55)}
#dokument .ce-d__pen{flex:none;width:24px;height:24px;margin-bottom:2px;color:#9A630F}
#dokument .ce-d__sig{position:absolute;right:38px;bottom:34px;width:150px;border-top:1.5px solid var(--hair);padding-top:6px;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:center}
/* the diploma: framed, sealed */
#dokument .ce-dipl .ce-doc__p{transform:rotate(1.6deg);padding:46px 54px;border-radius:3px}
#dokument .ce-dipl .ce-doc__p::before{content:"";position:absolute;inset:14px;border:3px double #B98432}
#dokument .ce-dipl .ce-doc__p::after{content:"";position:absolute;inset:24px;border:1px solid rgba(185,132,50,.5)}
#dokument .ce-corner{position:absolute;width:30px;height:30px;border:2px solid #B98432}
#dokument .ce-corner--tl{left:20px;top:20px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
#dokument .ce-corner--tr{right:20px;top:20px;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
#dokument .ce-corner--bl{left:20px;bottom:20px;border-right:0;border-top:0;border-radius:0 0 0 14px}
#dokument .ce-corner--br{right:20px;bottom:20px;border-left:0;border-top:0;border-radius:0 0 14px 0}
#dokument .ce-dipl .ce-d__title{font-size:60px;color:var(--gold-ink)}
#dokument .ce-dipl .ce-d__text{font-size:17px;max-width:30ch}
#dokument .ce-seal{position:absolute;right:58px;bottom:42px;width:112px;height:112px}
#dokument .ce-seal__r{position:absolute;left:30px;top:78px;width:22px;height:58px;background:linear-gradient(90deg,#5A2747,#7A3A63);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:rotate(14deg);transform-origin:top center}
#dokument .ce-seal__r--2{left:58px;transform:rotate(-12deg)}
#dokument .ce-seal__d{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#E9C47A 0 6deg,#C9933F 6deg 12deg);box-shadow:0 6px 12px rgba(46,17,40,.35),inset 0 0 0 4px rgba(255,255,255,.18)}
#dokument .ce-seal__d::after{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6DDA4,#C9933F 70%);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
#dokument .ce-seal svg{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);color:#7A4E12;z-index:1}
#dokument .ce-dipl .ce-d__name{max-width:340px}
#dokument .ce-dipl .ce-d__sig{right:auto;left:54px;bottom:46px}

/* computer and tablet: the inside of each document keeps the board's proportions
   (cqi of the paper; the certificate was 547 px wide on the board, the diploma 637) */
@media (min-width:761px){
  #dokument .ce-doc__p{container-type:inline-size}
  #dokument .ce-cert .ce-doc__p{padding:5.48% 6.211%}
  #dokument .ce-dipl .ce-doc__p{padding:7.226% 8.483%}
  #dokument .ce-cert .ce-d__brand{gap:1.827cqi;font-size:2.284cqi}
  #dokument .ce-cert .ce-d__brand img{width:4.75cqi;height:4.75cqi}
  #dokument .ce-cert .ce-d__title{margin:4.019cqi 0 1.096cqi;font-size:8.403cqi}
  #dokument .ce-cert .ce-d__text{font-size:2.923cqi}
  #dokument .ce-cert .ce-d__name{margin-top:5.48cqi;max-width:54.805cqi;padding-bottom:1.096cqi;gap:1.827cqi}
  #dokument .ce-cert .ce-d__sig{right:6.942cqi;bottom:6.211cqi;width:27.402cqi;padding-top:1.096cqi;font-size:2.192cqi}
  #dokument .ce-cert .ce-d__yours{font-size:4.75cqi}
  #dokument .ce-cert .ce-d__pen{width:4.384cqi;height:4.384cqi}
  #dokument .ce-dipl .ce-d__brand{gap:1.571cqi;font-size:1.964cqi}
  #dokument .ce-dipl .ce-d__brand img{width:4.084cqi;height:4.084cqi}
  #dokument .ce-dipl .ce-d__title{margin:3.456cqi 0 0.943cqi;font-size:9.425cqi}
  #dokument .ce-dipl .ce-d__text{font-size:2.67cqi}
  #dokument .ce-dipl .ce-d__name{margin-top:4.713cqi;max-width:53.409cqi;padding-bottom:0.943cqi;gap:1.571cqi}
  #dokument .ce-dipl .ce-d__sig{left:8.483cqi;bottom:7.226cqi;width:23.563cqi;padding-top:0.943cqi;font-size:1.885cqi}
  #dokument .ce-dipl .ce-d__yours{font-size:4.084cqi}
  #dokument .ce-dipl .ce-d__pen{width:3.77cqi;height:3.77cqi}
  #dokument .ce-corner{width:4.713cqi;height:4.713cqi}
  #dokument .ce-corner--tl{left:3.142cqi;top:3.142cqi}
  #dokument .ce-corner--tr{right:3.142cqi;top:3.142cqi}
  #dokument .ce-corner--bl{left:3.142cqi;bottom:3.142cqi}
  #dokument .ce-corner--br{right:3.142cqi;bottom:3.142cqi}
  #dokument .ce-seal{right:9.111cqi;bottom:6.598cqi;width:17.593cqi;height:17.593cqi}
  #dokument .ce-seal__r{left:4.713cqi;top:12.253cqi;width:3.456cqi;height:9.111cqi}
  #dokument .ce-seal__r--2{left:9.111cqi}
  #dokument .ce-seal__d::after{inset:2.199cqi}
  #dokument .ce-seal svg{width:6.912cqi;height:6.912cqi}
}
@media (max-width:1100px){
  #dokument .ce-docs{grid-template-columns:minmax(0,1fr);gap:56px;max-width:560px;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  #dokument .ce-docs{gap:48px;margin-top:40px}
  #dokument .ce-cert .ce-doc__p{padding:20px 22px;transform:rotate(-1.4deg)}
  #dokument .ce-dipl .ce-doc__p{padding:26px 28px;transform:rotate(1deg)}
  #dokument .ce-d__brand{font-size:10.5px;gap:8px}
  #dokument .ce-d__brand img{width:22px;height:22px}
  #dokument .ce-d__title{margin-top:12px;font-size:32px}
  #dokument .ce-dipl .ce-d__title{font-size:38px}
  #dokument .ce-d__text,#dokument .ce-dipl .ce-d__text{font-size:13.5px}
  #dokument .ce-d__name{margin-top:14px;max-width:210px}
  #dokument .ce-dipl .ce-d__name{max-width:210px}
  #dokument .ce-d__yours{font-size:17px}
  #dokument .ce-d__pen{width:18px;height:18px}
  #dokument .ce-d__sig{display:none}
  #dokument .ce-seal{right:24px;bottom:24px;width:70px;height:70px}
  #dokument .ce-seal__r{left:18px;top:50px;width:14px;height:36px}
  #dokument .ce-seal__r--2{left:36px}
  #dokument .ce-seal__d::after{inset:9px}
  #dokument .ce-seal svg{width:28px;height:28px}
  #dokument .ce-corner{width:20px;height:20px}
  #dokument .ce-doc figcaption{margin-top:22px;font-size:13px}
  #dokument .ce-doc figcaption b{font-size:21px}
}

/* ── the drawn things move once, when their section is on screen (js/v2.js) ─── */
@keyframes pa-drive{from{stroke-dashoffset:400;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes pa-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pr-deal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes ce-press{from{opacity:0;transform:scale(1.2) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes ce-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-10px -10px -10px 0)}}
@keyframes ce-nib{from{opacity:0;transform:translateX(-40px) rotate(-10deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .v2-anim #put .pa-road__line{animation:pa-drive 2.2s var(--ease) .2s both paused}
  .v2-anim #put .pa-m{animation:pa-rise .6s var(--ease) both paused}
  .v2-anim #put .pa-m:nth-child(1){animation-delay:.5s}
  .v2-anim #put .pa-m:nth-child(2){animation-delay:.7s}
  .v2-anim #put .pa-m:nth-child(3){animation-delay:.9s}
  .v2-anim #put .pa-m:nth-child(4){animation-delay:1.1s}
  .v2-anim #put .pa-m:nth-child(5){animation-delay:1.3s}
  .v2-anim #programma .pr-tk{animation:pr-deal .6s var(--ease) both paused}
  .v2-anim #programma .pr-tk:nth-child(1){animation-delay:.15s}
  .v2-anim #programma .pr-tk:nth-child(2){animation-delay:.22s}
  .v2-anim #programma .pr-tk:nth-child(3){animation-delay:.29s}
  .v2-anim #programma .pr-tk:nth-child(4){animation-delay:.36s}
  .v2-anim #programma .pr-tk:nth-child(5){animation-delay:.43s}
  .v2-anim #programma .pr-tk:nth-child(6){animation-delay:.5s}
  .v2-anim #programma .pr-tk:nth-child(7){animation-delay:.57s}
  .v2-anim #programma .pr-tk:nth-child(8){animation-delay:.64s}
  .v2-anim #dokument .ce-seal{animation:ce-press .6s var(--ease) .3s both paused}
  .v2-anim #dokument .ce-d__yours{animation:ce-write 2.2s var(--ease) .4s both paused}
  .v2-anim #dokument .ce-d__pen{animation:ce-nib 2.2s var(--ease) .4s both paused}
  .v2-anim #put.v2-go .pa-road__line,.v2-anim #put.v2-go .pa-m,.v2-anim #programma.v2-go .pr-tk,
  .v2-anim #dokument.v2-go .ce-seal,.v2-anim #dokument.v2-go .ce-d__yours,.v2-anim #dokument.v2-go .ce-d__pen{animation-play-state:running}
}

/* ── light version (html[data-theme="light"]): the ground and its words follow the
   theme through --txt/--mut; paper stays paper, plum stays plum with light words;
   the shadows turn plum-tinted and lighter. ───────────────────────────────── */
html[data-theme="light"] #put .pa-map{box-shadow:0 30px 60px -30px rgba(76,31,60,.42),0 10px 20px -14px rgba(76,31,60,.28),0 0 0 1px rgba(76,31,60,.08)}
html[data-theme="light"] #programma .pr-tk{filter:drop-shadow(0 16px 18px rgba(76,31,60,.2)) drop-shadow(0 3px 5px rgba(76,31,60,.16))}
html[data-theme="light"] #instrumenty .to-lay{box-shadow:inset 0 2px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(240,183,96,.10),0 30px 60px -34px rgba(76,31,60,.45)}
html[data-theme="light"] #otzyvy .rv-front{box-shadow:0 30px 44px -28px rgba(76,31,60,.5),0 8px 16px -10px rgba(76,31,60,.3),0 0 0 1px rgba(76,31,60,.06)}
html[data-theme="light"] #otzyvy .rv-back{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 50px -28px rgba(76,31,60,.45),0 8px 16px -12px rgba(76,31,60,.28),0 0 0 1px rgba(76,31,60,.06)}
html[data-theme="light"] #dokument .ce-doc__p{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 32px 50px -28px rgba(76,31,60,.45),0 10px 18px -14px rgba(76,31,60,.3),0 0 0 1px rgba(76,31,60,.07)}

/* ═══ 21 Oct 2026 · small-phone fixes from the break check (build/AUDIT-2026-10-21-ACADEMY-SITES.md
   B1–B5; founder: «fix all») ═══ */
/* B1 · «Развернуть все» broke onto two lines (≤ 375 px) and was cut at the edge (320 px) */
@media (max-width:420px){
  #voprosy .fq-board__bar{gap:10px;padding:12px 12px 12px 14px}
  #voprosy .fq-board__bar svg{width:22px;height:22px}
  #voprosy .fq-board__name{min-width:0;font-size:11px;letter-spacing:.12em}
  #voprosy .fq-all{flex:none;white-space:nowrap;min-height:36px;padding:9px 12px;font-size:13px}
}
/* B2 · on phones the diploma's seal sat on its text and name line: the paper grows below them for it */
@media (max-width:760px){
  #dokument .ce-dipl .ce-doc__p{aspect-ratio:auto;padding-bottom:104px}
  #dokument .ce-dipl .ce-seal{right:26px;bottom:22px}
}
/* B4 · B5 · the smallest phones (320–400 px): long words wrap instead of leaving their paper */
@media (max-width:400px){
  #programma .pr-tk h3{font-size:18px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  #put .pa-m__sign{white-space:normal;letter-spacing:.05em;font-size:13px}
  #instrumenty .to-pt__b{padding:12px 14px}
  #instrumenty .to-pt__b b{font-size:19px}
  #instrumenty .to-pt__b span{margin-top:4px;font-size:12.5px;line-height:1.25}
}
@media (max-width:340px){
  #voprosy .fq-board__name{letter-spacing:.06em}
}

/* «Создатель сайта» footer button (AUXILIAR, 26 Oct 2026) */
.ftr__creator{justify-self:start;margin-top:6px}

/* ── 30 Oct 2026: Elena's video review on the shop (founder «reviews yes (pixel no)») — the landing's #proof .pf-vr rules,
   re-scoped to #otzyvy .rv-vr. Phone rules inside the same widths as the landing. ── */
#otzyvy .rv-vr{margin:clamp(72px,8vw,112px) 0 0}
#otzyvy .rv-vr__item{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center;max-width:900px;margin:0}
#otzyvy .rv-vr__film{aspect-ratio:9/16;border:10px solid #FFFFFF;border-bottom-width:14px;border-radius:4px;background:#2A1428;
  transform:rotate(-1.5deg);box-shadow:0 30px 50px -24px rgba(8,1,6,.8),0 10px 20px -12px rgba(8,1,6,.5)}
#otzyvy .rv-vr__film picture,#otzyvy .rv-vr__film img{object-fit:cover}
#otzyvy .rv-vr__film .cvid__play{justify-content:center;padding-right:0 !important}
#otzyvy .rv-vr__film .cvid__v{object-fit:cover}
#otzyvy .rv-vr__k{margin:0 0 14px;font:700 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
#otzyvy .rv-vr__q{margin:0;max-width:30ch;font:italic 400 clamp(23px,2.4vw,30px)/1.4 var(--serif);color:var(--txt);text-wrap:pretty}
#otzyvy .rv-vr__who{margin:18px 0 0;font:400 16px/1.5 var(--sans);color:var(--mut)}
#otzyvy .rv-vr__who b{color:var(--txt)}
html[data-theme="light"] #otzyvy .rv-vr__k{color:#8A5A2B}
html[data-theme="light"] #otzyvy .rv-vr__film{box-shadow:0 0 0 1px rgba(76,31,60,.08),0 26px 44px -22px rgba(76,31,60,.4),0 8px 16px -10px rgba(76,31,60,.22)}
@media (max-width:760px){
  #otzyvy .rv-vr{margin-top:64px}
  #otzyvy .rv-vr__item{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:center;text-align:center}
  #otzyvy .rv-vr__film{width:min(78vw,300px);transform:rotate(-1deg)}
  #otzyvy .rv-vr__q{font-size:21px;margin:0 auto}
}