/* /checklist: its own sheet, loaded after site.css.
   The checklist is two things at once. On paper it is a cover and eight
   Letter sheets a patient prints and takes to a clinic (the PRINT block at
   the foot of this file, which is the product). On a screen it is one page
   with 28 items to mark Yes, Somewhat or No.
   One picture runs through it: the sheet of 28 boxes on the cover. Every
   mark the reader makes shows up there, in the row for its part, and again
   in the strip under "How to read your answers".
   Script: scripts/checklist.js. With that script absent every part is
   visible, every item still takes a mark, and every link still jumps. */

html:has(body.ck) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.ck {
  --ck-ease: cubic-bezier(.16, 1, .3, 1);
  --ck-gut: clamp(20px, 4vw, 56px);
  --ck-pad: clamp(52px, 6vw, 88px);
}
.ck main { overflow-x: clip; }

/* ============ GROUND RULES ============ */
.ck-wrap { max-width: calc(1240px + 2 * var(--ck-gut)); margin-inline: auto; padding-inline: var(--ck-gut); }
/* text fills its column; the column sets the measure */
.ck main p { max-width: none; margin: 0; text-wrap: wrap; }
.ck main a:not(.btn) { border-bottom: 0; }
.ck main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.ck main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.08; letter-spacing: -.012em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.ck main h2 > .h-lead, .ck main h2 > em { display: inline-block; }
.ck main :is(h3, h4) { margin: 0; max-width: none; }
.ck-h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.ck main strong { font-weight: 600; color: var(--ink); }
.ck-lede { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); }
.ck-paper, .ck-paper img { display: none; }   /* the sheets' own furniture: paper only */
.ck-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ck main :is(a, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.ck :is(.ck-miq, .ck-next) :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.ck main :is(h1, h2, h3, section, li)[tabindex="-1"]:focus { outline: none; }

/* the small drawings share one pen */
.ck-ic { display: block; flex: none; color: var(--ink); }
.ck-ic :is(path, circle, rect), .ck-sheet :is(path, rect) {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* the onward link: the arrow leans the way it points */
.ck-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.ck-go span { display: inline-block; transition: transform 360ms var(--ck-ease); }
.ck-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.ck-go:hover span { transform: translateX(6px); }
.ck-go--back:hover span { transform: translateX(-6px); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (ck-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.ck-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--ck-ease); transition-delay: calc(var(--n, 0) * 70ms); }
.ck-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.ck-js [data-r="left"]:not(.is-in) { transform: translateX(-28px); }
.ck-js [data-r="right"]:not(.is-in) { transform: translateX(28px); }
.ck-js [data-r="item"]:not(.is-in) { transform: translateY(12px); }
/* these stay put; what is inside them moves */
.ck-js :is([data-r="key"], [data-r="note"], [data-r="miq"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ COVER ============ */
.ck-hero { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.ck-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.15rem, 4.1vw, 3.5rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(24px, 3.4vw, 48px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.ck-hero__h1 > .h-lead, .ck-hero__h1 > em { display: inline-block; }
.ck-hero__h1 > em, .ck-answers h2 > em { color: var(--accent-blue); }
.ck-hero__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ck-hero__answer { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.6; color: var(--ink); }
.ck-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.ck-hero__resume { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--border-strong); font-size: 16px; font-weight: 600; color: var(--ink); }
.ck-hero__resume[hidden] { display: none; }
.ck-hero__private { margin-top: 14px !important; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.ck-print { min-height: 48px; }
.ck-print__ic { flex: none; }
.ck-print__ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the sheet comes out of the printer */
.ck-print__sheet { transition: transform 360ms var(--ck-ease); }
.ck-print:hover .ck-print__sheet { transform: translateY(2.5px); }
.ck-print:active { transform: scale(.98); }
/* the button prints: with no script it has nothing to do */
html:not(.ck-js) .ck-print { display: none; }

/* the sheet of 28 boxes: five rows, one for each part */
.ck-hero__fig { margin: -8px 0 0; justify-self: end; width: min(100%, 400px); }
.ck-sheet { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.ck-sheet .ck-sheet__paper { fill: #fff; stroke-width: 1.7; }
.ck-sheet .ck-sheet__title { stroke-width: 5; stroke: var(--ink); }
.ck-sheet .ck-sheet__name { stroke-width: 4; stroke: var(--border-strong); transition: stroke 260ms; }
.ck-sheet__box rect { fill: #fff; stroke: var(--ink-muted); transition: fill 240ms, stroke 240ms; }
.ck-sheet__box :is(.ck-sheet__tick, .ck-sheet__x) { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 360ms var(--ck-ease) 60ms; }
.ck-sheet__box .ck-sheet__half { fill: var(--ink-soft); stroke: none; opacity: 0; transition: opacity 240ms; }
.ck-sheet__box[data-a="yes"] rect { fill: var(--accent-blue); stroke: var(--accent-blue); }
.ck-sheet__box[data-a="yes"] .ck-sheet__tick { stroke-dashoffset: 0; }
.ck-sheet__box[data-a="some"] rect { stroke: var(--ink-soft); }
.ck-sheet__box[data-a="some"] .ck-sheet__half { opacity: 1; }
.ck-sheet__box[data-a="no"] rect { fill: var(--ink); stroke: var(--ink); }
.ck-sheet__box[data-a="no"] .ck-sheet__x { stroke-dashoffset: 0; }
.ck-sheet__row { transition: opacity 260ms; }
/* the list under the drawing lights the row it is about */
.ck-sheet[data-lit] .ck-sheet__row { opacity: .3; }
.ck-sheet[data-lit="before"] [data-row="before"], .ck-sheet[data-lit="credibility"] [data-row="credibility"], .ck-sheet[data-lit="consultation"] [data-row="consultation"], .ck-sheet[data-lit="treatment"] [data-row="treatment"], .ck-sheet[data-lit="safety"] [data-row="safety"], .ck-sheet[data-lit="answers"] .ck-sheet__row { opacity: 1; }
.ck-sheet[data-lit] .ck-sheet__row .ck-sheet__name { stroke: var(--ink-muted); }
@keyframes ck-settle { 40% { transform: translateY(-4px); } }
.ck-sheet.is-full { animation: ck-settle 700ms var(--ck-ease); }

.ck-toc { margin-top: clamp(32px, 4.5vw, 60px); }
.ck-toc ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); }
.ck main .ck-toc a { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-block: 14px; border-top: 1px solid var(--border-strong); font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ink); text-decoration: none; transition: color 200ms, border-color 260ms; }
.ck-toc a > span { margin-right: auto; }
.ck-toc small { font-size: 15px; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-toc a::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--accent-blue); border-bottom: 1.5px solid var(--accent-blue); transform: translateY(-3px) rotate(45deg); transition: transform 360ms var(--ck-ease); }
.ck main .ck-toc a:hover { color: var(--accent-blue-hover); border-top-color: var(--accent-blue); }
.ck-toc a:hover::after { transform: translateY(3px) rotate(45deg); }

/* first paint: the heading rises, the sheet is laid down, its boxes are
   ruled in one by one, row by row */
@keyframes ck-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes ck-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ck-lay { from { opacity: 0; transform: translateY(26px) rotate(-2.5deg); } }
@keyframes ck-box { from { opacity: 0; transform: scale(.4); } }
@keyframes ck-rule { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ck-js .ck-hero__h1 > * { animation: ck-up 900ms var(--ck-ease) both; }
.ck-js .ck-hero__h1 > em { animation-delay: 110ms; }
.ck-js .ck-hero__text > * { animation: ck-up 900ms var(--ck-ease) 240ms both; }
.ck-js .ck-hero__text > .ck-hero__actions { animation-delay: 340ms; }
.ck-js .ck-sheet { animation: ck-lay 1000ms var(--ck-ease) 200ms both; transform-origin: 50% 100%; }
.ck-js .ck-sheet.is-full { animation: ck-settle 700ms var(--ck-ease); }
.ck-js .ck-sheet__box { transform-box: fill-box; transform-origin: center; animation: ck-box 420ms var(--ck-ease) calc(620ms + var(--i) * 38ms) both; }
.ck-js .ck-sheet__name { stroke-dasharray: 1; animation: ck-rule 700ms var(--ck-ease) 700ms both; }
.ck-sheet__name { stroke-dasharray: none; }
.ck-js .ck-toc li { animation: ck-rise 700ms var(--ck-ease) calc(520ms + var(--n, 0) * 70ms) both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.ck .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  display: flex; align-items: stretch;
  padding-inline: max(var(--ck-gut), calc((100% - 1240px) / 2));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--ck-ease), visibility 0s 360ms;
}
.ck .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--ck-ease); }
body.ck.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.ck .hc-bar__track {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.ck .hc-bar__track::-webkit-scrollbar { display: none; }
.ck .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.ck .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--ck-ease);
}
.ck .hc-bar__track a:hover, .ck .hc-bar__track a[aria-current] { color: var(--ink); }
.ck .hc-bar__track a:hover::after { transform: scaleX(.35); }
.ck .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.ck .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
/* how far along the 28 the reader is; it stays in view while the track scrolls */
.ck .hc-bar__count { position: relative; flex: none; display: flex; align-items: center; padding-left: 18px; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck .hc-bar__count[hidden] { display: none; }
@keyframes ck-tick { 40% { transform: translateY(-3px); } }
.ck .hc-bar__count.is-bump { animation: ck-tick 420ms var(--ck-ease); }
.ck .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}
/* the track runs off a phone's edge: a fade says there is more */
.ck .hc-bar__count::before { content: ""; position: absolute; top: 0; right: 100%; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%); pointer-events: none; opacity: 0; transition: opacity 200ms; }
.ck .hc-bar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%); pointer-events: none; opacity: 0; transition: opacity 200ms; }
.ck .hc-bar.has-more:not(.has-count)::after, .ck .hc-bar.has-more .hc-bar__count::before { opacity: 1; }

