/* ================================================================
   ВЕРСИЯ ЛАБ · лендинг v4 · лето 2026
   Дизайн-система: бумага · бронза · штамп · моно
   Токены в oklch, светлая и тёмная тема через light-dark(),
   компоненты на контейнерных запросах, переходы между
   страницами на View Transitions.
   ================================================================ */

/* ---- Шрифты: self-hosted variable woff2, сабсеты кир+лат+₽ ---- */
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/noto-serif-display-cyrillic-wght-normal.woff2') format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/noto-serif-display-latin-wght-normal.woff2') format('woff2-variations');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}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/noto-serif-display-ruble-wght-normal.woff2') format('woff2-variations');unicode-range:U+20BD}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/noto-serif-display-cyrillic-wght-italic.woff2') format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/noto-serif-display-latin-wght-italic.woff2') format('woff2-variations');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}
@font-face{font-family:'Geologica';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geologica-cyrillic-wght-normal.woff2') format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geologica-latin-wght-normal.woff2') format('woff2-variations');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}
@font-face{font-family:'Geologica';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geologica-ruble-wght-normal.woff2') format('woff2-variations');unicode-range:U+20BD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-ruble-400-normal.woff2') format('woff2');unicode-range:U+20BD}

/* ================= ТОКЕНЫ ================= */
:root{
  color-scheme: light dark;

  /* палитра в oklch: одинаковая бронза на sRGB и P3 */
  --paper:      light-dark(oklch(96.2% .012 85),  oklch(16.5% .010 70));
  --surface:    light-dark(oklch(92.4% .018 85),  oklch(21% .012 70));
  --surface-3:  light-dark(oklch(98% .008 85),    oklch(24% .012 70));
  --contrast:   light-dark(oklch(18% .012 70),    oklch(11% .008 70));
  --ink:        light-dark(oklch(26.5% .012 75),  oklch(91% .015 85));
  --ink-soft:   light-dark(oklch(38% .014 75),    oklch(80% .015 82));
  --muted:      light-dark(oklch(46% .018 78),    oklch(66% .018 80));
  --on-contrast:light-dark(oklch(92% .018 85),    oklch(92% .018 85));
  --bronze:     light-dark(oklch(60% .062 62),    oklch(72% .062 65));
  --bronze-deep:light-dark(oklch(50% .070 60),    oklch(78% .058 68));
  --bronze-dim: light-dark(oklch(72% .062 65),    oklch(60% .062 62));
  --stamp:      light-dark(oklch(53% .160 30),    oklch(68% .140 32));
  --hairline:   light-dark(oklch(85.5% .018 82),  oklch(31% .014 75));
  --hairline-2: light-dark(oklch(90% .014 82),    oklch(26% .012 75));
  --btn-bg:      light-dark(oklch(18% .012 70),  oklch(58% .080 60));
  --btn-fg:      light-dark(oklch(92% .018 85),  oklch(97% .010 85));
  --btn-hover:   light-dark(oklch(50% .070 60),  oklch(92% .018 85));
  --btn-hover-fg:light-dark(oklch(97% .010 85),  oklch(18% .012 70));
  /* light-dark() принимает только цвета - непрозрачность шума задаётся обычными правилами */
  --noise:.045;

  /* типографика */
  --serif:'Noto Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --t-hero:clamp(2.15rem,1.1rem + 4.6vw,4rem);
  --t-h2:  clamp(1.75rem,1.1rem + 2.6vw,2.9rem);
  --t-h3:  clamp(1.2rem,1.05rem + .55vw,1.4rem);
  --t-lead:clamp(1rem,.96rem + .3vw,1.14rem);
  --t-body:1rem;
  --t-micro:.78rem;

  /* ритм */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:clamp(4rem,9vw,7.5rem);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --maxw:1240px;
  --col:calc((min(100vw, var(--maxw)) - var(--gutter) * 2) / 12);
  --radius:4px; --radius-lg:10px;
  --header-h:72px;
  --ease:cubic-bezier(.2,.6,.2,1);
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"] {color-scheme:dark;--noise:.028}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--noise:.028}}

@view-transition{navigation:auto}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem);-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* фактура бумаги - под интерфейсом, а не над ним */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:var(--noise);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen}}

img,video{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit;border:none;outline:none;background:none}
:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--bronze-deep);outline-offset:3px;border-radius:2px;
}
.dark :where(a,button,summary,input,textarea,[tabindex]):focus-visible{outline-color:var(--bronze-dim)}
::selection{background:color-mix(in oklch, var(--bronze) 35%, transparent)}

/* ================= РАСКЛАДКА ================= */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
/* журнальная сетка на 12 колонок */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) clamp(1rem,2.5vw,2rem)}
.band{padding-block:var(--s9);position:relative;isolation:isolate}
.band + .band{border-top:1px solid var(--hairline-2)}
.band.surface{background:var(--surface);border-top-color:transparent}
.band.dark{background:var(--contrast);color:var(--on-contrast);border-top-color:transparent;overflow:clip}
.band.dark{--ink:var(--on-contrast);--ink-soft:oklch(80% .018 82);--muted:oklch(68% .018 80);
           --hairline:oklch(32% .014 75);--hairline-2:oklch(26% .012 75);
           --bronze:oklch(72% .062 65);--bronze-deep:oklch(80% .056 68);--surface-3:oklch(22% .012 70);
           --btn-bg:oklch(92% .018 85);--btn-fg:oklch(18% .012 70);
           --btn-hover:oklch(60% .085 60);--btn-hover-fg:oklch(97% .010 85)}

