:root{
  --noir:#070707; --ink:#1F1D18; --muted:#6E6A60; --faint:#8E897C;
  --jaune:#FFC400; --jaune-soft:#FFF7DB; --line:#E7E5DF;
  --bg:#FFFFFF; --surface:#FAFAF8; --surface2:#F4F4F2;
  --ok:#1F9D55; --no:#C0392B;
  --sidebar-w:280px;
  --shadow:0 1px 2px rgba(7,7,7,.04), 0 8px 24px rgba(7,7,7,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:24px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Commissioner',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:50;
  background:linear-gradient(168deg,#2A2822 0%,#070707 62%);
  color:#EFEDE7; display:flex; flex-direction:column; overflow-y:auto;
}
.brand{padding:26px 24px 18px; border-bottom:1px solid rgba(255,255,255,.10)}
.brand-mark{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.brand-mark img{width:26px; height:26px; filter:invert(1) brightness(2)}
.brand-name{font-size:19px; font-weight:800; letter-spacing:-0.03em; color:#fff}
.brand-name i{color:var(--jaune); font-style:normal}
.brand-sub{font-size:12.5px; color:#A8A296; line-height:1.5}
.brand-tag{display:inline-block; margin-top:12px; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--noir);
  background:var(--jaune); padding:4px 10px; border-radius:999px}
nav{padding:14px 12px 30px; flex:1}
nav .grp{font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#6F6A5E; padding:16px 12px 7px}
nav a{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px;
  color:#C9C4B8; text-decoration:none; font-size:14.5px; line-height:1.35;
  transition:background .13s, color .13s}
nav a:hover{background:rgba(255,255,255,.07); color:#fff}
nav a.on{background:var(--jaune); color:var(--noir); font-weight:700}
nav a .n{font-size:11px; font-variant-numeric:tabular-nums; opacity:.55; min-width:16px}
nav a.on .n{opacity:.85}
main{margin-left:var(--sidebar-w); min-width:0}
.wrap{max-width:900px; margin:0 auto; padding:0 40px 120px}
.hero{background:linear-gradient(168deg,#2A2822 0%,#070707 70%); color:#fff;
  padding:76px 40px 66px; margin-bottom:56px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-140px; top:-140px; width:460px; height:460px;
  background:radial-gradient(circle,rgba(255,196,0,.16) 0%,transparent 68%)}
.hero-in{max-width:900px; margin:0 auto; position:relative; z-index:1}
.hero .eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--jaune); margin-bottom:16px}
.hero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; letter-spacing:-0.035em;
  line-height:1.05; margin:0 0 18px; text-wrap:balance}
.hero p{font-size:17.5px; color:#BDB8AC; margin:0; max-width:62ch; line-height:1.6}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.hero-meta span{font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); color:#E6E2D8}
section{scroll-margin-top:20px; padding-top:26px}
section + section{margin-top:64px; border-top:1px solid var(--line); padding-top:56px}
.sec-num{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px}
h2{font-size:clamp(25px,3vw,33px); font-weight:800; letter-spacing:-0.03em;
  color:var(--noir); margin:0 0 12px; line-height:1.15; text-wrap:balance}
.lead{font-size:17px; color:var(--muted); margin:0 0 30px; max-width:66ch}
h3{font-size:19.5px; font-weight:700; letter-spacing:-0.02em; color:var(--noir); margin:38px 0 12px}
h4{font-size:16px; font-weight:700; color:var(--noir); margin:26px 0 8px}
p{margin:0 0 15px; max-width:70ch}
strong{font-weight:700; color:var(--noir)}
.step{display:grid; grid-template-columns:52px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--line)}
.step:last-of-type{border-bottom:0}
.step-n{width:52px; height:52px; border-radius:13px; background:var(--jaune); color:var(--noir);
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800;
  font-variant-numeric:tabular-nums; box-shadow:0 3px 10px rgba(255,196,0,.32)}
.step-b h3{margin:2px 0 8px; font-size:20.5px}
.step-b p:last-child{margin-bottom:0}
.step-when{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); background:var(--surface2);
  padding:3px 10px; border-radius:999px; margin-bottom:10px}
figure{margin:22px 0 4px}
figure img{border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); background:var(--surface)}
figcaption{font-size:13.5px; color:var(--muted); margin-top:10px; line-height:1.5; padding-left:2px}
.fig-duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 4px}
.fig-duo figure{margin:0}
.note{border-left:4px solid var(--jaune); background:var(--jaune-soft);
  border-radius:0 9px 9px 0; padding:16px 20px; margin:22px 0; font-size:15.5px}
.note p{margin:0; max-width:none}
.note p + p{margin-top:9px}
.note.dark{border-left-color:var(--noir); background:var(--surface2)}
.quote-mail{border:1px solid var(--line); border-radius:11px; background:var(--surface);
  margin:20px 0; overflow:hidden}
.quote-mail .mail-head{background:var(--surface2); border-bottom:1px solid var(--line);
  padding:12px 20px; font-size:13px; color:var(--muted)}
.quote-mail .mail-head b{color:var(--noir); font-weight:700}
.quote-mail .mail-body{padding:20px 22px; font-size:15.5px; white-space:pre-line; line-height:1.68}
ul.plain{list-style:none; padding:0; margin:16px 0}
ul.plain li{position:relative; padding-left:26px; margin-bottom:11px; max-width:70ch}
ul.plain li::before{content:""; position:absolute; left:6px; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--jaune)}
ul.yes li, ul.no li{padding-left:30px}
ul.yes li::before{content:"\2713"; background:none; color:var(--ok); font-weight:800; font-size:15px;
  left:2px; top:0; width:auto; height:auto}