/* ============ HOW TO USE ============ */
.ck-how { padding-block: var(--ck-pad); border-top: 1px solid var(--border); }
.ck-how__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ck-how__text { display: grid; gap: 20px; }
.ck-how__text > p:not(.ck-lede) { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.ck-bring { padding-top: 8px; }
/* a native fold: its label is the heading, the chevron says which way. Open
   on a wide screen; the script closes it once on a phone. */
.ck-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; transition: color 200ms; }
.ck-fold summary::-webkit-details-marker { display: none; }
.ck-fold summary .ck-h3 { transition: color 200ms; }
.ck-fold summary:hover .ck-h3 { color: var(--accent-blue-hover); }
.ck-fold summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.ck-fold__chev { flex: none; color: var(--ink); transition: transform 360ms var(--ck-ease); }
.ck-fold__chev path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ck-fold summary:hover .ck-fold__chev { transform: translateY(3px); }
.ck-fold[open] .ck-fold__chev, .ck-fold[open] summary:hover .ck-fold__chev { transform: rotate(180deg); }
@keyframes ck-unfold { from { opacity: 0; transform: translateY(-8px); } }
.ck-fold[open] > ul { animation: ck-unfold 420ms var(--ck-ease); }
.ck-fold:not([open]) { border-bottom: 1px solid var(--border-strong); }
.ck-bring li { position: relative; padding: 13px 0 13px 26px; border-top: 1px solid var(--border); font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.ck-bring li:last-child { border-bottom: 1px solid var(--border); }
.ck-bring li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 1.5px; background: var(--accent-blue); }