.pagenum{position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--gutter);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);z-index:2}

/* ================= ТИПОГРАФИКА ================= */
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.85rem;margin-bottom:var(--s4)}
.eyebrow::before{content:"";inline-size:2.4rem;block-size:1px;background:var(--bronze);flex:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;text-wrap:balance;
  letter-spacing:-.008em;font-variant-numeric:lining-nums}
h1{font-size:var(--t-hero);line-height:1.05;letter-spacing:-.018em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2}
em{font-style:italic;color:var(--bronze)}
p{text-wrap:pretty}
.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:62ch}
.measure{max-width:64ch}
.mono{font-family:var(--mono)}
.micro{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.03em;color:var(--muted);line-height:1.65}
.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:400;
  background:var(--contrast);color:var(--on-contrast);padding:.75rem 1.25rem;font-size:.875rem;text-decoration:none}
.skip:focus{inset-inline-start:.5rem;inset-block-start:.5rem}

/* ================= КНОПКИ ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-block-size:48px;padding:.85rem 1.6rem;border-radius:var(--radius);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.94rem;font-weight:400;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;transition:color .25s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover);
  transform:translateY(101%);transition:transform .32s var(--ease)}
.btn:hover,.btn:focus-visible{color:var(--btn-hover-fg)}
.btn:hover::after,.btn:focus-visible::after{transform:none}
.btn.bronze{background:light-dark(oklch(50% .070 60),oklch(60% .085 60));color:oklch(97% .01 85)}
.btn.bronze::after{background:light-dark(oklch(18% .012 70),oklch(92% .018 85))}
.btn.bronze:hover,.btn.bronze:focus-visible{color:light-dark(oklch(97% .01 85),oklch(18% .012 70))}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost::after{background:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--paper)}
.btn-row{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap;align-items:center;margin-top:var(--s5)}
.btn .arw{transition:transform .32s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ================= ШАПКА ================= */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  padding-block:.85rem;transition:background .3s,box-shadow .3s,padding .3s;
  background:color-mix(in oklch, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.hdr.pinned{padding-block:.55rem;box-shadow:0 1px 0 var(--hairline)}
.hdr .wrap{display:flex;align-items:center;gap:var(--s4)}
.logo{font-family:var(--serif);font-size:1.3rem;font-weight:500;text-decoration:none;
  letter-spacing:-.01em;view-transition-name:brand;white-space:nowrap}
.logo em{font-style:italic}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.75rem)}
.nav a{text-decoration:none;font-size:.9rem;color:var(--ink-soft);padding-block:.4rem;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after{transform:none;transform-origin:left}
.nav .btn{padding:.6rem 1.1rem;min-block-size:40px;font-size:.87rem;color:var(--on-contrast)}
.tools{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.icobtn{inline-size:44px;block-size:44px;display:grid;place-items:center;cursor:pointer;border-radius:var(--radius);
  color:var(--ink);transition:background .25s}
.icobtn:hover{background:color-mix(in oklch, var(--bronze) 14%, transparent)}
.icobtn svg{inline-size:19px;block-size:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
#theme .i-moon{display:none}
#theme[data-dark="1"] .i-sun{display:none}
#theme[data-dark="1"] .i-moon{display:block}
.burger{display:none}
.burger .bar{display:block;inline-size:22px;block-size:1.5px;background:currentColor;
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger .bar + .bar{margin-top:5px}
.burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* индикатор прочитанного - чистый CSS, без единого слушателя скролла */
.hdr::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px;
  inline-size:100%;background:var(--bronze);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .hdr::after{animation:progress linear both;animation-timeline:scroll(root block)}
  @keyframes progress{to{transform:scaleX(1)}}
}

/* ================= ПЕРВЫЙ ЭКРАН ================= */
.hero{padding-block:calc(var(--header-h) + var(--s8)) var(--s9);border-top:none}
.hero .grid{align-items:center;row-gap:var(--s6)}
.hero-copy{grid-column:1 / span 7}
.hero-fig{grid-column:8 / -1}
h1 .accent{font-style:italic;color:var(--bronze);display:inline-block}
.hero .sub{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--ink-soft);margin-top:var(--s5);max-width:46ch}
.kv{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--hairline)}
.kv dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem}
.kv dd{font-family:var(--serif);font-size:1.12rem;font-weight:500;white-space:nowrap}
.hero-note{margin-top:var(--s4)}
.hero-note a{color:var(--bronze-deep);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--bronze) 55%,transparent)}
.tel{font-family:var(--serif);font-size:1.12rem;font-weight:500;text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--bronze-deep)}

/* медиа-рамка */
.frame{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface);
  aspect-ratio:4/5;box-shadow:0 30px 60px -40px oklch(20% .02 70 / .55)}
