/* Weylex · дизайн-система сайта · ризо-дуотон: слива + терракота */
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/nsd-500.cyrl.woff2) format('woff2');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:500;font-display:swap;src:url(../fonts/nsd-500.latn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/nsd-500i.cyrl.woff2) format('woff2');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:500;font-display:swap;src:url(../fonts/nsd-500i.latn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/geo-300.cyrl.woff2) format('woff2');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:300;font-display:swap;src:url(../fonts/geo-300.latn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Geologica';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/geo-400.cyrl.woff2) format('woff2');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:400;font-display:swap;src:url(../fonts/geo-400.latn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mono-400.cyrl.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/mono-400.latn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

@layer reset, tokens, base, layout, components, utils;

@layer reset{
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  img,svg{display:block;max-width:100%}
  button{font:inherit;color:inherit}
  ul{list-style:none}
  :target{scroll-margin-top:calc(var(--hdr,84px) + 28px)}
  section[id],div[id]{scroll-margin-top:calc(var(--hdr,84px) + 28px)}
}

@layer tokens{
  :root{
    color-scheme:light dark;

    --bg:        light-dark(oklch(95.5% .010 85),  oklch(20% .048 325));
    --bg-2:      light-dark(oklch(91% .019 85),   oklch(24% .048 325));
    --surface:   light-dark(oklch(97.8% .007 85), oklch(27.5% .048 325));
    --fg:        light-dark(oklch(26.5% .050 325), oklch(94.5% .012 85));
    --fg-2:      light-dark(oklch(39% .044 325),  oklch(82% .022 88));
    --fg-3:      light-dark(oklch(45% .038 325),  oklch(77.5% .026 88));
    --line:      light-dark(oklch(84% .020 330),  oklch(36% .042 325));
    --accent:    light-dark(oklch(50% .155 40),   oklch(78% .145 55));
    --accent-2:  light-dark(oklch(42% .080 330),  oklch(75% .065 330));
    --seal:      light-dark(oklch(52% .175 38),   oklch(76% .160 45));
    --on-accent: light-dark(oklch(97% .009 85),   oklch(20% .048 325));
    --btn-bg:    light-dark(oklch(28.5% .058 325), oklch(94.5% .012 85));
    --btn-fg:    light-dark(oklch(97% .009 85),   oklch(22% .048 325));

    --serif:"Noto Serif Display",Georgia,"Times New Roman",serif;
    --sans:Geologica,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

    --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
    --step-0: clamp(1rem,.965rem + .17vw,1.0625rem);
    --step-1: clamp(1.0625rem,1.01rem + .28vw,1.1875rem);
    --step-2: clamp(1.25rem,1.16rem + .45vw,1.5rem);
    --step-3: clamp(1.5rem,1.3rem + 1vw,2rem);
    --step-4: clamp(1.875rem,1.5rem + 1.9vw,3rem);
    --step-5: clamp(2.25rem,1.55rem + 3.5vw,4.125rem);

    --gutter:clamp(1.25rem,4vw,2.75rem);
    --measure:64ch;
    --pad-s:clamp(3.5rem,7vw,6rem);
    --pad-l:clamp(5rem,10vw,9rem);
    --radius:.5rem;
    --ease:cubic-bezier(.2,.65,.2,1);
  }
  /* Инверсная полоса: в светлой теме — чернильная, в тёмной — на ступень светлее фона. */
  .inverse{
    --bg:        light-dark(oklch(26.5% .058 325), oklch(25.5% .052 325));
    --bg-2:      light-dark(oklch(30.5% .058 325), oklch(29% .052 325));
    --surface:   light-dark(oklch(33.5% .054 325), oklch(32% .050 325));
    --fg:        oklch(95% .012 85);
    --fg-2:      oklch(84.5% .022 88);
    --fg-3:      oklch(76% .026 88);
    --line:      oklch(43% .048 325);
    --accent:    oklch(80% .145 55);
    --accent-2:  oklch(74% .065 330);
    --seal:      oklch(78% .160 45);
    --on-accent: oklch(22% .052 325);
    --btn-bg:    oklch(95% .012 85);
    --btn-fg:    oklch(24% .052 325);
  }
}

@layer base{
  html{-webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{
    background:var(--bg);color:var(--fg-2);
    font-family:var(--sans);font-weight:300;font-size:var(--step-0);line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    hanging-punctuation:first last;overflow-x:hidden;
    padding-bottom:var(--dock,0px);
  }
  /* Ризо-зерно поверх всей страницы — одна плоскость, как краска на бумаге. */
  body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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")}
  @media (forced-colors:active){body::after{display:none}}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--fg);
    text-wrap:balance;letter-spacing:-.005em}
  h1{font-size:var(--step-5)}
  h2{font-size:var(--step-4)}
  h3{font-size:var(--step-2);line-height:1.2}
  p{text-wrap:pretty;max-width:var(--measure)}
  :is(p,li,td,th,dd,dt,blockquote,summary,figcaption,h1,h2,h3){overflow-wrap:break-word}
  i{font-style:italic;color:var(--accent)}
  .inverse i{color:var(--accent)}
  a{color:var(--accent);text-underline-offset:.22em;
    text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);
    transition:text-decoration-color .25s var(--ease),color .25s var(--ease)}
  a:hover{text-decoration-color:currentColor}
  :is(a,button,summary,[tabindex]):focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  ::selection{background:color-mix(in oklch,var(--accent-2) 32%,transparent)}
}

