/* Homepage sections. Depends on cf.css. */

/* Opening spread */
.hero{padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px)}
.hero .spread{align-items:end;margin-top:clamp(24px,3vw,36px)}
.hero .h1{max-width:11.6em}
.hero .h1 span,.hero .h1 em{display:block}
.hero .cf-btn-row{margin-top:clamp(26px,3vw,36px)}
.byline{margin-top:28px;display:flex;align-items:center;gap:14px;max-width:34em;font-size:16px;line-height:1.5;color:var(--cf-muted)}
.byline-portrait{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--cf-stone);filter:saturate(.85)}
.byline span{min-width:0}
.polyp{max-width:260px;margin-left:auto}
.polyp-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--cf-ink);margin-bottom:18px}
.polyp p{border-top:1px solid var(--cf-ink);padding-top:14px;font-size:17px;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:clamp(48px,7vw,88px) 0 0;padding:0;border-top:1px solid var(--cf-ink)}
.steps a{display:block;padding:18px 24px 6px 0;text-decoration:none;font-size:17px;line-height:1.35}
.steps a:hover{text-decoration:underline}
.steps .n{display:block;font-family:var(--cf-serif);font-size:34px;line-height:1.1;color:var(--cf-green);margin-bottom:6px}

.why-second{margin-top:clamp(64px,8vw,104px)}
.why-second .copy{margin-top:20px}

/* Polyp-to-cancer diagram */
.growth{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:600px;margin-top:38px}
.growth-window{grid-column:1 / span 2;margin:0 12%;text-align:center}
.growth-window span{display:block;padding-bottom:8px;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--cf-green)}
.growth-window i{display:block;height:12px;border:1.5px solid var(--cf-green);border-bottom:0}
.growth-cell{grid-row:2;text-align:center;font-size:16.5px;line-height:1.35}
.growth-shape{position:relative;height:74px;border-bottom:1.5px solid var(--cf-ink);margin-bottom:10px}
.growth-shape i{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);display:block;background:var(--cf-mint);border:1.5px solid var(--cf-ink)}
.growth-shape .p1{width:16px;height:9px;border-radius:16px 16px 0 0}
.growth-shape .p2{width:42px;height:26px;border-radius:26px 26px 4px 4px}
.growth-shape .p3{width:92px;height:54px;background:var(--cf-ink);border-radius:46% 54% 8% 10% / 68% 60% 12% 10%}
.growth-note{margin-top:16px;max-width:600px;font-size:17px;font-weight:700;color:var(--cf-green)}

/* Note from the doctor */
.note .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.note-portrait{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--cf-stone)}
.note-body{max-width:760px}
.note blockquote{margin:0;font-family:var(--cf-serif);font-size:clamp(25px,2.7vw,34px);line-height:1.3;text-indent:-.42em}
.note-body>p{margin-top:22px;max-width:36em}
.note .sig{margin-top:26px;font-weight:700}
.note .sig+p{margin-top:6px;font-size:17px;line-height:1.55;color:var(--cf-muted)}
.draft-flag{display:inline-block;margin-top:14px;padding:6px 12px;border:1.5px dashed var(--cf-green);font-size:15.5px;line-height:1.4;color:var(--cf-green)}

/* 3. Questions */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,72px);margin-top:40px;border-top:1px solid var(--cf-ink)}
.qa-item{padding:26px 0 24px;border-bottom:1px solid var(--cf-line)}
.qa-item h3{font-size:clamp(24px,2.2vw,28px);line-height:1.15;margin-bottom:8px}
.qa-item p{font-size:17px;line-height:1.5;color:var(--cf-muted)}
.qa-item a{display:inline-block;margin-top:10px;padding:4px 0;font-size:16.5px;font-weight:700}

/* 4. Am I due? */
.due-form{background:var(--cf-paper);border:1px solid var(--cf-line);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:18px}
.due-form h3{font-size:30px;line-height:1.1}
.due-form label,.due-form legend{font-size:17px;line-height:1.45}
.due-form .field>label,.due-form legend{display:block;font-weight:700;margin-bottom:8px;padding:0}
.due-form fieldset{border:0;margin:0;padding:0;min-width:0}
.due-form input[type=number]{display:block;width:100%;max-width:160px;padding:12px 14px;border:1px solid var(--cf-field-line);border-radius:4px;background:var(--cf-field);color:var(--cf-ink);font:inherit}
.due-form .opt{display:flex;gap:10px;align-items:flex-start;min-height:36px;padding:5px 0}
.due-form .opt input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--cf-ink)}
.due-form .cf-btn{align-self:flex-start}
.due-form .privacy{font-size:15.5px;color:var(--cf-muted)}
.due-error{font-size:16.5px;font-weight:700;color:#8a2d1c}
.due-result{border-top:2px solid var(--cf-ink);padding-top:18px;display:grid;gap:12px}
.due-result h4{font-family:var(--cf-serif);font-weight:400;font-size:28px;line-height:1.15;margin:0}
.due-result p{font-size:17px;line-height:1.55}
.due-result .cf-btn-row{margin-top:6px}
.due-result .fine{font-size:15.5px;color:var(--cf-muted)}

/* Evidence */
.ev-list{border-top:2px solid var(--cf-ink);list-style:none;margin:0;padding:0}
.ev-list a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--cf-line);text-decoration:none}
.ev-list a:hover strong{text-decoration:underline}
.ev-list strong{display:block;font-size:19px;line-height:1.35}
.ev-list .s{display:block;font-size:16.5px;line-height:1.45;color:var(--cf-muted)}
.chip{flex:none;font-size:14.5px;font-weight:700;line-height:1.2;padding:7px 12px;border-radius:999px;white-space:nowrap}
.chip--for{background:var(--cf-chip-for);color:var(--cf-chip-for-ink)}
.chip--about{background:var(--cf-chip-about);color:var(--cf-chip-about-ink)}
.chip--against{background:var(--cf-chip-against);color:var(--cf-chip-against-ink)}
.library{margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:1px solid var(--cf-ink)}
.library h3{font-family:var(--cf-sans);font-size:16.5px;font-weight:700;letter-spacing:.02em;color:var(--cf-green);margin:0 0 6px;text-wrap:initial}
.library ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.library a{display:block;padding:16px 0;border-bottom:1px solid var(--cf-line);text-decoration:none;font-family:var(--cf-serif);font-size:24px;line-height:1.2}
.library a span{display:block;font-family:var(--cf-sans);font-size:16.5px;line-height:1.45;color:var(--cf-muted);margin-top:4px}
.library a:hover{color:var(--cf-green)}