picture{display:contents}
.frame img,.frame video{inline-size:100%;block-size:100%;object-fit:cover}
.frame video{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.frame video.on{opacity:1}
/* скрим под подписью - вместо тени на тексте */
.frame figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:2.6rem .9rem .7rem;color:oklch(99% 0 0);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  background:linear-gradient(to top, oklch(12% .01 70 / .78), oklch(12% .01 70 / .45) 45%, transparent)}
.frame .play{position:absolute;inset-block-end:.6rem;inset-inline-end:.6rem;z-index:3;
  display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;
  background:oklch(12% .01 70 / .55);color:oklch(99% 0 0);cursor:pointer;backdrop-filter:blur(6px)}
.hero-fig .frame{aspect-ratio:9/13;max-block-size:min(74vh,720px)}

/* штампы */
.stamps{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
.stamp{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stamp);box-shadow:inset 0 0 0 1.6px currentColor;border-radius:3px;
  padding:.45rem .75rem;transform:rotate(-3deg);opacity:.92}
.dojang{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:7px;
  box-shadow:inset 0 0 0 1.8px var(--stamp);color:var(--stamp);
  font-family:var(--serif);font-size:1.35rem;transform:rotate(2deg)}

/* ================= ПОЛОСА «СТРАХ» - узкая колонка, большое поле ================= */
.fear-copy{grid-column:3 / span 8}
.fears{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s3);max-width:56ch}
.fears li{position:relative;padding-left:2.2rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.fears li::before{content:"“";position:absolute;left:0;top:.15em;font-family:var(--serif);
  font-size:2rem;line-height:1;color:var(--bronze);opacity:.55}
.bridge{grid-column:3 / span 8;margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--hairline);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,.95rem + 1vw,1.6rem);
  line-height:1.35;color:var(--bronze-deep);max-width:30ch}

/* ================= ПОЛОСА «ЧТО ЭТО» - журнальные колонки ================= */
.what-head{grid-column:1 / span 7}
.what-cols{grid-column:1 / -1;margin-top:var(--s6);
  columns:3 19rem;column-gap:clamp(1.5rem,3vw,3rem);column-rule:1px solid var(--hairline-2)}
.what-cols p{margin-bottom:var(--s4);break-inside:avoid;color:var(--ink-soft)}
.what-cols p:first-child::first-letter{
  float:left;font-family:var(--serif);font-size:3.4em;line-height:.82;font-weight:500;
  margin:.06em .12em 0 0;color:var(--bronze)}

/* приборные шкалы */
.gauges{grid-column:1 / -1;margin-top:var(--s7);display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.gauge .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4)}
.rail{block-size:3px;background:var(--hairline);position:relative;border-radius:2px}
.rail .fill{position:absolute;inset-block:0;left:16%;right:20%;background:var(--bronze);border-radius:2px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rail .fill{transform-origin:left;animation:grow linear both;animation-timeline:view();animation-range:entry 15% cover 40%}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.rail .tick{position:absolute;top:-5px;inline-size:1px;block-size:13px;background:var(--muted)}
.rail .val{position:absolute;top:14px;font-family:var(--mono);font-size:.68rem;color:var(--bronze-deep)}
.phs{block-size:11px;border-radius:3px;position:relative;
  background:linear-gradient(90deg,oklch(53% .16 30),oklch(72% .062 65),oklch(60% .062 62) 52%,oklch(58% .07 145))}
.phs .mark{position:absolute;left:52%;top:-7px;inline-size:2px;block-size:25px;background:var(--ink)}
.phs .val{position:absolute;left:52%;top:22px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.68rem;white-space:nowrap}
.gauge-note{margin-top:2.6rem;font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}

/* ================= ПРОТОКОЛ - лента шагов ================= */
.protocol{grid-column:1 / -1;margin-top:var(--s8);list-style:none;
  display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  overflow:hidden;grid-template-columns:repeat(3,minmax(0,1fr))}
.step{background:var(--paper);padding:var(--s5) var(--s4);display:grid;gap:.45rem;align-content:start;list-style:none}
.step .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--bronze-deep)}
.step h3{font-size:1.02rem;font-family:var(--sans);font-weight:400;line-height:1.35}
.step p{font-size:.85rem;color:var(--muted);line-height:1.55}

/* ================= ТАБЛИЦА СРАВНЕНИЯ ================= */
.cmp-wrap{grid-column:1 / -1;margin-top:var(--s7);position:relative}
.cmp-scroll{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
th,td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--hairline);vertical-align:top}
thead th{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  font-size:.64rem;color:var(--muted);white-space:nowrap}
thead th.hl{color:var(--bronze-deep)}
tbody th{font-weight:400;color:var(--ink);white-space:nowrap}
td{color:var(--muted)}
td.hl{background:color-mix(in oklch, var(--bronze) 11%, transparent);color:var(--ink)}
tbody tr:last-child :is(th,td){border-bottom:none}
.swipe-hint{display:none;margin-top:.6rem}
@media(max-width:760px){.swipe-hint{display:block}}

/* ================= СЕУЛ / СЕРТИФИКАТ ================= */
.hanja{position:absolute;inset-inline-end:-2vw;inset-block-start:-1rem;z-index:-1;
  font-family:var(--serif);font-size:clamp(9rem,22vw,17rem);line-height:.85;
  color:color-mix(in oklch, var(--bronze) 22%, transparent);user-select:none;pointer-events:none}
