/* Fourth draft: the live site's clear typography and palm invitation. */
.hero-grid{width:min(1120px,calc(100% - 100px));max-width:1120px;padding-top:34px}
.hero h1{font-family:var(--sans);font-weight:600;font-size:clamp(52px,5.2vw,76px);line-height:1.1;letter-spacing:-.05em;max-width:1120px}
.hero h1>span{font-style:normal;color:#80555b}
.hero-opening{margin-top:25px}
.hero-details{text-align:center}
.hero-deck{line-height:1.8}
.cta-note{margin-left:auto;margin-right:auto}
.proof-item strong{font-size:32px}
.proof-item span{max-width:235px;margin:8px auto 0;line-height:1.8}

/* A glimpse of the workbook behind the program cover. */
.program-pages{position:relative;display:block;width:470px;max-width:100%;margin:auto;padding:25px 0 0}
.program-cover{width:65%;margin:0 auto;transform:rotate(-4deg);z-index:2}
.program-tracker{position:absolute;left:23%;top:18px;width:58%;margin:0;transform:translateX(12%) rotate(6deg);z-index:1}
.program-tracker img{filter:blur(.85px);opacity:.88}
.program-tracker span{display:none}
.program-cover img{position:relative;background:var(--paper)}
.program-cover span{transform:rotate(4deg)}

/* A long connected path beside the story, progressing with the reader. */
.progress-rail{overflow-anchor:none;position:absolute;left:max(26px,calc(50% - 590px));right:auto;top:160px;width:24px;height:6500px;display:block;padding:0;gap:0;opacity:1;z-index:10}
.progress-rail:before,.progress-rail:after{left:10px;top:0;bottom:auto;width:4px;border-radius:4px;height:100%;z-index:-1}
.progress-rail:before{background:#ebdce0}
.progress-rail:after{height:100%;background:linear-gradient(180deg,#b9668d 0%,#c77b99 38%,#a9729c 72%,#d198a8 100%);clip-path:inset(0 0 calc((1 - var(--rail-fraction,0))*100%) 0);box-shadow:0 0 14px #bc7d9433}
.progress-rail a{position:absolute;left:0;top:0;transform:translateY(-50%);width:24px;height:24px;border:5px solid var(--paper);background:#eadce0;box-shadow:0 0 0 1px #dcc0c9;transition:background .25s,box-shadow .25s}
.progress-rail a.passed{border-color:var(--paper);background:linear-gradient(145deg,#d495ac,#ab638d);box-shadow:0 0 0 1px #d2a3b4,0 0 14px #c47e9828}
.progress-rail a.active{border-color:var(--paper);background:linear-gradient(145deg,#d895b0,#ad6085);box-shadow:0 0 0 1px #c994a7,0 0 0 7px #cf92a414,0 0 22px #bc71943d}
.progress-rail span{left:28px;right:auto;top:-8px;background:#fffaf5f5;color:#80555b;border:1px solid #ead8dd;padding:4px 10px;box-shadow:0 3px 12px #7755580a}

/* Matched to About Cambria: full-width palms, ivory title, pink 'your'. */
.closing.your-story-invitation{position:relative;isolation:isolate;text-align:center;padding:90px 0 95px;background:#e4d6c9;color:#fff9ed;overflow:hidden}
.closing.your-story-invitation:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#263c3673,#20352f88),url('/assets/palms.webp') center 40%/cover}
.closing .closing-inner{background:none;border-radius:0;overflow:visible;padding:0;width:min(1240px,calc(100% - 100px))}
.closing h2{font-family:var(--sans);font-weight:500;font-size:clamp(49px,7vw,100px);line-height:1.03;letter-spacing:-.04em;margin:24px 0 35px}
.closing h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.16em;line-height:1;color:#f4d6d1;position:relative}
.closing h2 em:after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:2px;background:currentColor}
.closing .eyebrow{font-size:11px;letter-spacing:.18em;color:#fff9ed}
.closing p{font-size:16px;line-height:1.75;margin:0 auto 29px;color:#fff9ed}
.closing .cta{border-radius:999px;min-width:290px;padding:18px 27px;color:#63464c;border-color:#e2b9bf;background:linear-gradient(110deg,#f5dedd,#e9c2ca,#f5dedd);background-size:250% 100%;box-shadow:0 7px 28px #28352c22,inset 0 1px 0 #fff7ee88}
.closing .cta:hover{color:#63464c;background:linear-gradient(110deg,#f9e6df,#efd0d5,#f9e6df);background-size:250% 100%;box-shadow:0 7px 28px #28352c33}
@media(max-width:1100px){.hero-grid{width:calc(100% - 100px)}.hero h1{font-size:clamp(51px,6.4vw,68px)}.progress-rail{left:19px}.proof-strip{width:min(820px,calc(100% - 100px))}}
@media(max-width:760px){
 .hero-grid{width:calc(100% - 48px);padding-top:28px}.hero h1{font-size:clamp(37px,8.8vw,55px);font-weight:600;line-height:1.13;letter-spacing:-.05em}.hero-opening{margin-top:22px}.hero-deck{font-size:15px;line-height:1.8}.proof-strip{width:calc(100% - 40px)}.proof-item strong{font-size:25px}.proof-item span{font-size:10px;line-height:1.7;max-width:115px}.program-pages{width:340px;padding-top:18px}.program-cover{width:64%}.program-tracker{top:12px;width:57%;left:23%}.progress-rail{left:4px;width:12px}.progress-rail:before,.progress-rail:after{left:5px;width:2px}.progress-rail a{width:12px;height:12px;border-width:3px}.progress-rail a.active{box-shadow:0 0 0 1px #c994a7,0 0 9px #bc719455}.progress-rail span{left:17px;top:-9px;font-size:10px}.closing.your-story-invitation{padding:65px 0}.closing .closing-inner{width:calc(100% - 40px)}.closing h2{font-size:52px;margin:20px 0 28px;line-height:1.03}.closing p{font-size:15px}.closing .cta{width:min(100%,340px);min-width:0;font-size:14px}
}
@media(max-width:390px){.closing h2{font-size:48px}}
@media(prefers-reduced-motion:reduce){.progress-rail a{transition:none}.closing .cta{animation:none}}