@layer layout{
  .wrap{width:min(74rem,100% - var(--gutter)*2);margin-inline:auto}
  .wrap-narrow{width:min(52rem,100% - var(--gutter)*2);margin-inline:auto}
  .band{--band:var(--bg);padding-block:var(--pad-l);background:var(--band);color:var(--fg-2);
    position:relative;isolation:isolate}
  .band.tint{--band:var(--bg-2)}
  /* Растр второй краски на тёмных полосах — след ризографа. */
  .band.inverse::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:.15;background-size:7px 7px;
    background-image:radial-gradient(circle at center,var(--accent) .8px,transparent .9px)}
  .band.tight{padding-block:var(--pad-s)}
  .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
  @media (min-width:56rem){
    .split{grid-template-columns:1.06fr .94fr}
    .split.wide-right{grid-template-columns:.9fr 1.1fr}
  }
}

@layer components{

  /* ── Шапка ─────────────────────────────────────────── */
  .site-head{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
    padding-block:.9rem;
    background:color-mix(in oklch,var(--bg) 86%,transparent);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid transparent;transition:border-color .3s var(--ease),padding .3s var(--ease)}
  .site-head[data-scrolled]{border-bottom-color:var(--line);padding-block:.6rem}
  .site-head .wrap{display:flex;align-items:center;gap:1.25rem;justify-content:space-between}
  .site-head .logo{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
  @media (max-width:27rem){
    .site-head .wrap{gap:.5rem}
    .site-head .logo{font-size:1.05rem}
    .head-tools{gap:.35rem}
  }
  .logo{font-family:var(--serif);font-size:1.3rem;color:var(--fg);text-decoration:none;
    white-space:nowrap;letter-spacing:-.01em}
  .logo b{font-weight:500;color:var(--accent)}
  .navlist{display:none;align-items:center;gap:clamp(1rem,2vw,1.85rem)}
  @media (min-width:62rem){.navlist{display:flex}}
  .navlist a{color:var(--fg-2);text-decoration:none;font-size:var(--step--1);position:relative;
    padding-block:.35rem}
  .navlist a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease)}
  .navlist a:hover::after,.navlist a[aria-current="true"]::after{transform:scaleX(1)}
  .head-tools{display:flex;align-items:center;gap:.6rem}
  .icon-btn{display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;
    background:none;border:1px solid var(--line);border-radius:var(--radius);
    color:var(--fg-2);cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease)}
  .icon-btn:hover{border-color:var(--accent);color:var(--accent)}
  .icon-btn svg{inline-size:1.05rem;block-size:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5}
  @media (min-width:62rem){.icon-btn.burger{display:none}}
  @media (max-width:61.99rem){.head-tools>.btn{display:none}}
  .theme-btn .moon{display:none}
  @media (prefers-color-scheme:dark){.theme-btn .sun{display:none}.theme-btn .moon{display:block}}
  :root[style*="color-scheme: dark"] .theme-btn .sun{display:none}
  :root[style*="color-scheme: dark"] .theme-btn .moon{display:block}
  :root[style*="color-scheme: light"] .theme-btn .sun{display:block}
  :root[style*="color-scheme: light"] .theme-btn .moon{display:none}

  /* ── Кнопки ────────────────────────────────────────── */
  .btn{--_bg:var(--btn-bg);--_fg:var(--btn-fg);
    display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
    min-block-size:3rem;padding:.85rem 1.7rem;border:1px solid var(--_bg);border-radius:3px;
    background:var(--_bg);color:var(--_fg);font-family:var(--sans);font-weight:400;
    font-size:var(--step--1);text-decoration:none;cursor:pointer;position:relative;
    overflow:hidden;isolation:isolate;text-align:center;
    transition:border-color .3s var(--ease),color .3s var(--ease)}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
  .btn:hover::after{transform:scaleX(1)}
  .btn:hover{color:var(--on-accent);border-color:var(--accent)}
  .btn--accent{--_bg:var(--accent);--_fg:var(--on-accent)}
  .btn--accent::after{background:var(--btn-bg)}
  .btn--accent:hover{color:var(--btn-fg);border-color:var(--btn-bg)}
  .btn--quiet{--_bg:transparent;--_fg:var(--fg);border-color:var(--fg-3)}
  .btn--quiet::after{background:var(--fg)}
  .btn--quiet:hover{color:var(--bg);border-color:var(--fg)}
  @media (prefers-reduced-motion:reduce){.btn::after{display:none}
    .btn:hover{background:var(--accent);color:var(--on-accent)}}

  /* ── Мелкая типографика ────────────────────────────── */
  .eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.15rem;
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--fg-3);font-weight:400}
  .eyebrow::before{content:"";inline-size:2.25rem;block-size:1px;background:var(--accent-2);flex:none}
  .lead{font-size:var(--step-1);color:var(--fg-2);max-width:58ch}
  .mono{font-family:var(--mono);letter-spacing:.03em}
  .folio{position:absolute;inset-block-start:clamp(1.5rem,3vw,2.25rem);
    inset-inline-end:var(--gutter);font-family:var(--mono);font-size:.6875rem;
    letter-spacing:.14em;color:var(--fg-3);opacity:.8}
  .seal{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.6875rem;
    font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--seal);
    border:1.5px solid var(--seal);border-radius:3px;padding:.5rem .75rem;
    rotate:-2.5deg;background:color-mix(in oklch,var(--seal) 7%,transparent)}

  /* ── Прогресс прокрутки ────────────────────────────── */
  .progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;z-index:70;
    background:var(--accent-2);transform:scaleX(0);transform-origin:left;pointer-events:none}
  @supports (animation-timeline:scroll()){
    @media (prefers-reduced-motion:no-preference){
      .progress{animation:grow linear both;animation-timeline:scroll(root)}
      @keyframes grow{to{transform:scaleX(1)}}
    }
  }

  /* ── Появление ─────────────────────────────────────── */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .rise{animation:rise linear both;animation-timeline:view();
        animation-range:entry 0% cover 20%}
      @keyframes rise{from{opacity:0;translate:0 1rem}to{opacity:1;translate:0 0}}
    }
  }

  /* ── Первый экран ──────────────────────────────────── */
  .hero{padding-block:calc(var(--hdr,84px) + clamp(2.5rem,6vw,5rem)) var(--pad-l);
    display:grid;gap:clamp(2rem,4vw,3.5rem);
    grid-template-areas:"brow" "title" "figure" "sub" "cta" "seals" "proof"}
  @media (min-width:56rem){
    .hero{grid-template-columns:1.08fr .92fr;column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:0;
      grid-template-areas:
        "brow   figure"
        "title  figure"
        "sub    figure"
        "cta    figure"
        "seals  figure"
        "proof  figure";
      align-items:start}
  }
  .hero>.eyebrow{grid-area:brow}
  .hero>h1{grid-area:title;max-inline-size:15ch}
  .hero>.hero-sub{grid-area:sub;margin-top:1.35rem;font-size:var(--step-1);max-inline-size:46ch}
  .hero>.hero-cta{grid-area:cta;margin-top:1.9rem;display:flex;gap:.9rem;flex-wrap:wrap}
  .hero>.hero-seals{grid-area:seals;margin-top:1.6rem;display:flex;gap:.9rem;
    flex-wrap:wrap;align-items:center}
  .hero>.hero-proof{grid-area:proof;margin-top:1.6rem}
  .hero>figure{grid-area:figure;margin-block:clamp(.5rem,3vw,0)}
  @media (min-width:56rem){.hero>figure{position:sticky;top:calc(var(--hdr,84px) + 1.5rem)}}
  .portrait{position:relative;border-radius:var(--radius);overflow:hidden;
    background:var(--bg-2);aspect-ratio:4/5;
    box-shadow:0 2.5rem 5rem -3rem color-mix(in oklch,black 55%,transparent)}
  .portrait img{inline-size:100%;block-size:100%;object-fit:cover}
  .portrait figcaption{position:absolute;inset-block-end:0;inset-inline:0;
    padding:2.5rem .95rem .8rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
    color:oklch(97% .01 85);
    background:linear-gradient(to top,oklch(12% .02 60/.72),transparent)}
  .proof-btn{display:block;text-align:start;background:none;border:0;cursor:pointer;
    padding:.5rem 0;font-family:var(--mono);font-size:.75rem;line-height:1.7;
    color:var(--fg-3);border-bottom:1px dotted var(--line);
    transition:color .25s var(--ease),border-color .25s var(--ease)}
  .proof-btn:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .proof-btn b{color:var(--fg-2);font-weight:400}

  /* ── Разворот-манифест ─────────────────────────────── */
  .manifesto{text-align:center}
  .manifesto p{font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:var(--step-3);line-height:1.3;color:var(--fg);max-inline-size:22ch;
    margin-inline:auto;text-wrap:balance}
  .manifesto .eyebrow{justify-content:center}
  .manifesto .eyebrow::after{content:"";inline-size:2.25rem;block-size:1px;
    background:var(--accent-2);flex:none}

  /* ── Список-претензии ──────────────────────────────── */
  .claims{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:0;max-inline-size:52rem}
  .claims li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;
    padding-block:1.05rem;border-top:1px solid var(--line);align-items:baseline}
  .claims li:last-child{border-bottom:1px solid var(--line)}
  .claims .n{font-family:var(--mono);font-size:.6875rem;color:var(--accent);letter-spacing:.1em}
  .claims--plain li{grid-template-columns:1rem 1fr}
  .claims p{margin:0;font-size:var(--step-0)}

  /* ── Шкала срока ───────────────────────────────────── */
  .gauge{margin-top:clamp(2.25rem,4vw,3rem);max-inline-size:44rem}
  .gauge-label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-3);margin-bottom:1.1rem}
  .gauge-track{position:relative;block-size:2px;background:var(--line);margin-bottom:2.6rem}
  .gauge-fill{position:absolute;inset-block:0;inset-inline-start:0;inline-size:26%;
    background:var(--accent-2)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .gauge-fill{transform:scaleX(0);transform-origin:left;
        animation:draw linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
      @keyframes draw{to{transform:scaleX(1)}}
    }
  }
  .gauge-mark{position:absolute;inset-block-start:-.3rem;inline-size:1px;block-size:.75rem;
    background:var(--fg-3)}
  .gauge-note{position:absolute;inset-block-start:.9rem;font-family:var(--mono);
    font-size:.75rem;letter-spacing:.05em;white-space:nowrap}
  .gauge-note.is-good{color:var(--accent-2);font-weight:500}
  .gauge-note.is-bad{color:var(--fg-3)}
  .gauge-table{margin-top:.5rem;font-size:var(--step--1)}
  .gauge-table summary{cursor:pointer;color:var(--fg-3);font-family:var(--mono);
    font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 0;
    min-block-size:2.75rem;display:flex;align-items:center}
  .gauge-table table{border-collapse:collapse;margin-top:.35rem}
  .gauge-table :is(th,td){text-align:start;padding:.5rem 1.5rem .5rem 0;
    border-top:1px solid var(--line);font-weight:400}
  .gauge-table th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3)}

  /* ── Карточка-документ ─────────────────────────────── */
  .doc{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    padding:clamp(1.4rem,2.5vw,1.9rem);container-type:inline-size}
  @media (min-width:56rem){.doc{position:sticky;top:calc(var(--hdr,84px) + 1.5rem)}}
  .doc-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--line)}
  .doc-head .mono{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
  .doc-list li{display:grid;grid-template-columns:1.35rem 1fr;gap:.65rem;align-items:start;
    padding-block:.85rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--fg-2)}
  .doc-list li:first-child{border-top:0;padding-top:1rem}
  .doc-list svg{inline-size:.95rem;block-size:.95rem;margin-top:.3rem;fill:none;
    stroke:var(--accent);stroke-width:2}
  .doc-foot{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--fg-3);line-height:1.7}

  /* ── Крупные цифры ─────────────────────────────────── */
  .figures{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(3,1fr);
    margin-top:clamp(2.5rem,5vw,3.5rem)}
  @media (max-width:36rem){.figures{grid-template-columns:1fr;gap:0}}
  .figure-cell{border-top:1px solid var(--line);padding-top:1.15rem}
  @media (max-width:36rem){.figure-cell{padding-block:1.15rem}}
  .figure-cell .v{font-family:var(--serif);font-size:var(--step-4);line-height:1;
    color:var(--fg);font-variant-numeric:tabular-nums;display:block;
    text-shadow:.045em .045em 0 color-mix(in oklch,var(--accent) 38%,transparent)}
  .figure-cell .v small{font-size:.42em;color:var(--accent)}
  .figure-cell .k{margin-top:.6rem;font-size:var(--step--1);color:var(--fg-3);max-inline-size:26ch}

  /* ── Гарантийный талон ─────────────────────────────── */
  .ticket-wrap{container-type:inline-size;max-inline-size:44rem;
    margin:clamp(2.5rem,5vw,3.5rem) auto 0}
  .ticket{display:grid;grid-template-columns:1fr 12rem;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 2rem 4.5rem -2.75rem color-mix(in oklch,black 60%,transparent)}
  .ticket-main{padding:clamp(1.4rem,3vw,1.9rem)}
  .ticket-stub{position:relative;padding:clamp(1.4rem,3vw,1.9rem);
    border-inline-start:1px dashed var(--line);
    display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
  /* Перфорация: кружок в цвет полосы, на которой лежит талон. */
  .ticket-stub::before,.ticket-stub::after{content:"";position:absolute;
    inset-inline-start:-.5625rem;inline-size:1.125rem;block-size:1.125rem;border-radius:50%;
    background:var(--band,var(--bg));border:1px solid var(--line)}
  .ticket-stub::before{inset-block-start:-.625rem;clip-path:inset(50% 0 0 0 round 0)}
  .ticket-stub::after{inset-block-end:-.625rem;clip-path:inset(0 0 50% 0 round 0)}
  .ticket-route{display:flex;align-items:center;gap:1rem;font-family:var(--serif);
    font-size:var(--step-2);color:var(--fg)}
  .ticket-route .line{flex:1;min-inline-size:2.5rem;border-top:1px dashed var(--accent-2);
    position:relative}
  .ticket-route .line::after{content:"";position:absolute;inset-inline-end:-1px;
    inset-block-start:-.3rem;inline-size:.55rem;block-size:.55rem;
    border-top:1px solid var(--accent-2);border-right:1px solid var(--accent-2);rotate:45deg}
  .ticket-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem;margin-top:1.5rem;
    font-family:var(--mono);font-size:.75rem;color:var(--fg-2);font-variant-numeric:tabular-nums}
  .ticket-kv dt{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
    margin-bottom:.3rem}
  .ticket-stub .mono{font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-3);line-height:1.9}
  @container (max-width:34rem){
    .ticket{grid-template-columns:1fr}
    .ticket-stub{border-inline-start:0;border-block-start:1px dashed var(--line);
      flex-direction:row;align-items:center;flex-wrap:wrap}
    .ticket-stub::before{inset:auto;inset-block-start:-.625rem;inset-inline-start:-.625rem;
      clip-path:inset(0 0 0 50% round 0)}
    .ticket-stub::after{inset:auto;inset-block-start:-.625rem;inset-inline-end:-.625rem;
      inset-inline-start:auto;clip-path:inset(0 50% 0 0 round 0)}
  }

  /* ── Карточки шагов ────────────────────────────────── */
  .steps{display:grid;gap:clamp(1rem,2.5vw,1.75rem);grid-template-columns:1fr;
    margin-top:clamp(2.5rem,5vw,3.5rem);align-items:stretch}
  @media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr)}}
  .step{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.4rem,2.5vw,1.85rem);
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    position:relative;overflow:hidden;transition:border-color .3s var(--ease)}
  .step:hover{border-color:var(--accent-2)}
  .step[data-primary]{border-color:var(--accent);
    background:color-mix(in oklch,var(--accent) 8%,var(--surface))}
  .step .num{font-family:var(--serif);font-size:var(--step-4);line-height:.9;
    color:color-mix(in oklch,var(--accent) 74%,transparent);font-variant-numeric:tabular-nums;
    text-shadow:.05em .05em 0 color-mix(in oklch,var(--accent-2) 45%,transparent)}
  .step .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--accent)}
  .step p{font-size:var(--step--1);color:var(--fg-2);margin-top:auto;padding-top:.35rem}

  /* ── Отзывы ────────────────────────────────────────── */
  .quotes{display:grid;gap:clamp(1rem,2.5vw,1.75rem);grid-template-columns:1fr;
    margin-top:clamp(2.5rem,5vw,3.5rem)}
  @media (min-width:52rem){.quotes{grid-template-columns:repeat(3,1fr)}}
  .quote{display:flex;flex-direction:column;padding:clamp(1.35rem,2.5vw,1.7rem);
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    block-size:100%}
  .quote .tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
  .quote blockquote{font-size:var(--step--1);color:var(--fg-2);flex:1;
    border-inline-start:2px solid var(--accent-2);padding-inline-start:1rem}
  .quote figcaption{margin-top:1.15rem;padding-top:.9rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--fg-3)}
  .quote figcaption a{color:var(--fg-2)}
  .quote figcaption span{display:block;margin-top:.25rem}

  /* ── Честная врезка ────────────────────────────────── */
  .candid{margin-top:clamp(2rem,4vw,2.75rem);padding:1.25rem 1.5rem;
    border-inline-start:2px solid var(--accent-2);
    background:color-mix(in oklch,var(--accent) 6%,transparent);
    border-radius:0 var(--radius) var(--radius) 0;
    font-size:var(--step--1);color:var(--fg-2);max-inline-size:74ch}
  .candid b{font-weight:500;color:var(--fg)}
  .footnote{margin-top:clamp(1.75rem,3vw,2.25rem);padding-top:1rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;line-height:1.85;color:var(--fg-3);max-inline-size:78ch}

  /* ── FAQ ───────────────────────────────────────────── */
  .faq-grid{display:grid;gap:clamp(1.5rem,4vw,3rem)}
  @media (min-width:56rem){.faq-grid{grid-template-columns:.8fr 1.2fr}
    .faq-grid>.faq-aside{position:sticky;top:calc(var(--hdr,84px) + 2rem)}}
  @supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
  .qa{border-bottom:1px solid var(--line)}
  .qa details{border-top:1px solid var(--line)}
  .qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1rem;
    padding-block:1.1rem;min-block-size:3rem;font-family:var(--serif);font-size:var(--step-1);
    color:var(--fg)}
  .qa summary::-webkit-details-marker{display:none}
  .qa summary .mark{margin-inline-start:auto;font-family:var(--mono);font-size:1.1rem;
    color:var(--seal);line-height:1;flex:none;transition:rotate .3s var(--ease)}
  .qa details[open] summary .mark{rotate:45deg}
  .qa .answer{padding-block:0 1.35rem;font-size:var(--step--1);color:var(--fg-2);max-inline-size:56ch}
  @supports (interpolate-size:allow-keywords){
    .qa details::details-content{block-size:0;overflow:clip;
      transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
    .qa details[open]::details-content{block-size:auto}
  }

  /* ── Способы связи ─────────────────────────────────── */
  .reach{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:clamp(1.5rem,3vw,2.25rem)}
  .reach .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:1rem}
  .reach .btn{inline-size:100%}
  .reach-note{margin-top:.9rem;font-family:var(--mono);font-size:.6875rem;line-height:1.75;
    color:var(--fg-3);max-inline-size:none}
  .reach-alt{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--line);
    display:grid;gap:.6rem}
  .reach-alt a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    min-block-size:3rem;padding:.75rem 1.15rem;border:1px solid var(--line);border-radius:3px;
    color:var(--fg-2);text-decoration:none;font-size:var(--step--1);
    transition:border-color .25s var(--ease),color .25s var(--ease)}
  .reach-alt a:hover{border-color:var(--accent);color:var(--accent)}
  .reach-alt .w{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--fg-3);flex:none}
  .reach-alt a:hover .w{color:var(--accent)}

  /* Согласие на обработку ПДн — обязательная галочка перед мессенджерами */
  .consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
    margin:1.35rem 0;font-size:var(--step--1);color:var(--fg-2);cursor:pointer;line-height:1.6}
  .consent input{inline-size:1.2rem;block-size:1.2rem;margin:.2rem 0 0;flex:none;
    accent-color:var(--accent);cursor:pointer}
  .consent input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .consent a{color:var(--accent)}
  [data-gated].is-locked{opacity:.42;cursor:not-allowed}
  .reach-hint{margin-top:.9rem;font-size:.6875rem;line-height:1.7;color:var(--accent);
    max-width:none}
  .reach-hint[hidden]{display:none}
  .gift-cta .btn{inline-size:100%}

  /* ── Подарок ───────────────────────────────────────── */
  .gift{display:grid;gap:1.5rem;align-items:center;padding:clamp(1.4rem,3vw,2rem);
    border:1px dashed var(--accent-2);border-radius:var(--radius);
    background:color-mix(in oklch,var(--accent) 5%,transparent)}
  

  /* ── Подвал ────────────────────────────────────────── */
  .site-foot{background:var(--bg-2);padding-block:clamp(2.5rem,5vw,3.5rem);
    border-top:1px solid var(--line)}
  .foot-grid{display:grid;gap:2rem}
  @media (min-width:48rem){.foot-grid{grid-template-columns:1.2fr .8fr .8fr}}
  .site-foot p,.site-foot li{font-size:var(--step--1);color:var(--fg-3);line-height:1.9}
  .site-foot a{color:var(--fg-2)}
  .foot-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:.7rem}
  .legal{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;line-height:1.9;color:var(--fg-3)}
  .credit{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--fg-3)}
  .credit a{color:var(--accent);text-decoration:none;
    border-bottom:1px solid color-mix(in oklch,var(--accent) 40%,transparent);
    padding-bottom:1px;transition:border-color .25s var(--ease)}
  .credit a:hover{border-bottom-color:var(--accent)}

  /* ── Нижний док: cookie + липкая панель CTA ────────── */
  .dock{position:fixed;inset-inline:0;inset-block-end:0;z-index:75;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:color-mix(in oklch,var(--btn-bg) 96%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 -.75rem 2rem -1.25rem oklch(0% 0 0/.7)}
  .dock:empty{display:none}
  .mobile-cta{display:none;align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem var(--gutter)}
  @media (max-width:62rem){.mobile-cta{display:flex}}
  .mobile-cta .t{font-family:var(--mono);font-size:.625rem;line-height:1.4;
    color:color-mix(in oklch,var(--btn-fg) 80%,transparent);max-inline-size:19ch}
  .mobile-cta a{flex:none;min-block-size:2.75rem;padding:.65rem 1.15rem;border-radius:3px;
    background:var(--accent);color:var(--on-accent);text-decoration:none;
    font-size:var(--step--1);display:inline-flex;align-items:center;white-space:nowrap}

  /* ── Диалоги ───────────────────────────────────────── */
  dialog{border:0;padding:0;background:transparent;color:var(--fg-2);max-block-size:100dvh}
  dialog::backdrop{background:oklch(12% .02 60/.72);backdrop-filter:blur(3px)}
  .sheet{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
    padding:clamp(1.5rem,3vw,2.25rem);inline-size:min(34rem,calc(100vw - 2rem))}
  .sheet h2{font-size:var(--step-2);margin-bottom:.9rem}
  .sheet p+p{margin-top:.85rem}
  .sheet-close{margin-top:1.5rem}
  #nav-sheet{margin-inline-start:auto;margin-block:0;block-size:100dvh;max-block-size:none}
  #nav-sheet .sheet{block-size:100%;inline-size:min(21rem,86vw);border-radius:0;
    border-block:0;border-inline-end:0;display:flex;flex-direction:column;
    justify-content:center;gap:.35rem;padding-inline:2rem}
  #nav-sheet a{font-family:var(--serif);font-size:var(--step-2);color:var(--fg);
    text-decoration:none;padding-block:.65rem;display:block}
  #nav-sheet a:hover{color:var(--accent)}
  @media (prefers-reduced-motion:no-preference){
    dialog[open]{animation:pop .3s var(--ease)}
    dialog[open]::backdrop{animation:fade .3s var(--ease)}
    @starting-style{dialog[open]{opacity:0}}
    @keyframes pop{from{opacity:0;translate:0 .75rem}}
    @keyframes fade{from{opacity:0}}
    #nav-sheet[open]{animation:slide .32s var(--ease)}
    @keyframes slide{from{translate:100% 0}}
  }

  .skip{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:100;
    padding:.75rem 1.15rem;background:var(--btn-bg);color:var(--btn-fg);border-radius:3px;
    text-decoration:none;translate:0 -150%;transition:translate .2s var(--ease)}
  .skip:focus{translate:0 0}
}