@supports (animation-timeline:view()){
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .hanja{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{transform:translateY(2.2rem)}to{transform:translateY(-2.2rem)}}
  }
}
.seoul-fig{grid-column:1 / span 4}
.seoul-fig .frame{aspect-ratio:9/16}
.seoul-copy{grid-column:6 / span 7;align-self:center}
.route{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6);max-width:22rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--bronze)}
.route .ln{flex:1;position:relative;block-size:1px;background:
  repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px)}
.route .ln::after{content:"→";position:absolute;inset-inline-end:-.35rem;inset-block-start:-.72em}
/* сертификат - на полполосы, как в журнале */
.cert{grid-column:1 / -1;margin-top:var(--s8);display:grid;gap:var(--s6);align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cert-img{display:block;inline-size:100%;border-radius:var(--radius);overflow:hidden;transform:rotate(-1.2deg);
  box-shadow:0 40px 70px -45px oklch(10% .02 70 / .8);cursor:zoom-in;
  transition:transform .5s var(--ease)}
.cert-img:hover{transform:rotate(0deg) scale(1.015)}
.cert-img img{inline-size:100%;block-size:auto}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem var(--s5);margin-top:var(--s5);
  font-size:.9rem;align-items:baseline}
.cert dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cert dd{color:var(--ink)}

/* ================= РЕЗУЛЬТАТЫ - журнальная раскладка ================= */
.gal{grid-column:1 / -1;margin-top:var(--s6);display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(12,minmax(0,1fr))}
.gal figure{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.gal img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal .g1{grid-column:span 7;grid-row:span 2;aspect-ratio:4/5}
.gal .g2{grid-column:span 5;aspect-ratio:16/11}
.gal .g3{grid-column:span 5;aspect-ratio:16/11}
.gal .g4{grid-column:span 12;aspect-ratio:21/8}
.gal figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:2.4rem .85rem .65rem;color:oklch(99% 0 0);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
  background:linear-gradient(to top, oklch(12% .01 70 / .8), oklch(12% .01 70 / .4) 50%, transparent)}
