@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root { --ink:#121212; --gold:#b89746; --line:#dedbd4; --muted:#666; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:"DM Sans",Arial,sans-serif; font-size:16px; }
.site-header { height:72px; color:white; background:#050505; }
.nav-wrap { height:100%; display:flex; align-items:center; gap:42px; }
.brand { color:#fff; font:700 40px/1 Georgia,serif; letter-spacing:-2px; text-decoration:none; }
nav { display:flex; gap:22px; flex:1; }
nav a { color:#fff; font-size:12px; text-decoration:none; font-weight:600; }
.nav-tools { display:flex; align-items:center; gap:20px; font-size:12px; }
.nav-tools i { font-size:16px; }
.page { max-width:1240px; padding:42px 20px 55px; }
.content { display:grid; grid-template-columns:minmax(0, 2fr) minmax(330px, .82fr); gap:42px; align-items:start; }
.breadcrumb,.kicker { color:#777; margin:0 0 16px; font-size:12px; font-weight:700; }
.breadcrumb span { color:var(--gold); margin:0 4px; }
h1,h2 { font-family:"Playfair Display",Georgia,serif; }
h1 { font-size:48px; line-height:1.06; letter-spacing:-1.5px; margin:0 0 14px; max-width:800px; }
.lead { color:#666; font-size:18px; line-height:1.45; margin:0 0 20px; max-width:760px; }
.byline { display:flex; align-items:center; gap:12px; margin:20px 0 24px; font-size:13px; }
.byline small,.leader small,.testimonials small { display:block; color:#777; font-size:11px; font-weight:400; }
.avatar { width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:linear-gradient(135deg,#d8bca1,#7e5e4c); color:#fff; display:inline-flex; align-items:center; justify-content:center; object-fit:cover; font-size:11px; font-weight:700; }
.author-avatar { width:54px; height:54px; flex-basis:54px; border-radius:12px; object-position:center 35%; background:linear-gradient(135deg,#5e6c76,#d2b9a9); }
.share { margin-left:auto; display:flex; gap:15px; font-size:17px; }
.hero { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin-bottom:24px; }
article > p { font-size:17px; line-height:1.65; margin:0 0 18px; }
article h2 { font-size:27px; line-height:1.2; margin:34px 0 13px; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; margin:30px 0 36px; padding:8px 0; }
.benefits div { padding:10px 8px; }
.benefits i { font-size:38px; color:#c4ad69; }
.benefits h3 { font-size:15px; margin:8px 0 5px; font-weight:700; }
.benefits p { font-size:12px; line-height:1.45; margin:0; }
.steps { list-style:none; margin:20px 0 38px; padding:18px 0 0; display:flex; position:relative; }
.steps:before { content:""; position:absolute; top:30px; left:9%; right:9%; border-top:1px solid var(--line); }
.steps li { width:20%; text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; }
.steps span { position:relative; z-index:1; width:25px; height:25px; border:1px solid var(--line); background:white; border-radius:50%; font-size:11px; display:grid; place-items:center; }
.steps i { font-size:34px; line-height:1.1; margin-top:8px; }
.steps b { font-size:13px; margin-top:4px; }.steps small { font-size:10px; max-width:120px; line-height:1.35; }
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:15px 0 35px; }
blockquote { margin:0; font-size:12px; line-height:1.5; position:relative; }
blockquote .avatar { float:left; margin:0 9px 7px 0; }
blockquote b { display:block; font-size:13px; } blockquote p { clear:both; margin:12px 0 5px; } blockquote em { color:#b89746; font-style:normal; font-size:12px; }
.bottom-cta { height:210px; position:relative; overflow:hidden; border-radius:3px; color:#fff; }
.bottom-cta img { width:100%; height:100%; object-fit:cover; }
.bottom-cta:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.2)); }
.bottom-cta div { position:absolute; z-index:1; top:34px; left:30px; display:flex; flex-direction:column; align-items:flex-start; }
.bottom-cta strong { font:600 26px/1.1 "Playfair Display",Georgia,serif; }.bottom-cta span { font-size:15px; margin:5px 0 14px; }
.bottom-cta a,.form-box button { background:var(--gold); border:0; color:#fff; padding:11px 20px; font-size:12px; font-weight:700; text-decoration:none; }
.bottom-cta small { font-size:9px; margin-top:8px; }
aside { display:flex; flex-direction:column; gap:20px; }.card { border:1px solid #e4e1da; padding:22px; }
.offer h2 { font-size:23px; line-height:1.13; margin:0 0 19px; }
.offer ul { list-style:none; padding:0; margin:0 0 18px; font-size:13px; line-height:1.8; }
.offer li:before { content:"●"; color:var(--gold); padding-right:8px; font-size:10px; }
.form-box { background:#111; color:white; padding:20px; }.form-box h3 { font-size:16px; margin:0 0 4px; }.form-box p { margin:0 0 12px; color:#ccc; font-size:12px; line-height:1.4; }
.form-box input { border:0; display:block; width:100%; height:42px; padding:9px 11px; margin:9px 0; font-size:13px; }.form-box button { width:100%; margin:3px 0 11px; }.form-box small { display:block; color:#ccc; font-size:10px; line-height:1.4; }
.leaders .kicker { margin-bottom:16px; }.leader { display:grid; grid-template-columns:42px 1fr; column-gap:10px; padding:15px 0; border-top:1px solid var(--line); font-size:13px; }.leader .avatar { grid-row:span 2; }.leader b { font-size:13px; }.leader q { grid-column:1 / -1; margin-top:12px; color:#555; font-size:12px; font-style:italic; line-height:1.5; }.leader q:after { content:"”"; color:var(--gold); font-size:38px; float:right; line-height:18px; }
.why p:not(.kicker) { display:grid; grid-template-columns:38px 1fr; column-gap:7px; margin:17px 0; }.why i { grid-row:span 2; color:#b7a167; font-size:29px; }.why b { font-size:13px; }.why span { font-size:12px; color:#666; line-height:1.35; }
footer { border-top:1px solid #eee; color:#888; padding:24px; text-align:center; font-size:11px; }
@media (max-width:991px) { .content{grid-template-columns:minmax(0,1fr) 300px;gap:25px}h1{font-size:40px}.page{padding-top:30px}nav{gap:12px}nav a{font-size:10px} }
@media (max-width:767px) { .site-header{height:auto}.nav-wrap{padding:13px 15px;gap:16px}.brand{font-size:30px}nav{display:none}.nav-tools{margin-left:auto}.content{display:block}.content aside{margin-top:30px}h1{font-size:34px;line-height:1.1}.lead{font-size:16px}.hero{height:auto}.page{padding:24px 16px 35px}article>p{font-size:16px}.benefits{gap:7px}.benefits p{font-size:10px}.steps small{font-size:9px}.bottom-cta{height:190px}.testimonials{gap:12px}.card{padding:20px} }
@media (max-width:520px) { .benefits{grid-template-columns:1fr}.steps{display:grid;grid-template-columns:1fr 1fr;gap:20px}.steps:before{display:none}.steps li{width:100%}.testimonials{grid-template-columns:1fr}.bottom-cta div{left:20px;right:20px}.bottom-cta strong{font-size:22px} }