ul.no li::before{content:"\2717"; background:none; color:var(--no); font-weight:800; font-size:15px;
  left:2px; top:0; width:auto; height:auto}
.tbl-wrap{overflow-x:auto; margin:22px 0; border:1px solid var(--line); border-radius:11px}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:520px}
th{background:var(--jaune); color:var(--noir); text-align:left; font-weight:700;
  padding:12px 16px; font-size:13.5px; letter-spacing:-0.01em}
td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:top}
tbody tr:nth-child(even){background:var(--surface)}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:24px 0}
.card{border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  background:var(--surface); box-shadow:var(--shadow)}
.card h4{margin:0 0 8px; font-size:16.5px}
.card p{font-size:14.5px; margin:0; color:var(--muted)}
.card .big{font-size:30px; font-weight:800; color:var(--noir); letter-spacing:-0.03em;
  line-height:1.1; margin-bottom:4px; font-variant-numeric:tabular-nums}
.offer-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0}
.offer{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.offer-top{padding:22px 24px 18px; border-bottom:1px solid var(--line)}
.offer.hi .offer-top{background:var(--noir); color:#fff; border-bottom-color:var(--noir)}
.offer-name{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.offer.hi .offer-name{color:var(--jaune)}
.offer-price{font-size:33px; font-weight:800; letter-spacing:-0.035em; color:var(--noir); margin:4px 0 2px}
.offer.hi .offer-price{color:#fff}
.offer-for{font-size:14px; color:var(--muted)}
.offer.hi .offer-for{color:#B4AFA3}
.offer-body{padding:18px 24px 24px}
.offer-body ul{margin:0}
.dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:24px 0}
.dl a{display:flex; align-items:center; gap:13px; padding:14px 16px; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .13s, box-shadow .13s, transform .13s}
.dl a:hover{border-color:var(--noir); box-shadow:var(--shadow); transform:translateY(-1px)}
.dl .ic{width:38px; height:38px; border-radius:9px; background:var(--jaune); color:var(--noir);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-size:10.5px; font-weight:800; letter-spacing:.02em}
.dl .tx{min-width:0}
.dl .tx b{display:block; font-size:14.5px; font-weight:700; color:var(--noir); line-height:1.3}
.dl .tx span{font-size:12.5px; color:var(--muted)}
.links{margin:20px 0}
.links a{display:block; padding:11px 0; border-bottom:1px solid var(--line);
  text-decoration:none; font-size:15px}
.links a:hover .u{text-decoration:underline}
.links b{color:var(--noir); font-weight:700}
.links .u{color:#1155CC; word-break:break-all; font-size:14px}
.links .d{color:var(--muted); font-size:13.5px; display:block; margin-top:2px}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0}
.faq-item:last-child{border-bottom:0}
.faq-q{font-weight:700; color:var(--noir); font-size:16.5px; margin-bottom:7px}
.faq-a{color:var(--ink); margin:0; font-size:15.5px}
.faq-a + .faq-a{margin-top:8px}
footer{margin-left:var(--sidebar-w); border-top:1px solid var(--line);
  padding:30px 40px 60px; background:var(--surface)}
footer .f-in{max-width:900px; margin:0 auto; color:var(--muted); font-size:13.5px}
footer b{color:var(--noir)}
@media (max-width:1024px){
  :root{--sidebar-w:0px}
  .sidebar{position:static; width:100%; height:auto;
    background:linear-gradient(150deg,#2A2822,#070707)}
  nav{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px; padding:12px}
  nav .grp{display:none}
  main, footer{margin-left:0}
  .wrap{padding:0 22px 90px}
  .hero{padding:52px 22px 46px}
  .offer-grid, .fig-duo{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr; gap:15px}
  .step-n{width:44px; height:44px; font-size:17px; border-radius:11px}
}
@media print{.sidebar{display:none} main,footer{margin-left:0}}

.mg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; max-width:560px}
.mg-grid input{min-width:0}