/* кнопка-лупа поверх кадра: фото открывается крупно */
.zoom{position:absolute;inset:0;z-index:3;cursor:zoom-in;inline-size:100%;block-size:100%}
.zoom::after{content:"";position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;
  inline-size:34px;block-size:34px;border-radius:50%;opacity:0;transition:opacity .3s var(--ease);
  background:oklch(12% .01 70 / .55) no-repeat center/16px 16px;backdrop-filter:blur(6px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 21 21M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E")}
.gal figure:hover .zoom::after,.zoom:focus-visible::after{opacity:1}

/* лайтбокс */
.lb{position:relative;inline-size:fit-content;max-inline-size:94vw;margin:auto}
.lb img{inline-size:auto;block-size:auto;max-inline-size:94vw;max-block-size:78vh;
  border-radius:var(--radius);display:block}
.lb .cap{margin-top:.7rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  color:oklch(80% .015 82);display:flex;gap:var(--s5);align-items:center;justify-content:space-between}
.lb .lbnav{display:flex;gap:.5rem}
.lb .lbnav button,.lb .x{inline-size:40px;block-size:40px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;color:oklch(96% .01 85);background:oklch(24% .012 70 / .9);font-size:1rem;
  transition:background .25s;backdrop-filter:blur(6px)}
.lb .lbnav button:hover,.lb .x:hover{background:oklch(45% .05 62)}
.lb .x{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;z-index:2;font-size:1.1rem;line-height:1}

/* отзывы - контейнерные запросы вместо брейкпоинтов окна */
.reviews{grid-column:1 / -1;margin-top:var(--s7);display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start}
.rev{container-type:inline-size;background:var(--surface-3);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:var(--s5);position:relative}
.rev:nth-child(2){margin-block-start:var(--s5)}
.rev:nth-child(3){margin-block-start:calc(var(--s5) * 2)}
.rev blockquote{border-left:2px solid var(--bronze);padding-left:var(--s4);
  font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.rev .who{margin-top:var(--s4);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.rev .who a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.rev .stars{color:var(--bronze);letter-spacing:.15em;font-size:.8rem;margin-bottom:.6rem}
@container (min-width:20rem){.rev{padding:var(--s6)}.rev blockquote{font-size:.95rem}}

/* ================= ДОГОВОР ОЖИДАНИЙ - встык, светлое/тёмное ================= */
.pact{grid-column:1 / -1;margin-top:var(--s6);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.pact > div{padding:clamp(1.5rem,3vw,2.4rem)}
.pact .yes{background:color-mix(in oklch, var(--bronze) 10%, var(--paper))}
.pact .no{background:var(--contrast);color:var(--on-contrast)}
.pact h3{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:var(--s5)}
.pact .yes h3{color:var(--bronze-deep)}
.pact .no h3{color:oklch(72% .062 65)}
.pact ul{list-style:none;display:grid;gap:.8rem}
.pact li{position:relative;padding-left:1.6rem;font-size:.94rem;line-height:1.55}
.pact .yes li{color:var(--ink-soft)}
.pact .no li{color:oklch(82% .015 82)}
.pact li::before{position:absolute;left:0;top:0;font-family:var(--mono)}
.pact .yes li::before{content:"+";color:var(--bronze-deep)}
.pact .no li::before{content:"−";color:oklch(72% .062 65)}

/* ================= ЦЕНЫ ================= */
.price-head{grid-column:1 / span 7}
.smeta{grid-column:1 / span 8;margin-top:var(--s6)}
.smeta .row{display:flex;align-items:baseline;gap:var(--s3);padding-block:.95rem;
  border-top:1px solid var(--hairline)}
.smeta .row:last-of-type{border-bottom:1px solid var(--hairline)}
.smeta dt{font-size:1.02rem}
.smeta dt small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.2rem}
.smeta .dots{flex:1;min-inline-size:2rem;border-bottom:1px dotted var(--hairline);translate:0 -.25rem}
.smeta dd{margin:0;font-family:var(--mono);font-size:.94rem;color:var(--bronze-deep);white-space:nowrap}
.smeta dd.free{color:light-dark(oklch(48% .09 145),oklch(76% .09 145))}
.price-aside{grid-column:9 / -1;margin-top:var(--s6);align-self:start;position:sticky;top:calc(var(--header-h) + 2rem)}
.nogo{border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--s5);background:var(--surface-3)}
.nogo h3{font-size:1.05rem;margin-bottom:var(--s4)}
.nogo ul{list-style:none;display:grid;gap:.7rem}
.nogo li{position:relative;padding-left:1.3rem;font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.nogo li::before{content:"-";position:absolute;left:0;color:var(--bronze)}
.honesty{grid-column:1 / span 8;margin-top:var(--s5);padding:var(--s5);
  border-left:2px solid var(--bronze);background:var(--surface-3);
  font-size:.96rem;color:var(--ink-soft);border-radius:0 var(--radius) var(--radius) 0}
.price-foot{grid-column:1 / span 8;margin-top:var(--s4)}

/* сноски-поповеры на терминах */
.term{background:none;padding:0;cursor:help;color:inherit;
  border-bottom:1px dashed var(--bronze)}
.term:hover{color:var(--bronze-deep)}
.term.a-bond{anchor-name:--a-bond}
.term.a-cycle{anchor-name:--a-cycle}
[popover].note{margin:auto;inline-size:min(22rem,90vw);padding:var(--s4);border-radius:var(--radius);
  background:var(--contrast);color:var(--on-contrast);font-size:.85rem;line-height:1.6;
  box-shadow:0 20px 40px -25px oklch(10% .02 70 / .9);border:none}
[popover].note::backdrop{background:transparent}
@supports (anchor-name:--x){
  [popover].note{position-area:block-end span-inline-end;position-try-fallbacks:flip-block;margin:.5rem 0 0}
  #n-bond{position-anchor:--a-bond}
  #n-cycle{position-anchor:--a-cycle}
}

/* ================= FAQ ================= */
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
.faq-head{grid-column:1 / span 6}
.acc{grid-column:1 / -1;margin-top:var(--s6);border-bottom:1px solid var(--hairline);
  columns:1;max-width:74rem}
details.env{border-top:1px solid var(--hairline);break-inside:avoid}
details.env summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--s4);
  padding-block:1rem;min-block-size:48px}
details.env summary::-webkit-details-marker{display:none}
details.env summary .idx{font-family:var(--mono);font-size:.66rem;color:var(--muted);
  flex:none;inline-size:1.6rem;padding-top:.35rem}
details.env summary .q{font-family:var(--serif);font-weight:500;font-size:1.06rem;line-height:1.35;text-wrap:balance}
details.env summary .m{margin-left:auto;flex:none;color:var(--stamp);font-family:var(--mono);
  font-size:1.1rem;line-height:1;transition:transform .3s var(--ease)}
details.env summary .m::before{content:"+"}
details.env[open] summary .m{transform:rotate(45deg)}
details.env .body{padding:0 0 1.2rem calc(1.6rem + var(--s4));font-size:.94rem;
  color:var(--ink-soft);max-width:64ch;line-height:1.7}
details.env::details-content{block-size:0;overflow:clip;
  transition:block-size .35s var(--ease), content-visibility .35s allow-discrete}
details.env[open]::details-content{block-size:auto}

/* ================= ФОРМА ================= */
.lead-band{background:var(--contrast);color:var(--on-contrast)}
.form-copy{grid-column:1 / span 5}
.form-card{grid-column:7 / -1;background:oklch(22% .012 70);border:1px solid oklch(30% .014 75);
  border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.4rem)}
.steps3{display:grid;gap:var(--s4);margin-top:var(--s6)}
.steps3 li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.steps3 .n{font-family:var(--mono);font-size:.66rem;color:oklch(72% .062 65);
  inline-size:2rem;padding-top:.3rem;letter-spacing:.12em}
.steps3 h3{font-family:var(--sans);font-weight:400;font-size:1rem;margin-bottom:.2rem;color:var(--on-contrast)}
.steps3 p{font-size:.87rem;color:oklch(74% .015 82);line-height:1.55}
.card-lead{font-size:.98rem;color:oklch(80% .015 82);line-height:1.6;margin-bottom:var(--s5);max-width:44ch}
/* галочка согласия */
.consent{display:flex;align-items:flex-start;gap:.7rem;font-size:.82rem;
  color:oklch(76% .015 82);line-height:1.55;cursor:pointer;
  margin:0 0 var(--s5);padding:var(--s4);border-radius:var(--radius);
  background:oklch(17% .01 70);border:1px solid oklch(30% .014 75);transition:border-color .25s}
.consent:hover{border-color:oklch(42% .03 68)}
.consent:has(input:checked){border-color:oklch(56% .07 62)}
.consent input{appearance:none;inline-size:19px;block-size:19px;flex:none;margin-top:.1rem;
  border:1.5px solid oklch(48% .015 78);border-radius:4px;cursor:pointer;position:relative;transition:.2s}
.consent input:checked{background:oklch(60% .062 62);border-color:oklch(60% .062 62)}
.consent input:checked::after{content:"";position:absolute;left:6px;top:2px;inline-size:5px;block-size:10px;
  border:solid oklch(14% .01 70);border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent a{color:oklch(82% .045 70)}
/* кнопки мессенджеров под замком до согласия */
.gate{display:grid;gap:.7rem;transition:opacity .3s var(--ease),filter .3s var(--ease)}
.gate[data-locked="1"]{opacity:.4;filter:grayscale(.7)}
.gate[data-locked="1"] a{pointer-events:none}
.gate .btn.wide{inline-size:100%}
.gate-hint{margin-top:var(--s4);font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;
  color:oklch(66% .018 80);transition:color .25s}
.gate-hint.warn{color:oklch(74% .13 32)}
.gate-hint:empty{display:none}

/* ================= КОНТАКТЫ И ПОДВАЛ ================= */
.contact-a{grid-column:1 / span 5}
.contact-b{grid-column:7 / -1}
.clist{list-style:none;display:grid;gap:.75rem;margin-top:var(--s5)}
.clist li{display:flex;gap:var(--s3);align-items:baseline}
.clist li::before{content:"-";color:var(--bronze);flex:none}
.clist a{text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--bronze) 45%,transparent)}
.clist a:hover{color:var(--bronze-deep)}
.map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline);
  aspect-ratio:16/10;background:var(--surface);display:grid;place-items:center;text-decoration:none;
  position:relative;transition:border-color .3s}
