/* Colonoscopy First page styles for pages built in the 2026 design system.
   Load after cf-shell.css. Layout idea: a magazine feature in spreads. Wide column for the
   argument, narrow margin column for fine print. Display serif for the claim, sans for the proof. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--cf-paper);color:var(--cf-ink);font-family:var(--cf-sans);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--cf-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--cf-green)}
:focus-visible{outline:2px solid var(--cf-green);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layout */
.wrap{max-width:var(--cf-wrap);margin-inline:auto;padding-left:max(var(--cf-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--cf-gutter),env(safe-area-inset-right,0px));box-sizing:content-box}
.band{padding-block:clamp(56px,9vw,120px);border-top:1px solid var(--cf-line)}
.band--stone{background:var(--cf-stone)}
.band--tight{padding-block:clamp(40px,6vw,72px)}
.spread{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,7vw,88px);align-items:start}
.spread>*{min-width:0}
.spread--form{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.spread--list{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}

/* Type */
.serif{font-family:var(--cf-serif);font-weight:400}
h1,h2,h3{font-family:var(--cf-serif);font-weight:400;margin:0;text-wrap:balance}
h1 em,h2 em,h3 em,.serif em{font-style:italic;color:var(--cf-green)}
.h1{font-size:clamp(48px,7.4vw,104px);line-height:.98;letter-spacing:-.018em}
.h2{font-size:clamp(38px,4.7vw,64px);line-height:1.03;letter-spacing:-.012em}
.h3{font-size:clamp(30px,3.3vw,44px);line-height:1.08;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(20px,1.75vw,23px);line-height:1.5;color:var(--cf-muted);max-width:34em}
.copy{max-width:33em}
.copy+.copy{margin-top:18px}
.muted{color:var(--cf-muted)}
.small{font-size:16.5px;line-height:1.55}
.kicker{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;font-size:16.5px;font-weight:700;letter-spacing:.02em;color:var(--cf-green)}
.kicker .n{font-family:var(--cf-serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:0}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline}
.more{font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px}
.section-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:17px}

/* Fine print column */
.notes{border-top:2px solid var(--cf-ink);padding-top:18px;font-size:16px;line-height:1.55;color:var(--cf-muted)}
.notes h2,.notes h3,.notes h4{font-family:var(--cf-sans);font-size:15.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;color:var(--cf-ink);margin:0 0 14px;text-wrap:initial}
.notes p+p{margin-top:12px}
.notes sup{color:var(--cf-green);font-weight:700;margin-right:6px;font-size:.85em}
sup.fn{color:var(--cf-green);font-weight:700;font-size:.6em;margin-left:2px}

/* The navy box for limits and plain statements */
.limits{background:var(--cf-ink);color:var(--cf-on-ink);padding:28px 30px 26px}
.limits h2,.limits h3{font-family:var(--cf-sans);font-size:15.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;color:var(--cf-mint);margin:0 0 14px;text-wrap:initial}
.limits p{font-size:17px;line-height:1.55}
.limits p+p{margin-top:12px}
.limits .source{font-size:15px;line-height:1.5;color:var(--cf-on-ink-muted)}
.limits a{color:var(--cf-on-ink-muted)}
.limits a:hover{color:var(--cf-mint)}

/* The 43 / 57 figure */
.figure-4357{display:flex;gap:clamp(24px,4vw,44px);align-items:center;flex-wrap:wrap;margin-top:30px}
.sq{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;width:min(350px,100%);flex:none}
.sq i{display:block;aspect-ratio:1;border:1.5px solid var(--cf-outline)}
.sq i.f{background:var(--cf-ink);border-color:var(--cf-ink)}
.sq.is-pending i.f{background:transparent;border-color:var(--cf-outline)}
.sq.is-running i.f{animation:sq-fill .18s ease-out both;animation-delay:calc(var(--i) * 26ms)}
@keyframes sq-fill{from{background:transparent;border-color:var(--cf-outline)}to{background:var(--cf-ink);border-color:var(--cf-ink)}}
.legend{display:flex;flex-direction:column;gap:24px;margin:0}
.legend div{display:grid;grid-template-columns:24px auto;column-gap:16px;align-items:center}
.legend .key{width:24px;height:24px;background:var(--cf-ink)}
.legend .key--empty{background:transparent;border:1.5px solid var(--cf-outline)}
.legend dt{font-family:var(--cf-serif);font-size:clamp(60px,6vw,76px);line-height:.9;grid-column:2}
.legend dd{margin:0;grid-column:2;font-size:17px;color:var(--cf-muted)}
.legend .missed dt{color:var(--cf-green)}
.legend .key{grid-row:1 / span 2}
@media (max-width:420px){.legend dt{font-size:56px}}