/* the three marks, drawn the way they appear on every item */
.ck-key__h { margin-top: clamp(40px, 5vw, 68px) !important; margin-bottom: 20px !important; }
.ck-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 56px); }
.ck-key__col { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-content: start; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.ck-key__mark { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; border: 1.5px solid var(--ink-muted); background: #fff; }
.ck-key__mark svg { width: 56px; height: 56px; }
.ck-key__mark path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ck-key__col--yes .ck-key__mark { background: var(--accent-blue); border-color: var(--accent-blue); }
.ck-key__col--some .ck-key__mark { border-color: var(--ink-soft); background: linear-gradient(135deg, #fff 0 50%, var(--ink-soft) 50% 100%); }
.ck-key__col--no .ck-key__mark { background: var(--ink); border-color: var(--ink); }
.ck-key__name { font-size: 16px; font-weight: 600; color: var(--ink); }
.ck-key h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.2; color: var(--ink); margin-top: 2px; }
.ck-key__col > p:last-child { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
/* the three are marked in turn as the key comes into view */
@keyframes ck-stamp { from { opacity: 0; transform: scale(.6); } }
.ck-js .ck-key:not(.is-in) .ck-key__mark { opacity: 0; }
.ck-js .ck-key.is-in .ck-key__mark { animation: ck-stamp 520ms var(--ck-ease) calc(120ms + var(--n, 0) * 220ms) both; }
.ck-js .ck-key.is-in .ck-key__mark path { animation: ck-rule 420ms var(--ck-ease) calc(420ms + var(--n, 0) * 220ms) both; }
.ck-key__col:nth-child(2) { --n: 1; }
.ck-key__col:nth-child(3) { --n: 2; }

/* ============ THE FIVE PARTS ============ */
.ck-part { padding-block: var(--ck-pad); border-top: 1px solid var(--border); }
.ck-part--safety { padding-bottom: 0; }
.ck-part__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ck-part__aside { display: grid; gap: 14px; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.ck-part__aside .ck-ic { margin-bottom: 6px; }
.ck main .ck-part h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.ck-part__ask { font-family: var(--font-display); font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--ink-soft); }
.ck-part__ask em { color: var(--accent-blue-hover); }
.ck-part__sub { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.ck-part__count { display: flex; align-items: center; gap: 14px; margin-top: 6px !important; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-part__count[hidden] { display: none; }
.ck-minis { display: inline-flex; gap: 5px; }
/* a part with every item marked gets one drawn tick */
.ck-part__tick { flex: none; margin-left: -4px; opacity: 0; transition: opacity 240ms; }
.ck-part__tick circle { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.ck-part__tick path { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ck-ease) 120ms; }
.ck-part__count.is-all .ck-part__tick { opacity: 1; }
.ck-part__count.is-all .ck-part__tick path { stroke-dashoffset: 0; }
.ck-minis i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink-muted); background: #fff; transition: background 240ms, border-color 240ms, transform 320ms var(--ck-ease); }
.ck-minis i[data-a] { transform: scale(1.08); }
.ck-minis i[data-a="yes"] { background: var(--accent-blue); border-color: var(--accent-blue); }
.ck-minis i[data-a="some"] { border-color: var(--ink-soft); background: linear-gradient(135deg, #fff 0 50%, var(--ink-soft) 50% 100%); }
.ck-minis i[data-a="no"] { background: var(--ink); border-color: var(--ink); }

/* each part's drawing does one small thing as it arrives */
.ck-ic--site .ck-ic__dot { fill: currentColor; stroke: none; }
.ck-ic--site .ck-ic__line { stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 1; }
.ck-ic--badge .ck-ic__seal-bg { fill: var(--accent-blue); stroke: #fff; stroke-width: 2.5; }
.ck-ic--badge .ck-ic__tick { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 1; }
.ck-ic--talk .ck-ic__answer path:first-child { fill: var(--accent-wash); }
.ck-ic--talk .ck-ic__answer-line { stroke: var(--accent-blue); stroke-width: 2; }
.ck-ic--plan .ck-ic__lens-glass { fill: #fff; stroke: var(--accent-blue); stroke-width: 2; }
.ck-ic--plan .ck-ic__lens-handle { stroke: var(--accent-blue); stroke-width: 3; }
.ck-ic--hosp .ck-ic__cross { stroke: var(--accent-blue); stroke-width: 2.6; stroke-dasharray: 1; }
@keyframes ck-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ck-reply { from { opacity: 0; transform: translate(-8px, -8px); } }
@keyframes ck-sweep { from { transform: translate(-22px, -20px); } }
.ck-ic :is(.ck-ic__seal, .ck-ic__answer, .ck-ic__lens) { transform-box: fill-box; transform-origin: center; }
.ck-js .ck-part__aside:not(.is-in) :is(.ck-ic__line, .ck-ic__tick, .ck-ic__cross) { stroke-dashoffset: 1; }
.ck-js .ck-part__aside:not(.is-in) :is(.ck-ic__seal, .ck-ic__answer) { opacity: 0; }
.ck-js .ck-part__aside.is-in .ck-ic__line { animation: ck-rule 600ms var(--ck-ease) 300ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__line:nth-of-type(3) { animation-delay: 460ms; }
.ck-js .ck-part__aside.is-in .ck-ic__line:nth-of-type(4) { animation-delay: 620ms; }
.ck-js .ck-part__aside.is-in .ck-ic__seal { animation: ck-pop 520ms var(--ck-ease) 420ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__tick { animation: ck-rule 420ms var(--ck-ease) 760ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__answer { animation: ck-reply 620ms var(--ck-ease) 520ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__lens { animation: ck-sweep 1100ms var(--ck-ease) 300ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__cross { animation: ck-rule 480ms var(--ck-ease) 420ms both; }
.ck-js .ck-part__aside.is-in .ck-ic__cross + .ck-ic__cross { animation-delay: 640ms; }

/* an item: its number, what to look for, and the three marks */
.ck-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: clamp(14px, 2vw, 24px); align-items: center; padding-block: 20px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.ck-list > .ck-item:last-child { border-bottom: 1px solid var(--border); }
.ck-item__n { align-self: start; padding-top: 3px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; transition: color 240ms; }
.ck-item.is-marked .ck-item__n { color: var(--ink); }
.ck-item__title { font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ink); text-wrap: wrap; }
.ck-item__sub { margin-top: 5px !important; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.ck-item:target .ck-item__title, .ck-item.is-here .ck-item__title { text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ck-marks { display: flex; gap: 8px; }
.ck-mark { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 11px; border: 1.5px solid var(--border-strong); border-radius: 6px; background: #fff; font-size: 15px; font-weight: 500; color: var(--ink-soft); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color 200ms, color 200ms, background 200ms, transform 260ms var(--ck-ease); }
.ck-mark input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ck-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink-muted); border-radius: 4px; background: #fff; transition: background 220ms, border-color 220ms, transform 320ms var(--ck-ease); }
.ck-box svg { width: 16px; height: 16px; }
.ck-box path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--ck-ease) 60ms; }
.ck-box path + path { transition-delay: 160ms; }
.ck-mark:hover { border-color: var(--accent-blue); color: var(--ink); }
.ck-mark:hover .ck-box { transform: scale(1.08); }
.ck-mark:active { transform: scale(.97); }
/* Safari does not always call a radio reached by keyboard focus-visible, so the script says when keys are in use */
.ck-mark:has(input:focus-visible), .ck-keys .ck-mark:has(input:focus) { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.ck-mark:has(input:checked) { border-color: var(--ink); color: var(--ink); font-weight: 600; background: #fff; }
.ck-mark input:checked + .ck-box path { stroke-dashoffset: 0; }
.ck-mark--yes input:checked + .ck-box { background: var(--accent-blue); border-color: var(--accent-blue); }
.ck-mark--some input:checked + .ck-box { border-color: var(--ink-soft); background: linear-gradient(135deg, #fff 0 50%, var(--ink-soft) 50% 100%); }
.ck-mark--no input:checked + .ck-box { background: var(--ink); border-color: var(--ink); }
/* once an item has its mark, the two not chosen step back */
.ck-marks:has(input:checked) .ck-mark:not(:has(input:checked)):not(:hover) { border-color: var(--border); color: var(--ink-muted); }

/* the thought each part closes on */
.ck-note { margin-top: clamp(28px, 3.6vw, 48px); padding-left: clamp(20px, 2.6vw, 32px); border-left: 2px solid var(--accent-blue); display: grid; gap: 10px; }
.ck-note p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.32; color: var(--ink); }
.ck-note p em { color: var(--accent-blue); }
.ck-note .ck-h3 { font-size: 17px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
/* two of them are set as a card rather than a rule, so five parts do not close the same way */
.ck-note--credibility, .ck-note--treatment { padding: clamp(22px, 2.8vw, 36px); border: 1.5px solid var(--ink); border-radius: 6px; }
.ck-js .ck-note:not(.is-in) > * { opacity: 0; transform: translateX(24px); }
.ck-js .ck-note > * { transition: opacity 620ms ease, transform 820ms var(--ck-ease); }
.ck-js .ck-note > p { transition-delay: 120ms; }
.ck-js .ck-note:not(.is-in) { border-left-color: transparent; }
.ck-js .ck-note { transition: border-color 620ms ease; }

/* the question the whole list comes down to: the one navy band inside the list */
.ck-miq { margin-top: var(--ck-pad); background: var(--navy-brand); color: rgba(255, 255, 255, .86); padding-block: clamp(52px, 6.5vw, 96px); }
.ck-miq .ck-wrap { display: grid; gap: 16px; }
.ck-miq .ck-h3 { font-size: 17px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; color: var(--accent-ice); }
.ck-miq__q { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.12; color: #fff; }
.ck-miq__q em { color: var(--accent-ice); }
.ck-miq__sub { font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.6; }
.ck-js .ck-miq:not(.is-in) .ck-wrap > * { opacity: 0; transform: translateY(20px); }
.ck-js .ck-miq .ck-wrap > * { transition: opacity 700ms ease, transform 900ms var(--ck-ease); }
.ck-js .ck-miq .ck-wrap > :nth-child(2) { transition-delay: 120ms; }
.ck-js .ck-miq .ck-wrap > :nth-child(3) { transition-delay: 240ms; }
.ck-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: 17px; font-weight: 600; color: #fff; }
.ck-done[hidden] { display: none; }
.ck-done__ic circle { fill: none; stroke: var(--accent-ice); stroke-width: 1.5; }
.ck-done__ic path { fill: none; stroke: var(--accent-ice); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ck-rule 620ms var(--ck-ease) 200ms both; }
.ck-done .ck-go { color: var(--accent-ice); }
.ck-done .ck-go:hover { color: #fff; }

/* ============ HOW TO READ YOUR ANSWERS ============ */
.ck-answers { padding-block: var(--ck-pad); }
.ck-answers__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 52px); }
/* the reader's own marks: the one tinted block on the page */
.ck-tally { margin-bottom: clamp(36px, 4.5vw, 60px); padding: clamp(22px, 3vw, 40px); background: var(--accent-wash); border-radius: 6px; display: grid; gap: 18px; }
.ck-tally[hidden] { display: none; }
.ck-tally__strip { display: flex; gap: clamp(8px, 1.4vw, 20px); }
.ck-tally__strip span { display: flex; gap: 3px; flex: var(--k) 1 0; }
.ck-tally__strip i { flex: 1 1 0; height: 26px; border-radius: 3px; border: 1.5px solid var(--ink-muted); background: #fff; transition: background 240ms, border-color 240ms; }
.ck-tally__strip i[data-a="yes"] { background: var(--accent-blue); border-color: var(--accent-blue); }
.ck-tally__strip i[data-a="some"] { border-color: var(--ink-soft); background: linear-gradient(135deg, #fff 0 50%, var(--ink-soft) 50% 100%); }
.ck-tally__strip i[data-a="no"] { background: var(--ink); border-color: var(--ink); }
@keyframes ck-grow { from { transform: scaleY(.2); opacity: 0; } }
.ck-tally.is-in .ck-tally__strip i { transform-origin: bottom; animation: ck-grow 420ms var(--ck-ease) calc(var(--i) * 22ms) both; }
.ck main .ck-tally__nums { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 3vw, 40px); }
.ck-tally__nums li { display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--ink-soft); }
.ck-tally__nums b { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.ck-tally__nums .is-yes b { color: var(--accent-blue-hover); }
.ck-open { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-strong); }
.ck-open[hidden] { display: none; }
.ck-open .ck-h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
.ck main .ck-open__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); }
.ck main .ck-open__list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--border-strong); font-size: 16px; line-height: 1.4; color: var(--ink); text-decoration: none; transition: color 200ms, border-color 200ms; }
.ck-open__list a b { font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ck-open__list a i { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.ck main .ck-open__list a:hover { color: var(--accent-blue-hover); border-bottom-color: var(--accent-blue); }
.ck-tally__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 6px; }
.ck-clear { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 600 16px/1 var(--font-body); color: var(--accent-blue-hover); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.ck-clear:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.ck-clear[hidden], .ck-undo[hidden] { display: none; }
.ck-undo { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink-soft); }

.ck main .ck-interp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 6vw, 96px); }
.ck-interp__card { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 32px); row-gap: 10px; align-content: start; padding-block: 26px; border-top: 1.5px solid var(--ink); }
.ck-interp__card > .ck-pat { grid-row: 1 / span 2; }
.ck-interp__card > p { grid-column: 2; }
/* each reading drawn as the sheet would look: 28 boxes, five rows */
.ck-pat { display: block; }
.ck-pat rect { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.2; }
.ck-pat .is-yes rect { fill: var(--accent-blue); stroke: var(--accent-blue); }
.ck-pat .is-some rect { stroke: var(--ink-soft); }
.ck-pat .is-some path { fill: var(--ink-soft); }
.ck-pat .is-no rect { fill: var(--ink); stroke: var(--ink); }
.ck-js [data-r="pat"]:not(.is-in) { opacity: 1; transform: none; }
.ck-js [data-r="pat"]:not(.is-in) > :not(.ck-pat) { opacity: 0; }
.ck-js [data-r="pat"] > :not(.ck-pat) { transition: opacity 620ms ease 200ms; }
.ck-js [data-r="pat"]:not(.is-in) .ck-pat__box { opacity: 0; }
.ck-js [data-r="pat"].is-in .ck-pat__box { transform-box: fill-box; transform-origin: center; animation: ck-box 380ms var(--ck-ease) calc(var(--i) * 26ms) both; }
.ck-interp__card p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.ck-interp__card--stop { border-top-color: var(--accent-blue); }
/* this one is about the reader's own marks once they have a No on safety */
.ck-interp__card--stop.is-yours .ck-h3 { text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ck-note--us { margin-top: clamp(20px, 2.6vw, 36px); }
.ck-note--us p { font-size: clamp(1.25rem, 1.75vw, 1.55rem); }

/* ============ THE NEXT STEP ============ */
.ck-next { background: var(--navy-brand); color: rgba(255, 255, 255, .86); padding-block: var(--ck-pad); }
.ck-next__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px) clamp(36px, 6vw, 96px); align-items: start; }
.ck-next__text { display: grid; gap: 20px; }
.ck main .ck-next h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.ck-next h2 em { color: var(--accent-ice); }
.ck-next__text p { font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.6; }
.ck main .ck-next strong { color: #fff; }
.ck main .ck-way { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 20px; align-items: center; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .86); text-decoration: none; transition: border-color 260ms, color 200ms; }
.ck main .ck-ways li:last-child .ck-way { border-bottom: 1px solid rgba(255, 255, 255, .24); }
.ck-way__body { display: grid; gap: 6px; font-size: 16.5px; line-height: 1.55; }
.ck main .ck-way strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.15; color: #fff; }
.ck main .ck-way--main strong { color: var(--accent-ice); }
.ck-way__url { font-size: 15px; font-weight: 600; color: var(--accent-ice); }
.ck-way__arrow { width: 48px; height: 48px; color: #fff; transition: transform 360ms var(--ck-ease), color 260ms; }
.ck-way__arrow circle { fill: transparent; stroke: rgba(255, 255, 255, .4); stroke-width: 1; transition: fill 260ms, stroke 260ms; }
.ck-way__arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ck main .ck-way:hover { border-top-color: var(--accent-ice); color: #fff; }
.ck-way:hover .ck-way__arrow { transform: translateX(6px); color: var(--ink); }
.ck-way:hover .ck-way__arrow circle { fill: var(--accent-ice); stroke: var(--accent-ice); }
.ck-way:active .ck-way__arrow { transform: translateX(2px) scale(.96); }
.ck-ways li:nth-child(2) { --n: 2; }
.ck main .ck-more { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.ck main .ck-more a { display: grid; gap: 2px; min-height: 44px; padding-block: 12px; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .86); text-decoration: none; transition: color 200ms; }
.ck-more b { font-weight: 600; color: #fff; }
.ck-more__url { color: var(--accent-ice); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 260ms; }
.ck main .ck-more a:hover { color: #fff; }
.ck-more a:hover .ck-more__url { text-decoration-color: currentColor; }

/* ============ NARROWER SCREENS ============ */
@media (max-width: 1000px) {
  .ck-hero__row, .ck-how__row, .ck-part__grid, .ck-next__grid { grid-template-columns: minmax(0, 1fr); }
  .ck-hero__fig { width: min(100%, 360px); justify-self: start; }
  .ck-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck main .ck-more { grid-column: 1; }
  .ck-part__aside { position: static; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .ck-part__aside .ck-ic { grid-row: 1 / span 2; margin: 0; align-self: center; }
  .ck-part__aside > :is(.ck-part__sub, .ck-part__count) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ck-toc ol, .ck-key, .ck main .ck-interp, .ck main .ck-open__list, .ck main .ck-more { grid-template-columns: minmax(0, 1fr); }
  .ck-toc a { min-height: 56px; }
  .ck-hero__actions .btn, .ck-tally__actions .btn { width: 100%; }
  .ck-hero__fig { width: 232px; margin-top: 4px; }
  .ck-interp__card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; padding-block: 20px; }
  .ck-pat { width: 88px; height: auto; }
  .ck-interp__card > .ck-h3 { align-self: center; }
  .ck-interp__card > p { grid-column: 1 / -1; }
  .ck-interp__card > .ck-pat { grid-row: 1; }
  .ck-key { gap: 0; }
  .ck-key__col { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-block: 14px; }
  .ck-key__mark { width: 48px; height: 48px; border-radius: 6px; }
  .ck-key__mark svg { width: 48px; height: 48px; }
  .ck-key__col > p:last-child { margin-top: 4px; font-size: 16px; }
  .ck-how__row { gap: 20px; }
  .ck-part__aside { gap: 10px; }
  /* the three marks go under the item, each a third of the row */
  .ck-item { grid-template-columns: 26px minmax(0, 1fr); row-gap: 12px; padding-block: 16px; }
  .ck-item__sub { margin-top: 3px !important; font-size: 15.5px; line-height: 1.45; }
  .ck-marks { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.25fr 1fr; }
  .ck-mark { justify-content: center; padding-inline: 8px; min-height: 44px; }
  .ck-item__title { font-size: 17px; }
  .ck .hc-bar__count { padding-left: 12px; }
}

/* ============ REDUCED MOTION: every end state, nothing moving ============ */
@media (prefers-reduced-motion: reduce) {
  .ck main *, .ck main *::before, .ck main *::after { animation: none !important; transition: none !important; }
  .ck-js [data-r], .ck-js [data-r] > *, .ck-js .ck-pat__box, .ck-js .ck-note > *, .ck-js .ck-miq .ck-wrap > * { opacity: 1 !important; transform: none !important; }
  .ck-js .ck-key .ck-key__mark, .ck-js .ck-part__aside :is(.ck-ic__seal, .ck-ic__answer) { opacity: 1 !important; }
  .ck-js .ck-part__aside :is(.ck-ic__line, .ck-ic__tick, .ck-ic__cross) { stroke-dashoffset: 0 !important; }
  .ck-js .ck-note { border-left-color: var(--accent-blue); }
  .ck .hc-bar, .ck .hc-bar__count { transition: none; animation: none; }
}

/* ============ PRINT: a cover and eight Letter sheets ============
   This is the checklist a patient takes to a clinic. One part to a sheet,
   each with its own head and foot, dark type on white, nothing left
   mid-motion. A mark made on screen prints in its box; an item left blank
   prints three empty boxes for a pen. */
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  html:has(body.ck) { scroll-padding-top: 0; }
  body.ck > :not(main) { display: none !important; }
  .ck .hc-bar, .ck-hero__actions, .ck-hero__private, .ck-hero__resume, .ck-way__arrow, .ck-part__count, .ck-tally__actions, .ck-open, .ck-done, .ck-hero__fig, .ck-ic { display: none !important; }
  .ck-paper img { display: block; }
  .ck-fold__chev { display: none; }
  .ck-fold summary { min-height: 0; pointer-events: none; }
  /* a fold the script did not get to open still prints its contents */
  .ck-fold::details-content { content-visibility: visible; display: block; }
  .ck-fold:not([open]) { border-bottom: 0; }
  /* paper is taken the instant the dialog opens: nothing may still be fading or sliding in */
  .ck main *, .ck main *::before, .ck main *::after { animation: none !important; transition: none !important; }
  .ck-js [data-r], .ck-js [data-r] > *, .ck-js .ck-pat__box, .ck-js .ck-note > *, .ck-js .ck-miq .ck-wrap > *, .ck-js .ck-key .ck-key__mark { opacity: 1 !important; transform: none !important; }
  .ck-js .ck-note { border-left-color: var(--accent-blue) !important; }
  .ck * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* the sheet */
  .ck main { overflow: visible; font-size: 12.5px; }
  .ck-hero, .ck-sheetp {
    box-sizing: border-box; width: 8.5in; height: 10.98in; overflow: hidden;
    display: flex; flex-direction: column; padding: 0; margin: 0; border: 0;
    break-after: page; page-break-after: always; break-inside: avoid;
    background: #fff; color: var(--ink);
  }
  .ck-sheetp:last-child { break-after: auto; page-break-after: auto; }
  .ck-wrap { max-width: none; width: 100%; box-sizing: border-box; padding-inline: .66in; margin: 0; }
  .ck-sheetp > .ck-wrap { flex: 1; display: flex; flex-direction: column; }
  .ck-sheet__head + .ck-wrap { padding-top: .36in; }
  .ck-sheet__head, .ck-sheet__foot, .ck-cover__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: .66in; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .ck-sheet__head { padding: .3in 0 9px; border-bottom: 1px solid var(--border); justify-content: flex-start; }
  .ck-sheet__head img { width: 60px; height: auto; }
  .ck-sheet__head span { border-left: 1px solid var(--border); padding-left: 10px; }
  .ck-sheet__head b { margin-left: auto; font-weight: 500; color: var(--ink); }
  .ck-sheet__foot { margin-top: auto; padding: 9px 0 .26in; border-top: 1px solid var(--border); }

  /* type, sized for paper */
  .ck main h2 { font-size: 36px; line-height: 1.04; }
  .ck-h3 { font-size: 19px; }
  .ck-lede { font-size: 15px; line-height: 1.5; }

  /* cover: the one navy sheet */
  .ck-hero { background: var(--navy-brand); color: rgba(255, 255, 255, .86); }
  .ck-hero > .ck-wrap { flex: 1; display: flex; flex-direction: column; padding-block: .7in .32in; }
  .ck-cover__logo { display: block; box-sizing: content-box; width: 100%; height: 28px; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .24); object-fit: contain; object-position: left; }
  .ck-hero__h1 { font-size: 52px; line-height: 1.04; margin: 1.5in 0 30px; color: #fff; }
  .ck-hero__h1 > em { color: var(--accent-ice); }
  .ck-hero__row { grid-template-columns: minmax(0, 1fr); }
  .ck-hero__answer { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 5.6in !important; }
  .ck-toc { margin-top: auto; }
  .ck-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .ck main .ck-toc a { min-height: 0; padding-block: 10px; font-size: 13px; font-weight: 400; color: #fff; border-top-color: rgba(255, 255, 255, .24); }
  .ck-toc small { font-size: 12px; color: var(--accent-ice); }
  .ck-toc a::after { display: none; }
  .ck-cover__foot { margin: 26px 0 0 !important; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .78); }

  /* how to use */
  .ck-how, .ck-part, .ck-answers, .ck-next { padding: 0; }
  .ck-how__row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ck-how__text { gap: 16px; }
  .ck-how .ck-lede { font-size: 16.5px; line-height: 1.55; }
  .ck-how__text h2 { padding-bottom: 16px; border-bottom: 1px solid var(--ink); margin-bottom: 6px; }
  .ck-how__text > p:not(.ck-lede) { font-size: 14.5px; line-height: 1.6; }
  .ck-bring { padding-top: 0; }
  .ck-bring .ck-h3 { margin-bottom: 6px; }
  .ck-bring ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
  .ck-bring li { padding: 11px 0 11px 18px; font-size: 14px; border-bottom: 1px solid var(--border); border-top: 0; }
  .ck-bring li::before { top: 20px; width: 8px; }
  .ck-key__h { margin-top: auto !important; margin-bottom: 12px !important; }
  .ck-key { gap: 26px; margin-bottom: .5in !important; }
  .ck-key__col { grid-template-columns: minmax(0, 1fr); padding-top: 14px; border-top-width: 1px; }
  .ck-key__mark { grid-row: auto; width: 36px; height: 36px; border-radius: 4px; margin-bottom: 12px; }
  .ck-key__mark svg { width: 36px; height: 36px; }
  .ck-key__name { font-size: 13px; }
  .ck-key h4 { font-size: 21px; }
  .ck-key__col > p:last-child { margin-top: 6px; font-size: 14px; line-height: 1.5; }

  /* the five parts */
  .ck-part__grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .ck-part__aside { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
  .ck-part__ask { font-size: 23px; }
  .ck-part__sub { font-size: 15px; line-height: 1.5; }
  .ck-part__main { flex: 1; display: flex; flex-direction: column; }
  .ck-item { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 16px; padding-block: 21px; break-inside: avoid; }
  .ck-list > .ck-item:first-child { border-top: 0; }
  .ck-item__n { font-size: 15px; padding-top: 0; color: var(--ink) !important; }
  .ck-item__title { font-size: 15px; line-height: 1.35; text-decoration: none !important; }
  .ck-item__sub { margin-top: 4px !important; font-size: 13.5px; line-height: 1.45; }
  .ck-marks { display: flex; gap: 14px; }
  .ck-mark, .ck-mark:has(input:checked) { min-height: 0; padding: 0; border: 0; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-soft) !important; background: none; }
  .ck-mark input { display: none; }
  .ck-box { width: 17px; height: 17px; border-width: 1px; border-radius: 2px; }
  .ck-box svg { width: 13px; height: 13px; }
  .ck-mark--some .ck-mark__t { font-size: 0; }
  .ck-mark--some .ck-mark__t::after { content: "Some"; font-size: 12px; }
  .ck-note { margin-top: auto; margin-bottom: 22px; padding: 16px 22px; border: 0; border-left: 2px solid var(--accent-blue); border-radius: 0; gap: 4px; }
  .ck-note p { font-size: 20px; line-height: 1.32; }
  .ck-note .ck-h3 { font-size: 11.5px; }
  .ck-miq { margin: auto .66in 22px; padding: 26px 28px; border-radius: 3px; }
  .ck-miq .ck-wrap { padding: 0; gap: 8px; }
  .ck-miq .ck-h3 { font-size: 11.5px; }
  .ck-miq__q { font-size: 27px; }
  .ck-miq__sub { font-size: 14px; }
  .ck-sheetp.ck-part--safety > .ck-part__grid { flex: 0 0 auto; }
  .ck-part--safety .ck-sheet__foot { margin-top: 0; }

  /* reading your answers */
  .ck-answers__head { gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
  .ck-answers h2 > em { color: var(--accent-blue-hover); }
  .ck-tally { margin-bottom: 16px; padding: 12px 16px; gap: 8px; border-radius: 3px; }
  .ck-tally .ck-h3 { font-size: 15px; }
  .ck-tally__strip i { height: 12px; border-width: 1px; }
  .ck-tally__nums li { font-size: 12px; }
  .ck-tally__nums b { font-size: 18px; }
  .ck main .ck-interp { grid-template-columns: minmax(0, 1fr); }
  .ck-interp__card { grid-template-columns: 70px 1.7in minmax(0, 1fr); gap: 18px; padding-block: 18px; border-top-width: 1px; }
  .ck-pat { width: 70px; height: auto; }
  .ck-interp__card > .ck-pat { grid-row: 1; }
  .ck-interp__card > p { grid-column: 3; }
  .ck-interp__card .ck-h3 { font-size: 18px; text-decoration: none !important; }
  .ck-interp__card p { font-size: 14px; line-height: 1.55; }
  .ck-answers .ck-lede { font-size: 16px; }

  /* the next step */
  .ck-next { background: #fff; color: var(--ink-soft); }
  .ck main .ck-next h2 { color: var(--ink); font-size: 34px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 6px; }
  .ck-next h2 em { color: var(--accent-blue-hover); }
  .ck main .ck-next strong { color: var(--ink); }
  .ck-next__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: .7in; }
  .ck-sheetp.ck-next > .ck-wrap { flex: 0 0 auto; display: block; }
  .ck-sheetp.ck-next > .ck-next__grid { display: grid; }
  .ck-next__text { gap: 12px; }
  .ck main .ck-next__text p { font-size: 15.5px; line-height: 1.6; }
  .ck-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 20px !important; }
  .ck main .ck-way { grid-template-columns: minmax(0, 1fr); padding-block: 14px 0; border-top: 1px solid var(--ink); border-bottom: 0 !important; color: var(--ink-soft); align-items: start; }
  .ck-way__body { font-size: 13.5px; line-height: 1.52; }
  .ck main .ck-way strong, .ck main .ck-way--main strong { font-size: 21px; color: var(--ink); }
  .ck-way__url { font-size: 12px; color: var(--accent-blue-hover); }
  .ck-ways li:first-child .ck-way__url::after { content: " at celva.com/quiz"; }
  .ck-ways li:last-child .ck-way__url::after { content: " at celva.com/book"; }
  .ck main .ck-more { grid-column: 1; gap: 0 30px; }
  .ck main .ck-more a { color: var(--ink-soft); font-size: 13.5px; padding-block: 12px; border-top: 1px solid var(--border); }
  .ck-more b { color: var(--ink); }
  .ck-more__url { color: var(--accent-blue-hover); text-decoration: underline; }
  .ck-next > .ck-wrap:has(> .ck-legal) { margin-top: auto; }
  .ck-next .ck-sheet__foot { margin-top: 0; }
  .ck-legal { display: block; margin: 0 0 14px !important; padding-top: 14px; border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.55; color: var(--ink-muted); }
  .ck-legal strong { font-weight: 600; }
}