.map:hover{border-color:var(--bronze)}
.map .pin{text-align:center;padding:var(--s5)}
.map .pin b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;margin-bottom:.3rem}
.masters{display:grid;gap:var(--s4)}
footer{background:var(--surface);padding-block:var(--s7)}
.foot{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;align-items:flex-start}
.foot p{font-size:.85rem;color:var(--muted);line-height:1.9}
.foot a{text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--bronze) 45%,transparent)}
.foot .by{inline-size:100%;text-align:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
.foot .by a{color:var(--bronze-deep);border-bottom-color:currentColor}

/* ================= ЛИПКИЙ CTA НА МОБИЛЬНОМ ================= */
.mcta{position:fixed;inset-inline:0;inset-block-end:0;z-index:90;display:none;
  gap:.5rem;align-items:center;padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background:color-mix(in oklch, var(--contrast) 94%, transparent);
  backdrop-filter:blur(10px);box-shadow:0 -12px 30px -20px oklch(10% .02 70 / .8)}
.mcta .t{font-family:var(--mono);font-size:.7rem;color:oklch(72% .062 65);white-space:nowrap}
.mcta a{flex:none;text-decoration:none;color:oklch(97% .01 85);border-radius:3px;
  padding:.7rem .85rem;font-size:.85rem;min-block-size:44px;display:grid;place-items:center}
.mcta a.main{flex:1;background:oklch(50% .07 60)}
.mcta a.alt{box-shadow:inset 0 0 0 1px oklch(45% .02 75)}

/* ================= МОДАЛ ================= */
dialog{border:none;padding:0;background:none;max-width:none;max-height:none;
  inline-size:100%;block-size:100%;overflow:auto}
dialog:not([open]){display:none}
dialog[open]{display:flex;align-items:center;justify-content:center;padding:1.5rem}
dialog::backdrop{background:oklch(12% .01 70 / .82);backdrop-filter:blur(3px)}
dialog .box{position:relative;inline-size:min(46rem,92vw);margin:auto;
  background:var(--paper);border-radius:var(--radius-lg);padding:.85rem}
dialog img{inline-size:100%;block-size:auto;border-radius:var(--radius)}
dialog .x{position:absolute;inset-block-start:-2.6rem;inset-inline-end:0;color:oklch(92% .018 85);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;cursor:pointer;padding:.5rem}

/* ================= АДАПТИВ ================= */
@media (max-width:1024px){
  .hero-copy{grid-column:1 / span 12}
  .hero-fig{grid-column:1 / span 12;max-inline-size:30rem}
  .seoul-fig{grid-column:1 / span 5}
  .seoul-copy{grid-column:1 / span 12}
  .cert{grid-template-columns:1fr}
  .price-aside{grid-column:1 / -1;position:static}
  .smeta,.honesty,.price-foot{grid-column:1 / -1}
  .form-copy,.form-card,.contact-a,.contact-b,.what-head,.price-head,.faq-head{grid-column:1 / -1}
  .fear-copy,.bridge{grid-column:1 / -1}
  .gal .g1{grid-column:span 12;aspect-ratio:4/3}
  .gal .g2,.gal .g3{grid-column:span 6;aspect-ratio:4/5}
  .rev:nth-child(n){margin-block-start:0}
  .protocol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
  .nav{position:fixed;inset:0;inset-inline-start:auto;inline-size:min(84vw,20rem);z-index:110;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s5);
    padding:5rem 2rem 2.5rem;background:var(--paper);border-inline-start:1px solid var(--hairline);
    translate:100% 0;transition:translate .35s var(--ease);box-shadow:-24px 0 60px -34px oklch(10% .02 70 / .6)}
  .nav.open{translate:0 0}
  .nav a{font-size:1.2rem;font-family:var(--serif);font-weight:500;color:var(--ink)}
  .nav .btn{font-size:.95rem;margin-top:var(--s3)}
  .burger{display:grid}
  body.locked{overflow:hidden}
  .mcta{display:flex}
  body{padding-bottom:4.2rem}
  .hdr{backdrop-filter:none;background:color-mix(in oklch,var(--paper) 97%,transparent)}
  /* на мобильном доказательство идёт сразу за заголовком */
  .hero .grid{display:flex;flex-direction:column}
  .hero-fig{order:-1;max-inline-size:none;inline-size:100%}
  .hero-fig .frame{aspect-ratio:5/4;max-block-size:40vh}
  .hero-fig img,.hero-fig video{object-position:50% 74%}
  .what-cols{columns:1}
  .what-cols p:first-child::first-letter{font-size:3em}
  .gal .g2,.gal .g3{grid-column:span 12;aspect-ratio:4/3}
  .gal .g4{aspect-ratio:16/9}
}
@media (max-width:520px){
  .kv{gap:var(--s4) var(--s5)}
  .mcta .t{display:none}
  .cert-img{transform:none}
  .protocol{grid-template-columns:1fr}
  .zoom::after{opacity:1}
  .lb .cap{flex-direction:column;align-items:flex-start;gap:.6rem}
  .lb img{max-block-size:62vh}
  dialog[open]{padding:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hdr::after{display:none}
}
@media (forced-colors:active){
  .btn{border:1px solid ButtonText}
  .frame figcaption,.gal figcaption{background:Canvas;color:CanvasText}
}
@media print{
  .hdr,.mcta,.nav,.tools,dialog,video,.hanja,body::after{display:none!important}
  body{background:#fff;color:#000}
  .band{padding-block:1.5rem;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
}
/* ================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ: блог, статьи, магазин, оборудование,
   семинар, юридические тексты
   ================================================================ */

/* хлебные крошки */
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);
  margin-bottom:var(--s5);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--bronze) 45%,transparent)}