/* Comparison and data tables */
.cmp-wrap{margin-top:40px;border-top:2px solid var(--cf-ink);background:var(--cf-paper)}
.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--cf-line);font-size:17px;line-height:1.45}
.cmp thead th{font-size:16.5px;font-weight:700;color:var(--cf-muted);vertical-align:bottom}
.cmp thead th.is-first{color:var(--cf-ink)}
.cmp tbody th{font-weight:700;width:23%}
.cmp td{width:25.6%}
.cmp td.is-first{background:rgba(172,218,206,.2)}
.cmp strong{color:var(--cf-green)}
.cmp-source{margin-top:14px;font-size:16px;line-height:1.55;color:var(--cf-muted);max-width:60em}
@media (max-width:900px){
  /* The comparison becomes one card per question, three labelled answers each */
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tr{padding:18px 16px 8px;border-bottom:1px solid var(--cf-line)}
  .cmp tbody th{padding:0 0 10px;border:0;font-family:var(--cf-serif);font-weight:400;font-size:24px;line-height:1.15;width:auto}
  .cmp td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 0;border:0;border-top:1px solid var(--cf-line);font-size:17px;width:auto}
  .cmp td::before{content:attr(data-label);font-size:15.5px;font-weight:700;color:var(--cf-muted);line-height:1.6}
  .cmp td.is-first{background:transparent}
  .cmp td.is-first::before{color:var(--cf-ink)}
  .cmp.cmp--two tbody th,.cmp.cmp--two td,.cmp.cmp--data tbody th,.cmp.cmp--data td{width:auto}
}

/* Lightbox */
.lightbox{width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;background:var(--cf-paper);color:var(--cf-ink);overflow:hidden}
.lightbox::backdrop{background:rgba(16,44,68,.82)}
.lightbox-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;max-height:calc(100dvh - 32px)}
.lightbox-media{background:var(--cf-ink);display:flex;align-items:center;justify-content:center;min-height:240px}
.lightbox-media img,.lightbox-media video{display:block;max-width:100%;max-height:calc(100dvh - 32px);width:auto;height:auto}
.lightbox-side{display:flex;flex-direction:column;gap:14px;padding:28px 26px 24px;overflow-y:auto}
.lightbox-side h2{font-size:30px;line-height:1.1}
.lightbox-side p{font-size:16.5px;line-height:1.55;color:var(--cf-muted)}
.lightbox-count{font-size:15.5px;color:var(--cf-muted);font-variant-numeric:tabular-nums}
.lightbox-nav{display:flex;gap:10px;margin-top:auto;padding-top:10px}
.lightbox-nav button,.lightbox-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--cf-ink);background:transparent;color:var(--cf-ink);font:inherit;font-size:16.5px;font-weight:700;cursor:pointer}
.lightbox-nav button:hover,.lightbox-close:hover{border-color:var(--cf-green);color:var(--cf-green)}
.lightbox-close{align-self:flex-end;margin:-8px -6px 0 0}

@media (max-width:900px){
  body{font-size:18px}
  .spread,.spread--form,.spread--list{grid-template-columns:minmax(0,1fr)}
  .lightbox-inner{grid-template-columns:minmax(0,1fr);overflow-y:auto}
  .lightbox-close{position:absolute;top:10px;right:10px;z-index:2;margin:0;background:var(--cf-paper)}
  .lightbox-media img,.lightbox-media video{max-height:62dvh}
  .lightbox-side{padding:18px 20px 20px;overflow:visible}
  .lightbox-side h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}
@media print{
  .band{padding-block:28px}
}