:root{
  --violet:#261261;
  --violet-soft:#f2ecff;
  --orange:#ff681a;
  --ink:#2b2436;
  --ink-dark:#1f1731;
  --muted:#746b80;
  --paper:#fbf7f1;
  --line:#e4dcee;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body p,body h1,body h2,body h3,body blockquote,body ul{margin-top:0}
body a{color:inherit}
.topline,.bottomline{
  height:5px;
  background:linear-gradient(90deg,var(--violet) 0%,var(--orange) 50%,var(--violet) 100%);
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.hero{max-width:700px;margin:0 auto;padding:56px 0 8px}
.tag{
  display:inline-block;
  margin:0 0 22px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--orange);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--violet)}
h1{
  font-size:clamp(2rem,4.9vw,3.3rem);
  line-height:1.12;
  letter-spacing:-.01em;
  max-width:22ch;
  margin:0 0 24px;
  font-weight:700;
}
h1 em{font-style:normal;color:var(--orange)}
.deck{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.12rem,2vw,1.32rem);
  line-height:1.55;
  color:#3d3151;
  max-width:38ch;
  margin:0 0 28px;
}
.byline{
  padding:16px 0 0;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}
article{max-width:700px;margin:0 auto;padding:36px 0 64px}
article > p{margin:0 0 1.15em}
article p{line-height:1.7}
h2{
  font-size:clamp(1.4rem,3vw,1.9rem);
  line-height:1.22;
  letter-spacing:-.005em;
  margin:2.1em 0 .75em;
  font-weight:700;
  max-width:26ch;
}
h3{font-weight:700}
.lead{font-size:1.05em}
.lead:first-letter{
  float:left;
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.5em;
  line-height:.82;
  font-weight:700;
  color:var(--orange);
  margin:.08em .12em 0 0;
}
strong{color:var(--ink-dark);font-weight:650}
.accent{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--violet);font-size:1.08em}
.sep{display:flex;align-items:center;justify-content:center;gap:14px;margin:2.8em 0}
.sep i{display:block;width:5px;height:5px;border-radius:50%;background:var(--orange);opacity:.65}
.note,.mechanic,.compare,.offer,.midcta,.scribble,.day{max-width:700px}
.note{
  margin:2.4em 0;
  padding:22px 24px;
  background:var(--violet-soft);
  border:1px solid #ddd2f7;
  border-radius:16px;
}
.note b{color:var(--violet)}
.scribble{
  margin:2.4em 0;
  padding:24px 26px;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--orange);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(38,18,97,.05);
  position:relative;
  overflow:hidden;
}
.scribble:before{
  content:"ааа  ббб  ввв";
  position:absolute;
  right:-14px;
  top:-10px;
  transform:rotate(8deg);
  font-family:"Comic Sans MS",cursive;
  font-size:42px;
  color:#f0eafb;
  letter-spacing:4px;
  white-space:nowrap;
}
.scribble .lbl{
  position:relative;
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
}
.scribble p{position:relative;margin:0;font-size:1.03em}
.chain{display:grid;grid-template-columns:1fr;gap:10px;margin:2.2em 0}
.chain div{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}
.chain div p{margin:0}
.chain span{
  width:30px;height:30px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 30px;font-weight:700;font-size:14px;margin-top:2px;
}
.mechanic{
  margin:2.4em 0;
  padding:26px 28px;
  background:var(--violet);
  color:#efeaff;
  border-radius:16px;
}
.mechanic h3{color:#fff;font-size:1.35rem;line-height:1.3;margin:0 0 12px}
.mechanic p{color:#e6def7;margin:0 0 .8em}
.mechanic p:last-child{margin-bottom:0}
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:2.4em 0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.compare>div{padding:22px 20px}
.compare>div+div{border-left:1px solid var(--line);background:var(--violet-soft)}
.compare h3{font-size:1rem;line-height:1.35;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.compare .good h3{color:var(--orange)}
.compare ul{margin:0;padding-left:1.15em}
.compare li{margin:0 0 .5em}
.compare li::marker{color:var(--orange)}
.midcta{
  margin:2.6em 0;
  padding:22px 24px;
  text-align:center;
  background:var(--violet);
  color:#efeaff;
  border-radius:16px;
}
.midcta p{margin:0 0 14px;font-size:16px;color:#efeaff}
.midcta a{
  display:inline-block;
  padding:13px 18px;
  border-radius:12px;
  background:var(--orange);
  color:#fff!important;
  font-weight:700;
  text-decoration:none;
}
.program{display:grid;gap:12px;margin:1.8em 0 2.4em}
.day{
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}
.day b{display:block;color:var(--orange);font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.day p{margin:0;font-size:16px;line-height:1.55}
.offer{
  margin:2.5em 0 0;
  padding:30px 28px;
  background:var(--violet);
  color:#ece7f6;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(38,18,97,.14);
}
.offer .small{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#ff9a68;font-weight:700}
.offer h3{color:#fff;font-size:1.55rem;line-height:1.25;margin:10px 0 10px}
.offer p,.offer li{color:#ded5ee}
.offer ul{margin:0 0 22px;padding-left:1.1em}
.offer li{margin:0 0 .55em}
.offer li::marker{color:var(--orange)}
.btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--orange);
  color:#fff!important;
  text-decoration:none;
  font-weight:700;
  padding:15px 20px;
  border-radius:12px;
  margin-top:20px;
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.free{text-align:center;font-size:13px;color:#cfc4e8!important;margin:12px 0 0!important}
footer{max-width:700px;margin:0 auto;padding:0 20px 48px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:640px){
  body{font-size:18px;line-height:1.7}
  .wrap{padding:0 18px}
  .hero{padding:36px 0 4px}
  article{padding:30px 0 56px}
  h1{font-size:clamp(2rem,10vw,2.7rem)}
  .deck{font-size:1.08rem}
  .compare{grid-template-columns:1fr}
  .compare>div+div{border-left:0;border-top:1px solid var(--line)}
  .scribble,.note,.mechanic,.midcta{padding:20px 18px}
  .offer{padding:26px 20px}
}