.crumbs a:hover{color:var(--bronze-deep)}
.crumbs .sep{opacity:.5}

/* шапка внутренней страницы */
.page-head{padding-block:calc(var(--header-h) + var(--s7)) var(--s6);border-top:none}
.page-head h1{max-width:22ch}
.page-head .lead{margin-top:var(--s5)}
.byline{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--muted)}
.byline a{color:inherit}

/* статья */
.art{grid-column:2 / span 8}
.art-cover{grid-column:1 / -1;margin-block:var(--s6) var(--s7);border-radius:var(--radius-lg);
  overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.art-cover img{inline-size:100%;block-size:100%;object-fit:cover}

/* типографика длинного текста */
.prose{font-size:1.04rem;line-height:1.75;color:var(--ink-soft);max-width:66ch}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);color:var(--ink);
  margin-top:2.4em;margin-bottom:-.35em;scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;color:var(--ink);margin-top:1.9em;margin-bottom:-.4em}
.prose strong,.prose b{font-weight:500;color:var(--ink)}
.prose a{color:var(--bronze-deep);text-decoration:none;
  border-bottom:1px solid color-mix(in oklch,var(--bronze) 50%,transparent)}
.prose a:hover{border-bottom-color:var(--bronze)}
.prose ul,.prose ol{list-style:none;display:grid;gap:.6rem;padding-left:0}
.prose li{position:relative;padding-left:1.6rem}
.prose ul li::before{content:"-";position:absolute;left:0;color:var(--bronze)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--mono);font-size:.72rem;color:var(--bronze-deep);top:.28em}
.prose blockquote{border-left:2px solid var(--bronze);padding:.2rem 0 .2rem 1.2rem;
  font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--bronze-deep)}
.prose table{min-width:0;font-size:.92rem}
.prose figure{margin-block:1.6em}
.prose img{inline-size:100%;block-size:auto;border-radius:var(--radius)}
.prose .note{background:var(--surface-3);border-left:2px solid var(--bronze);
  padding:var(--s5);border-radius:0 var(--radius) var(--radius) 0;font-size:.98rem}

/* оглавление статьи */
.toc{grid-column:11 / -1;align-self:start;position:sticky;top:calc(var(--header-h) + 2rem);
  font-size:.82rem;line-height:1.5}
.toc .lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4)}
.toc ol{list-style:none;display:grid;gap:.6rem;counter-reset:t}
.toc a{text-decoration:none;color:var(--muted);border-left:1px solid var(--hairline);
  padding-left:.75rem;display:block;transition:color .25s,border-color .25s}