/* Gallery */
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.gallery-head .kicker{margin-bottom:18px}
.films-row{display:flex;gap:clamp(28px,5vw,56px);align-items:flex-start;flex-wrap:wrap;margin-bottom:clamp(44px,5vw,64px)}
.films{display:grid;grid-template-columns:repeat(3,170px);gap:20px;list-style:none;margin:0;padding:0}
.film{position:relative;display:block;text-decoration:none;font-size:16px;line-height:1.35}
.film img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;margin-bottom:10px;background:var(--cf-ink)}
.film .play{position:absolute;left:10px;top:10px;width:40px;height:40px;border-radius:50%;background:var(--cf-paper);display:flex;align-items:center;justify-content:center}
.film strong{display:block}
.films-blurb{flex:1;min-width:260px;max-width:440px}
.films-blurb .serif{font-size:clamp(26px,2.4vw,30px);line-height:1.2;margin-bottom:14px}
.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 20px;list-style:none;margin:0;padding:0}
.wall a{display:block;text-decoration:none;font-size:16px;line-height:1.35}
.wall img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--cf-line);margin-bottom:10px;background:var(--cf-paper);transition:transform .2s ease}
.wall a:hover img,.film:hover img{transform:translateY(-3px)}
.film img{transition:transform .2s ease}

@media (max-width:900px){
  .polyp{margin:6px 0 0;max-width:300px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps a{padding:14px 16px 10px 0}
  .sq{width:min(350px,100%)}
  .note .wrap{grid-template-columns:minmax(0,1fr)}
  .note-portrait{width:180px}
  .qa{grid-template-columns:minmax(0,1fr)}
  .library ul{grid-template-columns:minmax(0,1fr)}
  .films{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
  .ev-list a{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:420px){
  .growth-shape .p3{width:72px;height:44px}
}

/* Polyp-growth diagram: plays once when first seen. The polyp grows from small to cancer
   over three stages, then the colonoscopy window marks the two stages where it can be removed. */
.growth.is-pending .growth-shape i{transform:translateX(-50%) scale(0)}
.growth.is-pending .growth-window{opacity:0}
.growth.is-running .growth-shape i{transform-origin:50% 100%;animation:polyp-grow .7s cubic-bezier(.2,.7,.3,1) both}
.growth.is-running .growth-shape .p1{animation-delay:.15s}
.growth.is-running .growth-shape .p2{animation-delay:.95s}
.growth.is-running .growth-shape .p3{animation-delay:1.75s;animation-duration:.85s}
.growth.is-running .growth-window{animation:window-in .6s ease-out 2.8s both}
.growth.is-running .growth-shape .p1,.growth.is-running .growth-shape .p2{animation-name:polyp-grow,polyp-found;animation-duration:.7s,1.1s;animation-delay:var(--d),calc(3.3s + var(--k))}
.growth.is-running .growth-shape .p1{--d:.15s;--k:0s}
.growth.is-running .growth-shape .p2{--d:.95s;--k:.15s}
@keyframes polyp-grow{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}
@keyframes window-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes polyp-found{0%{box-shadow:0 0 0 0 rgba(56,101,87,0)}35%{box-shadow:0 0 0 7px rgba(56,101,87,.28)}100%{box-shadow:0 0 0 14px rgba(56,101,87,0)}}

/* "Am I due?" result: keep the next step */
.due-keep{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--cf-line)}
.due-keep p{font-size:16px;font-weight:700;color:var(--cf-ink)}

/* Section rhythm (Nov 13): the doctor's note on navy and "Am I due?" on mint give the page two clear high points. */
.band{border-top:0}
#note{background:var(--cf-ink);color:var(--cf-on-ink)}
#note .kicker{color:var(--cf-mint)}
#note .note-body>p,#note .sig+p{color:var(--cf-on-ink-muted)}
#note .sig{color:var(--cf-on-ink)}
#note a{color:var(--cf-mint)}
#note a:focus-visible{outline-color:var(--cf-mint)}
#plan{background:#d9e9e1}