/* A readable illustrated field guide, with every original explanation preserved. */
body { background:#fff; color:#1d1d1f; }
section { padding:76px 28px; }
.inner { max-width:1120px; }
h1,h2,.toolpage h3 { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",sans-serif; letter-spacing:-.025em; }
.hero { min-height:0; padding-block:76px 38px; }
.hero .tagline { font-size:17px; letter-spacing:0; line-height:1.9; }
.tool-section-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; max-width:1120px; margin:0 auto; padding:20px 24px 48px; }
.tool-section-nav a { padding:10px 17px; border:1px solid #e6e8ec; border-radius:30px; font-size:14px; text-decoration:none; color:#354154; background:#fff; transition:border-color .15s,background .15s; }
.tool-section-nav a:hover { border-color:#8899b3; background:#f6f8fc; }
.tool-section-nav a:focus-visible { outline:3px solid #517bb7; outline-offset:3px; }
section[id$="-group"] { scroll-margin-top:30px; }
section[id$="-group"]:nth-of-type(even) { background:#f7f8fa; }
section[id$="-group"] .inner { gap:24px; }
section[id$="-group"] .eyebrow { color:#66778d; opacity:1; font-size:13px; letter-spacing:.13em; }
section[id$="-group"] h2 { font-size:clamp(25px,3.2vw,36px); margin-bottom:20px; }
.toolpage { padding:42px 0 38px; border-top:1px solid #e1e5e9; scroll-margin-top:30px; }
.toolpage:first-of-type { border-top:0; }
.tphead { align-items:center; gap:15px; margin-bottom:28px; }
.toolpage h3 { font-size:clamp(23px,2.6vw,30px); line-height:1.5; font-weight:650; }
.toolpage .tpone { max-width:64em; color:#5f6b7b; font-size:16px; line-height:1.85; margin-top:7px; }
.tool-story-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; gap:42px; }
.tool-story-art { margin:0; width:100%; position:sticky; top:40px; mix-blend-mode:multiply; }
.tool-story-art img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.tool-story-copy { min-width:0; }
.tool-story-copy p { max-width:unset; font-size:16px; line-height:1.95; margin:0 0 18px; }
.tool-story-copy p:last-child { margin-bottom:0; }
.toolpage--reverse .tool-story-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.toolpage--reverse .tool-story-art { grid-column:2; grid-row:1; }
.toolpage--reverse .tool-story-copy { grid-column:1; grid-row:1; }
@media(max-width:760px) {
 section { padding:54px 22px; }
 .hero { padding-block:52px 28px; }
 .hero .tagline { font-size:16px; }
 .tool-section-nav { gap:8px; padding:12px 18px 28px; }
 .tool-section-nav a { padding:8px 12px; font-size:13px; }
 section[id$="-group"] .inner { gap:16px; }
 .toolpage { padding:28px 0 30px; }
 .tphead { align-items:flex-start; gap:12px; margin-bottom:16px; }
 .toolpage .tpone { font-size:15px; }
 .tool-story-layout,.toolpage--reverse .tool-story-layout { display:flex; flex-direction:column; gap:18px; }
 .tool-story-art { position:static; max-width:560px; margin:0 auto; }
 .tool-story-copy p { font-size:16px; line-height:1.95; margin-bottom:16px; }
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Let the bottle-filling and explosion read as one complete story. */
#release .tool-story-layout { display:flex; flex-direction:column; gap:26px; }
#release .tool-story-art { position:static; max-width:880px; margin:0 auto; }
#release .tool-story-copy { width:100%; max-width:760px; margin:0 auto; }