.toc a:hover{color:var(--bronze-deep);border-color:var(--bronze)}

/* карточки статей */
.posts{grid-column:1 / -1;display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.post{container-type:inline-size;display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-3);text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.post:hover{border-color:var(--bronze);transform:translateY(-3px)}
.post .cover{aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.post .cover img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .cover img{transform:scale(1.05)}
.post .in{padding:var(--s5);display:flex;flex-direction:column;gap:.5rem;flex:1}
.post .kick{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-deep)}
.post h2,.post h3{font-size:1.15rem;line-height:1.25}
.post p{font-size:.9rem;color:var(--muted);line-height:1.6}
.post .more{margin-top:auto;padding-top:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--bronze-deep)}
@container (min-width:24rem){.post .in{padding:var(--s6)}}

/* товары и позиции прайса */
.cards{grid-column:1 / -1;display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.card{container-type:inline-size;border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:var(--s5);background:var(--surface-3);display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .3s var(--ease)}
.card:hover{border-color:var(--bronze)}
.card .tag{align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze-deep);
  border:1px solid color-mix(in oklch,var(--bronze) 45%,transparent);border-radius:2px;padding:.25rem .5rem}
.card h3{font-size:1.12rem}
.card p{font-size:.9rem;color:var(--muted);line-height:1.6}
.card .price{margin-top:auto;padding-top:var(--s4);font-family:var(--mono);font-size:1.05rem;color:var(--ink)}
.card .price s{color:var(--muted);font-size:.82rem;margin-left:.5rem}
.card .price small{display:block;font-size:.7rem;color:var(--muted);margin-top:.2rem}
.card .btn{margin-top:var(--s4);inline-size:100%}

/* характеристики */
.specs{grid-column:1 / -1;margin-top:var(--s6);display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.specs > div{display:flex;gap:var(--s4);align-items:baseline;padding-block:.85rem;
  border-bottom:1px solid var(--hairline)}
.specs dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:none;inline-size:9rem}
.specs dd{margin:0;font-size:.94rem}

/* тариф */
.tiers{grid-column:1 / -1;display:grid;gap:var(--s4);margin-top:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tier{border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--s5);background:var(--surface-3)}
.tier.is-now{border-color:var(--bronze);background:color-mix(in oklch,var(--bronze) 8%,var(--surface-3))}
.tier .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tier .val{font-family:var(--serif);font-size:2rem;font-weight:500;margin:.4rem 0 .2rem}
.tier p{font-size:.86rem;color:var(--muted)}

/* юридический текст */
.legal{grid-column:2 / span 9}
.legal .prose{max-width:72ch;font-size:.98rem}
.legal .prose h2{font-size:1.2rem;margin-top:2em}

@media (max-width:1024px){
  .art,.legal{grid-column:1 / -1}
  .toc{display:none}
}

/* активный пункт меню */
.nav a.is-active{color:var(--bronze-deep)}
.nav a.is-active::after{transform:none}

/* обучение: снимки академии */
.acads{grid-column:9 / -1;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-self:center}
.ac{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--surface-3)}
.ac img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ac:hover img{transform:scale(1.05)}
.ac figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:2rem .7rem .55rem;color:oklch(99% 0 0);font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  background:linear-gradient(to top, oklch(12% .01 70 / .82), transparent)}

/* обучение: работы с отзывом */
.works{grid-column:1 / -1;margin-top:var(--s6);display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.work{display:flex;flex-direction:column;gap:var(--s4)}
.work .frame{aspect-ratio:4/5}
.work blockquote{border-left:2px solid var(--bronze);padding-left:var(--s4);
  font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.work .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

@media (max-width:1024px){
  .acads{grid-column:1 / -1;grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .acads{grid-template-columns:1fr 1fr}
}

/* колонки-утилиты журнальной сетки */
.cfull{grid-column:1 / -1}
.c6{grid-column:1 / span 6}
.c7{grid-column:1 / span 7}
.c9{grid-column:9 / -1}
@media (max-width:1024px){.c6,.c7,.c9{grid-column:1 / -1}}


/* ─────────────────────────── Уведомление о cookie
   Метрика не грузится, пока не нажали «Принять». Полоса снизу поверх всего,
   с отступом под системную панель телефона. Цвета - токены сайта. */
.cookie{position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
  padding:var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom,0px));
  background:var(--surface);border-block-start:1px solid var(--hairline);
  box-shadow:0 -14px 44px -26px rgb(0 0 0/.5)}
.cookie[hidden]{display:none}
.cookie__box{max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:var(--s3) var(--s6);grid-template-columns:1fr auto;align-items:center}
.cookie__t{grid-column:1;grid-row:1;font-family:var(--serif);font-size:var(--t-h3);
  color:var(--ink);margin:0}
.cookie__p{grid-column:1;grid-row:2;font-size:.86rem;line-height:1.55;
  color:var(--ink-soft);max-inline-size:64ch;margin:0}
.cookie__p a{color:var(--bronze-deep)}
.cookie__row{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:720px){
  .cookie__box{grid-template-columns:1fr}
  .cookie__t,.cookie__p,.cookie__row{grid-column:1}
  .cookie__row{grid-row:auto}
}
@media print{.cookie{display:none}}