@layer utils{
  .visually-hidden:not(:focus):not(:active){position:absolute!important;inline-size:1px;
    block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  [data-ab="a"] .ab-b,[data-ab="b"] .ab-a{display:none}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  @media (forced-colors:active){
    .btn{border:1px solid ButtonText}
    .ticket-stub::before,.ticket-stub::after{background:Canvas}
  }
}

/* ═══════════════════════════════════════════════════════════
   Внутренние страницы: блог, статья, «Об эксперте», правовые
   ═══════════════════════════════════════════════════════════ */
@layer components{

  .page{padding-block:calc(var(--hdr,84px) + clamp(1.75rem,4vw,3rem)) var(--pad-s)}
  .measure{width:min(46rem,100% - var(--gutter)*2);margin-inline:auto}

  .crumbs{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--fg-3);
    margin-bottom:clamp(1.75rem,4vw,2.5rem)}
  .crumbs a{color:var(--fg-2)}

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .lede{font-size:var(--step-1);color:var(--fg-2);max-width:none}

  .note-demo{padding:.9rem 1.15rem;border:1px dashed var(--accent-2);border-radius:var(--radius);
    font-family:var(--mono);font-size:.6875rem;line-height:1.75;color:var(--fg-3);max-width:none}

  .callout{margin-block:clamp(1.75rem,3vw,2.25rem);padding:1.35rem 1.6rem;
    border-inline-start:2px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
    background:color-mix(in oklch,var(--accent) 7%,transparent)}
  .callout .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.6rem}
  .callout p{font-size:var(--step--1);color:var(--fg-2);max-width:none;margin:0}

  .facts{display:grid;gap:clamp(1rem,2.5vw,1.75rem);grid-template-columns:1fr;
    margin-block:clamp(1.75rem,3vw,2.25rem)}
  @media (min-width:38rem){.facts{grid-template-columns:repeat(3,1fr)}}
  .facts .f{border-top:1px solid var(--line);padding-top:1rem}
  .facts .n{font-family:var(--serif);font-size:var(--step-3);line-height:1;color:var(--fg);
    font-variant-numeric:tabular-nums;
    text-shadow:.045em .045em 0 color-mix(in oklch,var(--accent) 38%,transparent)}
  .facts .l{margin-top:.55rem;font-size:var(--step--1);color:var(--fg-3)}

  

  .author{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;gap:1.15rem;align-items:flex-start}
  .author .ini{flex:none;display:grid;place-items:center;inline-size:3.25rem;block-size:3.25rem;
    border-radius:50%;border:1px solid var(--accent-2);color:var(--accent);
    font-family:var(--serif);font-size:1.05rem}
  .author .name{font-family:var(--serif);font-size:var(--step-1);color:var(--fg)}
  .author .role{margin-top:.4rem;font-size:var(--step--1);color:var(--fg-3);max-inline-size:52ch}

  /* Карточки статей */
  .posts{display:grid;gap:clamp(1rem,2.5vw,1.5rem);grid-template-columns:1fr;
    margin-top:clamp(2rem,4vw,3rem)}
  @media (min-width:44rem){.posts{grid-template-columns:repeat(2,1fr)}}
  .post{display:flex;flex-direction:column;gap:.65rem;padding:clamp(1.35rem,2.5vw,1.75rem);
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
    text-decoration:none;color:inherit;transition:border-color .3s var(--ease)}
  a.post:hover{border-color:var(--accent)}
  .post .tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;
    color:var(--accent)}
  .post h2,.post h3{font-size:var(--step-2);margin:0}
  .post p{font-size:var(--step--1);color:var(--fg-2);flex:1;max-width:none;margin:0}
  .post .meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;padding-top:.85rem;
    border-top:1px solid var(--line);font-family:var(--mono);font-size:.6875rem;color:var(--fg-3)}
  .post .go{color:var(--accent)}
  
  

  /* Полоса призыва внизу внутренних страниц */
  .cta-band .btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}

  /* Cookie */
  .cookie{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;
    padding:.9rem var(--gutter);border-bottom:1px solid color-mix(in oklch,var(--btn-fg) 18%,transparent)}
  .cookie p{margin:0;font-family:var(--mono);font-size:.6875rem;line-height:1.6;
    color:color-mix(in oklch,var(--btn-fg) 82%,transparent);max-width:64ch}
  .cookie p a{color:var(--btn-fg)}
  .cookie button{flex:none;min-block-size:2.75rem;padding:.65rem 1.35rem;border:0;border-radius:3px;
    background:var(--accent);color:var(--on-accent);font-size:var(--step--1);cursor:pointer;
    font-family:inherit}
  .cookie button:hover{filter:brightness(1.08)}
  .dock>.cookie:last-child{border-bottom:0}
}

