:root { --cream:#f7f0e4; --ink:#17324d; --sage:#6e8c72; --yellow:#e6c765; --terr:#c87d5a; --paper:#fffaf0; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; line-height:1.55; } a { color:inherit; text-decoration:none; } .section-wrap { width:min(1120px,calc(100% - 48px)); margin:auto; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; width:min(1200px,calc(100% - 48px)); margin:auto; } .brand { font-family:Fraunces,serif; font-weight:700; font-size:19px; } .brand span { color:var(--sage); } .topbar-link { font-size:14px; font-weight:700; border-bottom:2px solid var(--yellow); }
.hero { min-height:680px; width:min(1200px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; padding:54px 0 78px; } .eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--sage); margin:0 0 18px; } h1,h2,h3 { margin:0; line-height:1.08; } h1,h2 { font-family:Fraunces,Georgia,serif; } h1 { font-size:clamp(48px,6.1vw,76px); letter-spacing:-.045em; } h1 em,h2 em { color:var(--sage); font-style:normal; } h2 { font-size:clamp(33px,4.2vw,53px); letter-spacing:-.035em; } .hero-text { max-width:520px; font-size:19px; margin:28px 0; color:#3b4d5e; } .hero-actions { display:flex; gap:19px; align-items:center; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:4px; font-weight:700; font-size:15px; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--ink); color:white; box-shadow:0 10px 20px #17324d20; } .button-text { padding-left:0; color:var(--ink); } .button-text span { margin-left:8px; color:var(--terr); font-size:20px; } .microcopy { font-size:12px; color:var(--sage); margin-top:20px; }.hero-art { position:relative; min-height:510px; display:flex; align-items:center; justify-content:center; } .hero-art::before { content:""; position:absolute; width:87%; aspect-ratio:1; border-radius:50%; background:#ede1c3; top:35px; } .hero-art img { width:104%; max-height:550px; object-fit:contain; position:relative; z-index:1; } .sun { position:absolute; width:58px; height:58px; border-radius:50%; background:var(--yellow); right:7%; top:4%; z-index:2; }
.intro { padding:115px 0; border-top:1px solid #ddd1ba; } .two-column { display:grid; grid-template-columns:1fr 1fr; gap:82px; align-items:start; } .two-column > div p { font-size:18px; margin:0 0 16px; color:#415264; }.benefits { padding:105px 0; background:var(--ink); color:#fffaf0; } .benefits .eyebrow { color:var(--yellow); } .benefits h2 { max-width:660px; }.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }.benefit-grid article { padding:28px; border:1px solid #60748a; min-height:205px; }.benefit-grid span { color:var(--yellow); font-size:13px; font-weight:700; }.benefit-grid h3 { font-family:Fraunces,serif; font-size:25px; margin:22px 0 10px; }.benefit-grid p { margin:0; color:#e4e8df; }
.content { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; padding:115px 0; }.content-art { background:#eadfbe; min-height:450px; display:flex; align-items:center; }.content-art img { width:100%; max-height:445px; object-fit:contain; }.content-copy h2 { margin-bottom:27px; }.check-list { list-style:none; padding:0; margin:0 0 30px; }.check-list li { padding:11px 0 11px 27px; position:relative; font-size:17px; }.check-list li::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--yellow); position:absolute; left:1px; top:18px; }
.preview { background:#efe4cb; padding:105px 0; text-align:center; }.preview h2 { font-size:clamp(30px,3.8vw,48px); }.preview-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; text-align:left; }.preview-cards article { background:var(--paper); padding:30px; min-height:170px; }.preview-cards b { color:var(--sage); font-family:Fraunces,serif; font-size:24px; }.preview-cards p { color:#425263; margin:13px 0 0; }
.connection { display:grid; grid-template-columns:1fr 1fr; gap:38px; padding:115px 0; align-items:center; }.connection-copy p:not(.eyebrow) { font-size:18px; color:#415264; max-width:475px; }.connection-art { position:relative; min-height:420px; background:#f1e6cd; }.connection-art img { width:95%; height:390px; object-fit:contain; position:absolute; left:0; bottom:0; }.connection-art .book-art { width:43%; height:235px; right:4%; left:auto; bottom:17px; }.audience { background:var(--sage); color:var(--paper); padding:100px 0; }.audience .eyebrow { color:var(--yellow); }.dash-list { list-style:none; padding:0; margin:6px 0; }.dash-list li { padding:11px 0 11px 25px; border-bottom:1px solid #92a891; position:relative; font-size:17px; }.dash-list li::before { content:"—"; position:absolute; left:0; color:var(--yellow); }
.faq { padding:115px 0; max-width:850px; }.faq h2 { margin-bottom:34px; }.faq details { border-top:1px solid #d8cbb3; padding:22px 0; }.faq details:last-child { border-bottom:1px solid #d8cbb3; }.faq summary { cursor:pointer; font-weight:700; font-size:18px; list-style:none; padding-right:30px; position:relative; }.faq summary::after { content:"+"; position:absolute; right:0; color:var(--sage); font-size:26px; top:-8px; }.faq details[open] summary::after { content:"–"; }.faq details p { margin:13px 30px 0 0; color:#465666; }
.final-cta { background:var(--yellow); padding:115px 0; text-align:center; }.final-cta .eyebrow { color:var(--ink); }.final-cta h2 { font-size:clamp(43px,5vw,66px); }.final-cta h2 em { color:#546d5a; }.final-cta > div > p:not(.eyebrow) { font-size:19px; }.button-light { background:var(--ink); color:white; margin:16px 0 12px; }.final-cta small { display:block; color:#4f5e59; } footer { width:min(1120px,calc(100% - 48px)); margin:auto; min-height:92px; display:flex; align-items:center; justify-content:space-between; color:var(--sage); font-size:13px; } footer a { margin-left:20px; } footer a:hover { color:var(--ink); }
@media (max-width:760px) { .topbar,.hero { width:min(100% - 32px,1200px); }.hero { grid-template-columns:1fr; padding-top:34px; }.hero-art { min-height:380px; order:-1; }.hero-art img { max-height:395px; }.hero-art::before { width:85%; }.sun { top:1%; }.two-column,.content,.connection { grid-template-columns:1fr; gap:35px; }.intro,.content,.connection,.faq { padding:75px 0; }.benefits,.preview,.audience,.final-cta { padding:75px 0; }.benefit-grid,.preview-cards { grid-template-columns:1fr; }.content-art { min-height:320px; }.connection-art { min-height:340px; }.connection-art img { height:320px; }.connection-art .book-art { height:180px; }.section-wrap { width:min(100% - 32px,1120px); } footer { width:min(100% - 32px,1120px); align-items:flex-start; flex-direction:column; justify-content:center; gap:10px; } footer a:first-child { margin-left:0; } }