.detail-example{padding:70px 0;background:#f4f0e8;color:#152d3b}
.detail-example .example-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.detail-example h2{font:400 clamp(32px,3vw,44px)/1.15 'Playfair Display',Georgia,serif;margin:0 0 23px;letter-spacing:-.8px}
.detail-example h2 em{color:#a1823e}.detail-example .example-copy>p{font-size:15px;line-height:1.8;color:#56636a}
.detail-example .example-copy>.sales-link{display:inline-block;margin-top:24px}
.detail-example .website-proof{border:1px solid #dce0df;background:white;overflow:hidden}
.detail-example .browser-top{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:#eee8dc;color:#65727b;font-size:9px}
.detail-example .dots{font-size:7px;letter-spacing:2px;color:#b3985b}
.detail-example .website-proof>a{display:block;max-height:330px;overflow:hidden}
.detail-example .website-proof>a>img{display:block;width:100%;height:auto}
.detail-example .proof-caption{padding:24px;border-top:1px solid #dce0df}.detail-example .proof-caption .kicker{display:block;font-size:9px;color:#9f813f;letter-spacing:1.6px;margin-bottom:12px;text-transform:uppercase}
.detail-example .proof-caption h3{font-family:'Playfair Display',Georgia,serif;font-size:27px;font-weight:400;margin-bottom:13px}
.detail-example .proof-caption p{font-size:13px;line-height:1.8;color:#56636a;margin:0 0 18px}
.detail-example .text-link{font-size:12px;color:#981e3b;text-decoration:underline;text-underline-offset:5px}
.detail-example .course-visual{padding:28px;background:#eae3d6;border:1px solid #d6cbb5;text-align:center}
.detail-example .course-visual>.kicker{display:block;font-size:9px;letter-spacing:1.4px;color:#9f813f;margin-bottom:22px;text-transform:uppercase}
.detail-example .course-paper{background:#fffdf8;text-align:left;padding:29px;border:1px solid #d9cfbb;box-shadow:10px 10px 0 #c9b58d30}
.detail-example .course-paper>small{font-size:8px;letter-spacing:1.5px;color:#9f813f}
.detail-example .course-paper h3{font:400 38px/1.15 'Playfair Display',Georgia,serif;margin:20px 0 27px}
.detail-example .lesson{display:flex;gap:17px;align-items:center;border-top:1px solid #e0d8cc;padding:15px 0;font-size:12px;line-height:1.6}
.detail-example .lesson>span{font:400 23px/1.2 'Playfair Display',Georgia,serif;color:#a1823e}.detail-example .lesson small{display:block;font-size:9px;color:#65727b}.detail-example .lesson>b{font-size:20px;font-weight:400;color:#a1823e;margin-left:auto}
.detail-example .course-note{display:block;margin-top:22px;font:italic 20px/1.4 'Playfair Display',Georgia,serif;color:#9f813f}.detail-example .caption{font-size:10px;line-height:1.7;color:#65727b;margin-top:18px}
.detail-example .flow{padding:30px;border:1px solid #d6cbb5;background:#fff}
.detail-example .flow>.kicker{font-size:10px;line-height:1.7;color:#9f813f;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:27px}
.detail-example .flow-step{display:flex;align-items:center;gap:20px}.detail-example .flow-step>span{display:grid;place-items:center;flex-shrink:0;border:1px solid #b3985b;width:38px;height:38px;border-radius:50%;font-size:12px;color:#9f813f}
.detail-example .flow-step h3{font:400 24px/1.3 'Playfair Display',Georgia,serif;margin:0 0 7px}.detail-example .flow-step p{font-size:12px;line-height:1.7;color:#56636a}.detail-example .flow-line{font-size:20px;color:#9f813f;margin:10px 0 10px 14px}
.detail-example .writing-example{padding:28px;background:#fff;border:1px solid #dce0df}.detail-example .writing-example>.kicker{display:block;font-size:10px;color:#9f813f;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:22px}
.detail-example .note-input{padding:20px;background:#f4f0e8;border-left:2px solid #b3985b}.detail-example .note-input>span,.detail-example .note-output>span{font-size:10px;color:#9f813f}.detail-example .note-input p,.detail-example .note-output p{font-size:13px;line-height:1.8;margin-top:9px}
.detail-example .writing-arrow{display:block;text-align:center;color:#9f813f;font-size:24px;line-height:2}
.detail-example .note-output{padding:22px;border:1px solid #dce0df}.detail-example .note-output h3{font:400 29px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}.detail-example .note-output>small{display:block;margin-top:16px;font-size:10px;color:#65727b}
.sales-page a:focus-visible,.sales-page button:focus-visible{outline:3px solid #b3985b;outline-offset:5px}
@media(max-width:900px){.detail-example .example-layout{gap:35px}}
@media(max-width:760px){.detail-example{padding:50px 0}.detail-example .example-layout{grid-template-columns:1fr;gap:28px}.detail-example h2{font-size:34px}.detail-example .course-paper{padding:24px}.detail-example .flow{padding:25px}.detail-example .flow-step h3{font-size:22px}}