/* ═══════════════════════════════════════════════════════════
   Разметка редакционных страниц продакшена (блог, статьи,
   «Об эксперте», правовые) — те же имена классов, что в бою.
   ═══════════════════════════════════════════════════════════ */
@layer components{

  article, main.editorial{display:block}
  .article,.blog-wrap{width:min(46rem,100% - var(--gutter)*2);margin-inline:auto;
    padding-block:calc(var(--hdr,84px) + clamp(1.75rem,4vw,3rem)) var(--pad-s)}
  .blog-wrap{width:min(74rem,100% - var(--gutter)*2)}

  .article-head{padding-bottom:clamp(1.5rem,3vw,2rem);border-bottom:1px solid var(--line);
    margin-bottom:clamp(1.5rem,3vw,2.25rem)}
  .article-head h1{font-size:var(--step-4);margin-bottom:1.1rem}
  .amx{display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;font-family:var(--mono);
    font-size:.6875rem;letter-spacing:.05em;color:var(--fg-3)}
  .amx b{color:var(--fg-2);font-weight:400}
  .amx a{color:var(--fg-2)}

  .article-body{font-size:var(--step-0)}
  .article-body>*+*{margin-top:1.15rem}
  .article-body h2{font-size:var(--step-3);margin-top:clamp(2.25rem,4vw,3rem)}
  .article-body h3{font-size:var(--step-2);margin-top:clamp(1.5rem,3vw,2rem)}
  .article-body p{max-width:none}
  .article-body a{text-decoration:underline}
  .article-body strong{font-weight:400;color:var(--fg)}
  .article-body ul,.article-body ol{display:grid;gap:.6rem;padding-inline-start:0;list-style:none}
  .article-body li{display:grid;grid-template-columns:1.5rem 1fr;gap:.65rem;align-items:baseline}
  .article-body ul>li::before{content:"—";color:var(--accent-2)}
  .article-body ol{counter-reset:s}
  .article-body ol>li{counter-increment:s}
  .article-body ol>li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
    font-size:.6875rem;color:var(--accent);letter-spacing:.06em}
  .article-body blockquote{margin-block:clamp(1.75rem,3vw,2.25rem);padding:1.25rem 0 1.25rem 1.5rem;
    border-inline-start:2px solid var(--accent-2);font-family:var(--serif);font-style:italic;
    font-size:var(--step-2);line-height:1.35;color:var(--fg);text-wrap:pretty}

  /* Содержание статьи */
  .toc{margin-block:clamp(1.75rem,3vw,2.25rem);padding:1.25rem 1.5rem;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .toc .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:.85rem}
  .toc ol{display:grid;gap:.5rem;counter-reset:t;list-style:none;padding:0}
  .toc li{counter-increment:t;display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;
    align-items:baseline;font-size:var(--step--1)}
  .toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);
    font-size:.6875rem;color:var(--accent);letter-spacing:.06em}
  .toc a{color:var(--fg-2);text-decoration:none}
  .toc a:hover{color:var(--accent);text-decoration:underline}

  /* Карточка риска */
  .risk{margin-block:1.25rem;padding:1.35rem 1.6rem;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--surface)}
  .risk h3{margin:0 0 .6rem;font-size:var(--step-1)}
  .risk p{margin:0;font-size:var(--step--1);color:var(--fg-2);max-width:none}
  .risk p+p{margin-top:.7rem}
  .risk .why{padding-top:.7rem;border-top:1px solid var(--line);color:var(--accent)}

  /* Таблицы с фактами */
  .factbox{margin-block:clamp(1.75rem,3vw,2.25rem);overflow-x:auto;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  table.facts{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:32rem}
  table.facts :is(th,td){text-align:start;padding:.85rem 1.1rem;border-top:1px solid var(--line);
    vertical-align:top;font-weight:400;color:var(--fg-2)}
  table.facts thead th{border-top:0;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
  table.facts tbody tr:hover td{background:color-mix(in oklch,var(--accent) 5%,transparent)}

  /* Расчёт */
  .calc{margin-block:1.5rem;padding:1.25rem 1.5rem;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--surface);font-size:var(--step--1)}
  .calc .row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
    border-top:1px solid var(--line)}
  .calc .row:first-child{border-top:0}
  .calc .row.tot{margin-top:.35rem;border-top:1px solid var(--accent-2);color:var(--fg);
    font-family:var(--mono)}
  .calc .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent);
    white-space:nowrap}

  /* Частые вопросы внутри статьи */
  .faq{margin-block:clamp(1.75rem,3vw,2.25rem);border-bottom:1px solid var(--line)}
  .faq details{border-top:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1rem;
    padding-block:1rem;min-block-size:3rem;font-family:var(--serif);font-size:var(--step-1);
    color:var(--fg)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";margin-inline-start:auto;font-family:var(--mono);
    font-size:1.1rem;color:var(--seal);flex:none;transition:rotate .3s var(--ease)}
  .faq details[open] summary::after{rotate:45deg}
  .faq .a{padding-block:0 1.25rem;font-size:var(--step--1);color:var(--fg-2)}
  .faq .a p{max-width:none;margin:0}
  .faq .a p+p{margin-top:.7rem}
  @supports (interpolate-size:allow-keywords){
    .faq details::details-content{block-size:0;overflow:clip;
      transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }

  /* Сноска об источниках */
  .srcnote{margin-top:clamp(1.75rem,3vw,2.25rem);padding-top:1rem;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.6875rem;line-height:1.85;color:var(--fg-3);max-width:none}

  /* Автор */
  .author .who{display:flex;gap:1.15rem;align-items:flex-start}
  .author img.ini{inline-size:3.25rem;block-size:3.25rem;border-radius:50%;object-fit:cover;
    border:1px solid var(--accent-2);flex:none;padding:0;background:none}
  .author .name{font-family:var(--serif);font-size:var(--step-1);color:var(--fg)}
  .author .role{margin-top:.4rem;font-size:var(--step--1);color:var(--fg-3);max-inline-size:52ch}
  .author .role a{color:var(--fg-2)}

  /* Полоса призыва и «ещё в блоге» из продакшена */
  .cta-band{background:var(--bg-2);padding-block:var(--pad-s);margin-top:clamp(2.5rem,5vw,4rem)}
  .cta-band .in{width:min(46rem,100% - var(--gutter)*2);margin-inline:auto}
  .cta-band .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--fg-3);margin-bottom:1rem}
  .cta-band h2{font-size:var(--step-3)}
  .cta-band p{margin-top:1.1rem;font-size:var(--step-1);color:var(--fg-2);max-width:none}
  .related{width:min(74rem,100% - var(--gutter)*2);margin-inline:auto;
    padding-block:clamp(2.5rem,5vw,4rem)}
  .related>h2{font-size:var(--step-3);margin-bottom:.5rem}

  /* Кнопки продакшена */
  .btn.primary{--_bg:var(--accent);--_fg:var(--on-accent)}
  .btn.primary::after{background:var(--btn-bg)}
  .btn.primary:hover{color:var(--btn-fg);border-color:var(--btn-bg)}
  .btn.ghost{--_bg:transparent;--_fg:var(--fg);border-color:var(--fg-3)}
  .btn.ghost::after{background:var(--fg)}
  .btn.ghost:hover{color:var(--bg);border-color:var(--fg)}

  /* Карточки постов продакшена (span.tag / span.meta вместо p) */
  .post .tag,.post .meta{display:block}
  .post>h2{font-size:var(--step-2);margin:0}
  .post .meta{display:flex;justify-content:space-between;gap:1rem}

  .blog-hero{padding-bottom:clamp(1.5rem,3vw,2rem);border-bottom:1px solid var(--line)}
  .blog-hero h1{font-size:var(--step-4)}
  .blog-hero p{margin-top:1.1rem;font-size:var(--step-1);color:var(--fg-2)}
  .about-figure{max-inline-size:20rem;margin-block:clamp(1.75rem,3vw,2.25rem);
    border-radius:var(--radius);overflow:hidden}
  .about-figure img{inline-size:100%;block-size:auto}
}