/* Follow-up step pages (/follow-up/<step>/). Built on design-study.css, site-nav.css, step-art.css and page-shell.css. */
.fu{color:var(--green)}
.fu h2{font-size:clamp(34px,4vw,60px);letter-spacing:-.055em}

/* Opening: heading and plain explanation, drawing on the right */
.fu-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,6vw,110px);align-items:center;padding:clamp(50px,7vw,110px) var(--gutter) clamp(70px,8vw,120px)}
.fu-hero h1{margin:0;font-weight:400;font-size:clamp(46px,6.6vw,108px);line-height:.95;letter-spacing:-.068em;max-width:900px}
.fu-lede{margin:clamp(26px,3vw,40px) 0 0;max-width:600px;font-size:clamp(18px,1.6vw,23px);line-height:1.45;letter-spacing:-.02em}
.fu-hero-art{justify-self:end;width:min(100%,380px);padding:clamp(18px,2.4vw,34px);border:1px solid #173e3426;border-radius:24px;background:#fbf9f2}

/* Content sections: heading left, copy right, hairline between */
.fu-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);padding:clamp(60px,7vw,100px) var(--gutter);border-top:1px solid #173e3426}
.fu-section>h2{align-self:start}
.fu-copy{max-width:640px}
.fu-copy p{margin:0 0 20px;font-size:18px;line-height:1.6;color:#33463f}
.fu-copy p:last-child{margin-bottom:0}

/* Sequential steps: genuinely ordered, so a numbered hairline list is right here */
.fu-how{list-style:none;margin:0;padding:0;counter-reset:fu;max-width:680px}
.fu-how li{counter-increment:fu;display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid #173e3426;font-size:17.5px;line-height:1.55;color:#33463f}
.fu-how li:last-child{border-bottom:1px solid #173e3426}
.fu-how li::before{content:counter(fu);display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--teal);border-radius:50%;color:var(--teal);font-size:13px;margin-top:-2px}
.fu-how b{display:block;font-weight:400;color:var(--green);font-size:20px;letter-spacing:-.03em;margin-bottom:4px}

/* Who does what */
.fu-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #173e3426;max-width:760px}
.fu-split>div{padding:26px 28px 6px 0}
.fu-split>div+div{padding-left:28px;border-left:1px solid #173e3426}
.fu-split h3{margin:0 0 14px;font-weight:400;font-size:24px;letter-spacing:-.04em}
.fu-split ul{margin:0;padding:0;list-style:none}
.fu-split li{position:relative;padding:0 0 14px 22px;font-size:16.5px;line-height:1.5;color:#33463f}
.fu-split li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--teal)}
.fu-note{margin:26px 0 0;max-width:640px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* Sample messages */
.fu-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:760px;align-items:start}
.fu-samples .sample:nth-child(2){margin-top:46px}
.sample{margin:0;padding:20px 20px 22px;border:1px solid #173e3430;border-radius:16px;background:#fbf9f2;font-size:15px;line-height:1.55;color:#33463f}
.sample header{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #173e3420}
.sample header span:first-child{color:var(--teal)}
.sample p{margin:0 0 10px}
.sample p:last-child{margin-bottom:0}
.sample-subject{font-size:16.5px;letter-spacing:-.02em;color:var(--green)}
.sample-sign{color:var(--muted)}
.sample-bubble{background:#e8ede2;border-radius:14px 14px 14px 4px;padding:12px 14px}
.sample-bubble u{text-decoration-color:var(--teal);text-underline-offset:3px}
.fu-samples-note{margin:18px 0 0;font-size:13.5px;color:var(--muted)}

/* Previous / next through the sequence */
.fu-pager{padding:clamp(50px,6vw,80px) var(--gutter) clamp(70px,8vw,110px);border-top:1px solid #173e3426}
.fu-rail{list-style:none;margin:0 0 clamp(34px,4vw,50px);padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid #173e3420}
.fu-rail a{display:block;min-height:44px;padding:14px 10px 0 0;font-size:13px;line-height:1.35;color:var(--muted);border-top:2px solid transparent;margin-top:-2px;transition:color .2s,border-color .2s}
.fu-rail a:hover,.fu-rail a:focus-visible{color:var(--green);border-top-color:#173e3466}
.fu-rail a[aria-current]{color:var(--green);border-top-color:var(--teal)}
.fu-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fu-prevnext a{display:flex;flex-direction:column;gap:8px;min-height:44px;padding:24px 0 0;border-top:1px solid #173e3440;transition:border-color .2s}
.fu-prevnext a:hover,.fu-prevnext a:focus-visible{border-top-color:var(--teal)}
.fu-prevnext span{font-size:13px;color:var(--muted)}
.fu-prevnext b{font-weight:400;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.045em;line-height:1.05}
.fu-prevnext .is-next{text-align:right;align-items:flex-end}

@media(max-width:900px){
  .fu-hero{grid-template-columns:1fr}
  .fu-hero-art{justify-self:start;width:min(100%,300px);order:-1}
  .fu-section{grid-template-columns:1fr;gap:28px}
  .fu-rail{display:flex;overflow-x:auto;scrollbar-width:none;gap:0;-webkit-overflow-scrolling:touch}
  .fu-rail::-webkit-scrollbar{display:none}
  .fu-rail li{flex:0 0 auto}
  .fu-rail{border-top:0;box-shadow:inset 0 2px 0 #173e3420}
  .fu-rail a{padding-right:22px;white-space:nowrap;margin-top:0}
}
@media(max-width:600px){
  .fu-hero-art{width:200px;padding:16px;border-radius:18px}
  .fu-hero h1 br{display:none}
  .fu-split{grid-template-columns:1fr}
  .fu-split>div+div{padding-left:0;border-left:0;border-top:1px solid #173e3426}
  .fu-samples{grid-template-columns:1fr}
  .fu-samples .sample:nth-child(2){margin-top:0}
  .fu-prevnext{grid-template-columns:1fr}
  .fu-prevnext .is-next{text-align:left;align-items:flex-start}
  .fu-how li{grid-template-columns:38px minmax(0,1fr);font-size:16.5px}
}