*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FBF8F3;color:#10293A;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1F5170}a:hover{color:#10293A}
img{max-width:100%}
.display{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800}

/* header */
.site-header{background:#F2E8DB}
.nav{max-width:1440px;margin:0 auto;padding:16px clamp(16px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#10293A}
.brand:hover{color:#10293A}
.brand .word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;letter-spacing:-0.02em}
.brand .tld,.tld{color:#B4501F}
.nav-right{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:600}
.nav-links{display:flex;gap:28px}
.nav-links a{text-decoration:none;color:#10293A}
.btn-outline{text-decoration:none;padding:11px 18px;border:1.5px solid #10293A;border-radius:999px;color:#10293A}
.btn{display:inline-block;text-decoration:none;background:#1F5170;color:#FFFFFF;font-weight:600;font-size:17px;padding:15px 26px;border-radius:999px}
.btn:hover{background:#10293A;color:#FFFFFF}
.link-arrow{text-decoration:none;font-weight:600;font-size:16px;color:#1F5170}

/* hero */
.hero{position:relative;max-width:1440px;margin:0 auto;background:#F2E8DB}
.hero>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.hero-text{position:absolute;left:36%;top:7%;width:60%;display:flex;flex-direction:column;gap:14px}
.eyebrow{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#B4501F}
.hero h1{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,3.5vw,52px);line-height:1.03;letter-spacing:-0.035em;text-wrap:balance}
.hero p{margin:0;max-width:680px;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#2C4757}
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.trust{font-size:14px;color:#3D5866}
@media (max-width:860px){
  .hero-text{position:static;width:auto;padding:28px 20px 24px}
  .nav-links{display:none}
  .brand .word{font-size:22px}
}

/* pain + steps */
.how{background:#10293A;color:#FFFFFF}
.wrap{max-width:1280px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(16px,4vw,56px)}
.how h2{margin:0 0 16px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-0.03em;max-width:860px;text-wrap:balance}
.how .lede{margin:0 0 44px;font-size:19px;line-height:1.55;color:#C3D3DC;max-width:720px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.step{border-top:2px solid #F2B134;padding-top:18px;display:flex;flex-direction:column;gap:8px}
.step .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:#F2B134;letter-spacing:0.06em;text-transform:uppercase}
.step h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-0.02em}
.step p{margin:0;font-size:16px;line-height:1.55;color:#C3D3DC}

/* proof cards */
.proof h2{margin:0 0 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,3vw,42px);letter-spacing:-0.03em;max-width:760px}
.proof .lede{margin:0 0 40px;font-size:18px;line-height:1.55;color:#3D5866;max-width:680px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:#FFFFFF;border:1px solid #E6DCCF;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.card-media{height:220px;background:#F2E8DB}
.card-media.chips{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:24px}
.chip{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#FFFFFF;border-radius:999px;font-size:15px;font-weight:600}
.chip.dark{background:#1F5170;color:#FFFFFF}
.card img.card-media{display:block;width:100%;object-fit:cover;object-position:60% 30%}
.card-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.02em}
.card p{margin:0;font-size:16px;line-height:1.55;color:#3D5866}

/* closing */
.closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.closing h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.035em;max-width:820px;text-wrap:balance}
.closing p{margin:0;font-size:18px;color:#3D5866}
.closing .btn{font-size:18px;padding:17px 30px}

/* footer */
.site-footer{border-top:1px solid #E6DCCF}
.site-footer .inner{max-width:1280px;margin:0 auto;padding:28px clamp(16px,4vw,56px);display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;font-size:15px;color:#3D5866}
.site-footer .word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;color:#10293A}

/* sample book */
.sample-page{background:#F2E8DB}
.sample-page .site-header{background:transparent}
.sb{max-width:1280px;margin:0 auto;padding:16px clamp(16px,4vw,56px) 64px;display:flex;flex-direction:column;gap:22px}
.sb h1{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,48px);letter-spacing:-0.035em}
.sb .lede{margin:0;font-size:18px;line-height:1.5;color:#3D5866;max-width:760px}
.sb figure{margin:0;display:flex;flex-direction:column;gap:12px}
.sb .frame{background:#FFFFFF;border-radius:10px;padding:clamp(8px,1.4vw,18px);box-shadow:0 18px 40px rgba(16,41,58,0.16)}
.sb .frame img{display:block;width:100%;height:auto;aspect-ratio:1800/757;object-fit:contain}
.sb figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sb .trip{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#B4501F}
.sb .label{font-size:18px;font-weight:600}
.sb .ctrl{display:flex;align-items:center;gap:10px}
.sb .ctrl button{width:48px;height:48px;border-radius:50%;font-size:20px;cursor:pointer;font-family:inherit}
.sb .prev{border:1.5px solid #10293A;background:#FFFFFF;color:#10293A}
.sb .next{border:none;background:#1F5170;color:#FFFFFF}
.sb .pos{font-size:15px;font-weight:600;min-width:64px;text-align:center}
.thumbs{position:relative;display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.thumbs button{border:2px solid transparent;border-radius:6px;padding:0;background:none;cursor:pointer;flex:0 0 auto}
.thumbs img{display:block;width:120px;height:auto;border-radius:4px}
.thumbs button[aria-current="true"]{border-color:#1F5170}
.sb .note{margin:8px 0 0;font-size:15px;color:#3D5866}
.hero .trust,.hero .link-arrow{align-self:flex-start;background:rgba(251,248,243,0.88);padding:6px 12px;border-radius:999px}
.hero .link-arrow{padding:10px 16px}
.btn,.btn-outline{white-space:nowrap}
@media (max-width:860px){
  .hero .trust,.hero .link-arrow{background:none;padding:0}
  .nav .btn{font-size:15px;padding:11px 16px}
}