/* /learn-caregiver-spouse-guide: its own sheet, loaded after site.css.
   The reader is the person travelling with the patient, often on a phone, so
   the two lists (what to pack, what to watch) are the page's working parts and
   everything else is short. One navy band (the day), one wash band (for you).
   Script: scripts/learn-caregiver-spouse-guide.js. With that script absent
   every part is visible, every link jumps and every box still ticks. */

html:has(body.cgguide) {
  --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);
}
.cgguide {
  --cg-ease: cubic-bezier(.16, 1, .3, 1);
  --cg-gut: clamp(20px, 4vw, 56px);
  --cg-navy: var(--navy-brand);
  --cg-on-navy: rgba(255, 255, 255, .8);
}

/* ============ GROUND RULES ============ */
.cg-wrap { max-width: calc(1240px + 2 * var(--cg-gut)); margin-inline: auto; padding-inline: var(--cg-gut); }
/* text fills its column; the column sets the measure */
.cgguide main p { max-width: none; margin: 0; }
.cgguide main a:not(.btn) { border-bottom: 0; }
.cgguide main :is(ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.cgguide main :is(ul, ol)[role="list"] { list-style: none; }
.cgguide main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.cgguide main h3 { margin: 0; max-width: none; }
.cgguide main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.cgguide .cg-day :is(a, summary):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.cgguide main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a link inside a sentence */
.cg-in { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-ice); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.cg-in:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* the onward link: the arrow leans the way it points */
.cg-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; }
.cg-go span { display: inline-block; transition: transform 360ms var(--cg-ease); }
.cg-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.cg-go:hover span { transform: translateX(6px); }
.cg-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.cg-day .cg-go { color: #c9def2; }
.cg-day .cg-go:hover { color: #fff; }

/* a drawn icon in its badge */
.cg-badge { display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: #fff; flex: none; transition: background-color 420ms, border-color 420ms; }
.cg-badge svg { width: 28px; height: 28px; overflow: visible; }
.cg-badge svg :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 420ms; }

/* "Read more": a native details, two labels */
.cg-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.cg-more summary::-webkit-details-marker { display: none; }
.cg-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 360ms var(--cg-ease); }
.cg-more summary:hover { color: var(--accent-blue); }
.cg-more summary:hover::after { transform: translateY(1px) rotate(45deg); }
.cg-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.cg-more[open] summary:hover::after { transform: translateY(-1px) rotate(-135deg); }
.cg-more:not([open]) .cg-more__shut, .cg-more[open] .cg-more__open { display: none; }
@keyframes cg-unfold { from { opacity: 0; transform: translateY(-8px); } }
.cg-more[open] .cg-more__body { animation: cg-unfold 420ms var(--cg-ease) both; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (cg-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.cg-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--cg-ease); }
.cg-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.cg-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
.cg-js [data-r="jobs"]:not(.is-in), .cg-js [data-r="ob"]:not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.cg-hero { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.cg-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.cg-hero__h1 > .h-lead, .cg-hero__h1 > em { display: inline-block; }
.cg-hero__h1 > em { color: var(--accent-blue); }
.cg-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.cg-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }
.cg-hero__go { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 18px; }
.cg-hero__fig { margin: 0; }

.cg-trip { display: block; width: 100%; height: auto; overflow: visible; }
.cg-trip :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cg-trip .cg-trip__ground { stroke: var(--border-strong); }
.cg-trip .cg-trip__trail { stroke: var(--accent-ice); stroke-dasharray: 2 8; }
.cg-trip .cg-trip__plane path { fill: #fff; }
.cg-trip .cg-trip__border { stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 2 9; }
.cg-trip .cg-trip__arm { stroke: var(--accent-blue); stroke-width: 2.4; transform-box: fill-box; transform-origin: left center; }
.cg-trip .cg-trip__win { stroke: var(--border-strong); stroke-width: 1.4; }
.cg-trip .cg-trip__cross { transform-box: fill-box; transform-origin: center; }
.cg-trip .cg-trip__cross circle { fill: var(--accent-blue); stroke: none; }
.cg-trip .cg-trip__cross path { stroke: #fff; stroke-width: 3.4; }
.cg-trip .cg-trip__car { transform-box: fill-box; transform-origin: center; }
.cg-trip .cg-trip__car path { fill: #fff; }
.cg-trip .cg-trip__wheel { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.cg-trip .cg-trip__head { fill: var(--accent-blue); stroke: none; }

/* first paint: the road, the plane in, the two buildings, then the drive
   across and back, once. The gate lifts each time the car reaches it. */
@keyframes cg-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes cg-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cg-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes cg-fade { from { opacity: 0; } }
@keyframes cg-land { from { opacity: 0; transform: translate(-110px, -64px); } }
@keyframes cg-drive {
  0% { transform: translateX(0) scaleX(1); }
  36%, 61.9% { transform: translateX(150px) scaleX(1); }
  62%, 64% { transform: translateX(150px) scaleX(-1); }
  99.9% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes cg-gate {
  0%, 10%, 31%, 71%, 92%, 100% { transform: rotate(0); }
  15%, 26%, 76%, 87% { transform: rotate(-72deg); }
}
@keyframes cg-care { 0%, 34%, 64%, 100% { transform: scale(1); } 42%, 54% { transform: scale(1.16); } }
.cg-js .cg-hero__h1 > * { animation: cg-up 900ms var(--cg-ease) both; }
.cg-js .cg-hero__h1 > em { animation-delay: 110ms; }
.cg-js .cg-hero__text > * { animation: cg-up 900ms var(--cg-ease) 240ms both; }
.cg-js .cg-hero__text > .cg-hero__go { animation-delay: 340ms; }
.cg-js .cg-trip .cg-d { stroke-dasharray: 1; animation: cg-draw 800ms var(--cg-ease) both; }
.cg-js .cg-trip .cg-trip__ground { animation-duration: 1100ms; animation-delay: 200ms; }
.cg-js .cg-trip .cg-trip__trail { animation: cg-fade 600ms ease 700ms both; }
.cg-js .cg-trip .cg-trip__plane { animation: cg-land 1300ms var(--cg-ease) 500ms both; }
.cg-js .cg-trip__hotel .cg-d { animation-delay: 900ms; }
.cg-js .cg-trip__hotel .cg-trip__win { animation: cg-fade 500ms ease 1500ms both; }
.cg-js .cg-trip .cg-trip__border { animation: cg-fade 700ms ease 1300ms both; }
.cg-js .cg-trip .cg-d[d^="M356"] { animation-delay: 1400ms; }
.cg-js .cg-trip__hosp .cg-d { animation-delay: 1500ms; }
.cg-js .cg-trip__hosp .cg-trip__win { animation: cg-fade 500ms ease 2100ms both; }
.cg-js .cg-trip .cg-trip__cross { animation: cg-pop 520ms var(--cg-ease) 2100ms both, cg-care 9s ease-in-out 2900ms 1; }
.cg-js .cg-trip .cg-trip__arm { animation: cg-fade 400ms ease 1700ms both, cg-gate 9s ease-in-out 2900ms 1; }
.cg-js .cg-trip .cg-trip__car { animation: cg-fade 500ms ease 2300ms both, cg-drive 9s cubic-bezier(.45, 0, .25, 1) 2900ms 1; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.cgguide .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);
  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(--cg-ease), visibility 0s 360ms;
}
.cgguide .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--cg-ease); }
body.cgguide.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.cgguide .hc-bar__track {
  max-width: calc(1240px + 2 * var(--cg-gut)); margin: 0 auto; padding: 0 var(--cg-gut);
  height: 100%; 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;
}
.cgguide .hc-bar__track::-webkit-scrollbar { display: none; }
.cgguide .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;
}
.cgguide .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--cg-ease);
}
.cgguide .hc-bar__track a:hover, .cgguide .hc-bar__track a[aria-current] { color: var(--ink); }
.cgguide .hc-bar__track a:hover::after { transform: scaleX(.35); }
.cgguide .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.cgguide .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.cgguide .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));
}

/* ============ YOUR JOB ============ */
.cg-role { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.cgguide .cg-role h2 { margin-bottom: clamp(28px, 4vw, 56px); }
.cg-role__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.cg-role__text > p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cg-role__text > * + * { margin-top: 14px !important; }
.cg-more__body p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); padding-top: 6px; }

.cg-jobs li { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); padding-block: 14px; }
.cg-jobs li + li { border-top: 1px solid var(--border); }
.cg-jobs__w { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.cg-jobs__not { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border); }
.cg-jobs__not p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.cg-jobs__not b { font-weight: 600; color: var(--ink); }
/* the three jobs arrive one after another, each drawn as it lands: the eye
   opens, the page takes three lines, the speech bubble says something */
@keyframes cg-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
.cg-jobs .cg-eye__lid, .cg-jobs .cg-eye__iris { transform-box: fill-box; transform-origin: center; }
.cg-jobs .cg-say__dot { fill: var(--ink); stroke: none; transform-box: fill-box; transform-origin: center; }
.cg-js [data-r="jobs"] .cg-jobs li { transition: opacity 620ms ease calc(var(--i) * 220ms), transform 820ms var(--cg-ease) calc(var(--i) * 220ms); }
.cg-js [data-r="jobs"] .cg-jobs__not { transition: opacity 620ms ease 760ms; }
.cg-js [data-r="jobs"]:not(.is-in) .cg-jobs li { opacity: 0; transform: translateX(36px); }
.cg-js [data-r="jobs"]:not(.is-in) .cg-jobs__not { opacity: 0; }
.cg-js [data-r="jobs"] .cg-jobs path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cg-js [data-r="jobs"].is-in .cg-jobs path[pathLength] { animation: cg-draw 900ms var(--cg-ease) calc(var(--i) * 220ms + 200ms) both; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-note__line { animation-duration: 420ms; animation-delay: 1100ms; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-note__line + .cg-note__line { animation-delay: 1380ms; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-note__line + .cg-note__line + .cg-note__line { animation-delay: 1660ms; }
.cg-js [data-r="jobs"]:not(.is-in) .cg-jobs :is(.cg-eye__iris, .cg-say__dot) { opacity: 0; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-eye__iris { animation: cg-pop 420ms var(--cg-ease) 700ms both; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-eye__lid { animation: cg-draw 900ms var(--cg-ease) 200ms both, cg-blink 420ms ease 1500ms 1; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-say__dot { animation: cg-pop 360ms var(--cg-ease) 1500ms both; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-say__dot + .cg-say__dot { animation-delay: 1680ms; }
.cg-js [data-r="jobs"].is-in .cg-jobs .cg-say__dot + .cg-say__dot + .cg-say__dot { animation-delay: 1860ms; }

/* ============ TREATMENT DAY (the navy band) ============ */
.cg-day { background: var(--cg-navy); color: #fff; padding-block: clamp(56px, 7vw, 112px); }
.cg-day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 48px; margin-bottom: clamp(28px, 4vw, 56px); }
.cgguide .cg-day h2 { color: #fff; }
.cg-day__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.2; color: var(--cg-on-navy); }
.cg-day__line em { color: var(--accent-ice); }
.cg-day__lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cg-day__text p { font-size: 18px; line-height: 1.7; color: var(--cg-on-navy); }
.cg-day__text p + p { margin-top: 16px !important; }
.cg-day .cg-more { margin-top: 6px; }
.cg-day .cg-more summary { color: #c9def2; }
.cg-day .cg-more summary:hover { color: #fff; }
.cg-day .cg-more__body p { color: var(--cg-on-navy); }

.cg-eve { border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: clamp(20px, 2.4vw, 30px); }
.cg-eve h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: #fff; margin-bottom: 12px !important; }
.cg-eve dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; padding-block: 11px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cg-eve dt { font-size: 15px; font-weight: 600; color: var(--accent-ice); line-height: 1.55; }
.cg-eve dd { font-size: 16px; line-height: 1.55; color: var(--cg-on-navy); }
.cg-eve dl > div:last-child { padding-bottom: 0; }

.cg-clockrow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.cg-clock { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 40px); display: grid; justify-items: center; gap: 16px; }
.cg-clock svg { display: block; width: min(100%, 260px); height: auto; overflow: visible; }
.cg-clock :is(path, circle) { fill: none; stroke: #fff; stroke-linecap: round; }
.cg-clock .cg-clock__face { stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; }
.cg-clock .cg-clock__ticks path { stroke: rgba(255, 255, 255, .78); stroke-width: 2.2; }
.cg-clock .cg-clock__ticks .cg-clock__minor { stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; }
.cg-clock .cg-clock__hour { stroke-width: 5; }
.cg-clock .cg-clock__min { stroke: var(--accent-ice); stroke-width: 3; }
.cg-clock .cg-clock__pin { fill: #fff; stroke: none; }
/* 9:00 until the script says otherwise; the hands only ever run forwards */
.cg-clock :is(.cg-clock__hour, .cg-clock__min) { transform-origin: 100px 100px; transition: transform 900ms var(--cg-ease); }
.cg-clock .cg-clock__hour { transform: rotate(calc(270deg + var(--cg-min, 0) * .5deg)); }
.cg-clock .cg-clock__min { transform: rotate(calc(var(--cg-min, 0) * 6deg)); }
.cg-clock__read { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }

.cg-sched h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.2; color: #fff; margin-bottom: clamp(14px, 2vw, 24px) !important; }
.cg-steps li { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 2px 24px; align-items: baseline; padding: 17px 0 17px 40px; color: var(--cg-on-navy); transition: color 420ms; }
.cg-steps b { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: #fff; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.cg-steps span { font-size: 18px; line-height: 1.55; }
/* a stop for each step, and one connector per gap: nothing runs on past the last stop */
.cg-steps li::before { content: ""; position: absolute; left: 0; top: 24px; width: 15px; height: 15px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; background: var(--cg-navy); z-index: 1; transition: border-color 320ms, background-color 320ms, transform 420ms var(--cg-ease), box-shadow 420ms; }
.cg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 39px; bottom: -24px; width: 2px; background: linear-gradient(var(--accent-ice), var(--accent-ice)) no-repeat top / 100% 0, rgba(255, 255, 255, .2); transition: background-size 620ms var(--cg-ease); }
.cg-steps li.is-passed::before { border-color: var(--accent-ice); background: var(--accent-ice); }
.cg-steps li.is-passed:not(:last-child)::after { background-size: 100% 100%, auto; }
.cg-steps li.is-now { color: #fff; }
.cg-steps li.is-now::before { border-color: #fff; background: #fff; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(124, 169, 209, .28); }
.cg-sched__you { margin-top: clamp(20px, 3vw, 36px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .2); }
.cg-sched__you p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; color: #fff; }
.cg-sched__you b { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--accent-ice); }
.cg-day__foot { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 12px clamp(32px, 5vw, 88px); align-items: end; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .2); }
.cg-day__foot p { font-size: 18px; line-height: 1.7; color: var(--cg-on-navy); }
.cg-day__foot .cg-go { justify-self: end; text-align: right; }

/* ============ PACKING LIST ============ */
.cg-pack { padding-block: clamp(56px, 7vw, 104px); }
.cgguide .cg-pack h2 { margin-bottom: clamp(24px, 3.4vw, 48px); }
.cg-pack__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; gap: 0 clamp(32px, 5vw, 88px); }
.cg-pack__side { grid-column: 1; grid-row: 1; }
.cg-pack__side p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cg-lists { grid-column: 2; grid-row: 1 / span 2; }
.cg-pack__tools { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--border); }
.cg-pack__tools[hidden] { display: none; }
.cg-bag { display: block; width: 132px; height: auto; overflow: visible; }
.cg-bag :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-bag .cg-bag__seam { stroke: var(--border-strong); stroke-dasharray: 1 7; }
/* the zip closes as far as the list is ticked */
.cg-bag .cg-bag__zip { stroke: var(--accent-blue); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--cg-p, 0)); opacity: min(1, calc(var(--cg-p, 0) * 40)); transition: stroke-dashoffset 620ms var(--cg-ease); }
.cg-bag .cg-bag__pull { transform: translateX(calc(var(--cg-p, 0) * 88px)); transition: transform 620ms var(--cg-ease); }
.cg-bag .cg-bag__pull rect { fill: #fff; }
.cg-bag .cg-bag__tag circle { fill: #fff; transition: fill 420ms, stroke 420ms; }
.cg-bag .cg-bag__tick { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--cg-ease) 300ms; }
.cg-pack__tools.is-done .cg-bag__tag circle { fill: var(--accent-blue); stroke: var(--accent-blue); }
.cg-pack__tools.is-done .cg-bag__tick { stroke-dashoffset: 0; }
.cg-pack__count { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; line-height: 1.15; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cg-pack__count b { display: inline-block; font-weight: 400; color: var(--accent-blue-hover); }
@keyframes cg-count { 40% { transform: translateY(-3px) scale(1.14); } }
.cg-pack__count b.is-bump { animation: cg-count 360ms var(--cg-ease); }
.cg-pack__note { margin-top: 4px !important; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.cg-pack__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: var(--ink); font: 600 15px/1 var(--font-body); cursor: pointer; transition: border-color 200ms, color 200ms, background-color 200ms, transform 320ms var(--cg-ease); }
.cg-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue-hover); transform: translateY(-2px); }
.cg-btn:active { transform: none; }
.cg-btn--quiet { border-color: transparent; color: var(--ink-muted); padding-inline: 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border-strong); }
.cg-btn--quiet:hover { border-color: transparent; transform: none; text-decoration-color: currentColor; }
.cg-btn[hidden] { display: none; }
.cg-btn.is-said { border-color: var(--accent-blue); color: var(--accent-blue-hover); }
.cg-btn.is-said::before { content: ""; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); animation: cg-fade 260ms ease both; }

.cg-list { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px; padding-block: clamp(18px, 2vw, 26px); border-top: 1px solid var(--border); }
.cg-list:first-child { border-top: 0; padding-top: 0; }
.cg-list h3 { align-self: start; margin-top: 11px !important; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.cg-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cg-list li { position: relative; }
.cg-list input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cg-list label { position: relative; display: flex; align-items: flex-start; min-height: 48px; padding: 12px 0 12px 38px; box-sizing: border-box; font-size: 16.5px; line-height: 1.45; color: var(--ink); transition: color 260ms; }
.cg-list label strong { font-weight: 600; }
.cg-list label::before { content: ""; position: absolute; left: 0; top: 12px; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--ink-muted); border-radius: 6px; background: #fff; transition: background-color 220ms, border-color 220ms, transform 320ms var(--cg-ease); }
/* the tick is drawn, left to right, not switched on */
.cg-list label::after { content: ""; position: absolute; left: 5px; top: 18px; width: 14px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.4l3.6 3.6L12.5 1.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); clip-path: inset(0 100% 0 0); transition: clip-path 320ms var(--cg-ease) 60ms; }
.cg-list input:hover + label::before { border-color: var(--accent-blue); transform: scale(1.08); }
.cg-list input:checked + label::before { background: var(--accent-blue); border-color: var(--accent-blue); }
.cg-list input:checked + label::after { clip-path: inset(0); }
.cg-list input:checked + label { color: var(--ink-muted); }
.cg-list input:focus-visible + label::before { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.cg-star { display: inline-block; width: 17px; height: 17px; margin-right: 2px; vertical-align: -2px; }
.cg-star path { fill: var(--accent-blue); stroke: none; }
.cg-js .cg-list[data-r] { transition-delay: calc(var(--i) * 120ms); }

/* ============ WHAT TO WATCH ============ */
.cg-watch { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.cg-watch__lede { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
/* which day is it: the reader says when Day 0 was, once, and the page keeps count */
.cg-dayn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(18px, 2.4vw, 28px); }
.cg-dayn[hidden] { display: none; }
.cg-dayn label { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.cg-dayn input { min-height: 44px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: var(--ink); font: 500 16px/1 var(--font-body); transition: border-color 200ms, box-shadow 200ms; }
.cg-dayn input:hover { border-color: var(--accent-blue); }
.cg-dayn input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.cg-dayn__out { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--accent-blue-hover); font-variant-numeric: lining-nums; }
/* empty, it takes no room but stays in the accessibility tree, so the first count is announced */
.cg-dayn__out:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes cg-told { from { opacity: 0; transform: translateX(-10px); } }
.cg-dayn__out.is-told { animation: cg-told 520ms var(--cg-ease) both; }
.cg-obs { margin-top: clamp(28px, 4vw, 52px); }
.cg-ob { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(20px, 3vw, 48px); align-items: center; padding-block: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border); }
.cg-ob:last-child { border-bottom: 1px solid var(--border); }
.cg-ob h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.2; color: var(--ink); }
.cg-ob > div { align-self: start; grid-row: 2; }
.cg-ob__normal { grid-column: 2; }
.cg-ob__act { grid-column: 3; }
.cg-ob p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.cg-ob p strong { font-weight: 600; color: var(--ink); }
.cg-ob__act p { padding-left: 20px; box-shadow: inset 3px 0 0 var(--ink); color: var(--ink); }
/* two weeks, one square a day: the days this one is checked are filled */
.cg-strip { justify-self: end; display: flex; flex-wrap: wrap; gap: 4px; }
.cg-strip i { width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: 3px; }
.cg-strip i:nth-child(7) { margin-right: 6px; }
.cg-strip--7 i:nth-child(-n+7), .cg-strip--5 i:nth-child(-n+5), .cg-strip--14 i { background: var(--accent-blue); border-color: var(--accent-blue); }
@keyframes cg-mark { from { background: transparent; border-color: var(--border-strong); transform: scale(.6); } }
.cg-js [data-r="ob"]:not(.is-in) .cg-strip i { background: transparent; border-color: var(--border-strong); }
.cg-js [data-r="ob"].is-in .cg-strip i { animation: cg-mark 420ms var(--cg-ease) both; }
.cg-js [data-r="ob"].is-in .cg-strip i:nth-child(1) { animation-delay: 300ms; } .cg-js [data-r="ob"].is-in .cg-strip i:nth-child(2) { animation-delay: 370ms; }
.cg-js [data-r="ob"].is-in .cg-strip i:nth-child(3) { animation-delay: 440ms; } .cg-js [data-r="ob"].is-in .cg-strip i:nth-child(4) { animation-delay: 510ms; }
.cg-js [data-r="ob"].is-in .cg-strip i:nth-child(5) { animation-delay: 580ms; } .cg-js [data-r="ob"].is-in .cg-strip i:nth-child(6) { animation-delay: 650ms; }
.cg-js [data-r="ob"].is-in .cg-strip i:nth-child(7) { animation-delay: 720ms; } .cg-js [data-r="ob"].is-in .cg-strip i:nth-child(n+8) { animation-delay: 860ms; }
/* each icon is drawn as its row arrives; the battery then takes its charge */
.cg-js [data-r="ob"] .cg-badge [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cg-js [data-r="ob"].is-in .cg-badge [pathLength] { animation: cg-draw 1000ms var(--cg-ease) 120ms both; }
.cg-batt__bar { stroke: var(--accent-blue) !important; stroke-width: 2 !important; }
.cg-js [data-r="ob"]:not(.is-in) .cg-batt__bar { opacity: 0; }
.cg-js [data-r="ob"].is-in .cg-batt__bar { animation: cg-fade 320ms ease 900ms both; }
.cg-js [data-r="ob"].is-in .cg-batt__bar + .cg-batt__bar { animation-delay: 1120ms; }
.cg-js [data-r="ob"].is-in .cg-batt__bar + .cg-batt__bar + .cg-batt__bar { animation-delay: 1340ms; }
.cg-js [data-r="ob"].is-in .cg-batt__bar + .cg-batt__bar + .cg-batt__bar + .cg-batt__bar { animation-delay: 1560ms; }
.cg-js [data-r="ob"] > div { transition: opacity 620ms ease 200ms; }
.cg-js [data-r="ob"] > div + div { transition-delay: 380ms; }
.cg-js [data-r="ob"]:not(.is-in) > div { opacity: 0; }
.cg-watch__foot { margin-top: clamp(24px, 3vw, 40px); }
.cg-watch__foot > p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cg-watch__foot .cg-go { display: flex; width: fit-content; margin-top: 6px; }

/* ============ FOR YOU (the wash band) ============ */
.cg-you { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 112px); }
.cgguide .cg-you h2 { margin-bottom: clamp(24px, 3.4vw, 48px); }
.cg-you__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cg-you__side { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 40px); }
.cg-you__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.2; color: var(--accent-blue-hover); }
.cg-share { margin-top: 18px; }
.cg-you__side p:last-of-type { margin-top: 16px !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.cg-care li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 6px 24px; padding-block: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--border); }
.cg-care li:first-child { border-top: 0; padding-top: 0; }
.cg-care .cg-badge { grid-row: span 2; }
.cg-care h3 { align-self: end; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.2; color: var(--ink); }
.cg-care p { grid-column: 2; font-size: 17.5px; line-height: 1.65; color: var(--ink-soft); }
/* the one being read is lit; its icon is drawn again as it lights */
.cg-care li.is-lit .cg-badge { background: var(--accent-blue); border-color: var(--accent-blue); }
.cg-care li.is-lit .cg-badge svg path { stroke: #fff; }
.cg-js .cg-care li.is-lit .cg-badge path { stroke-dasharray: 1; animation: cg-draw 900ms var(--cg-ease) both; }
@keyframes cg-ringing { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.cg-js .cg-care li.is-lit .cg-ring { animation: cg-draw 600ms var(--cg-ease) 300ms both, cg-ringing 900ms ease 1100ms 2; }
.cg-you__close { margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--border-strong); }
.cg-you__close p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.cg-you__close em { color: var(--accent-blue-hover); }

/* ============ READ ON ============ */
.cg-next { padding-block: clamp(48px, 6vw, 96px); }
.cg-next__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; margin-bottom: clamp(16px, 2vw, 28px); }
.cg-next__up { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 16px; }
.cg-next__up a { display: inline-flex; align-items: center; min-height: 44px; }
.cgguide .cg-reads a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 44px; gap: 6px 32px; align-items: baseline; min-height: 44px; padding: 24px 0; border-top: 1px solid var(--border); color: var(--ink); }
.cg-reads li:last-child a { border-bottom: 1px solid var(--border); }
.cg-reads__t { grid-column: 1; grid-row: 1; }
.cg-reads__d { grid-column: 2; grid-row: 1; }
.cg-reads__go { grid-column: 3; grid-row: 1; }
.cg-reads__t { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 400; line-height: 1.2; transition: color 200ms, transform 420ms var(--cg-ease); }
.cg-reads__d { font-size: 16.5px; line-height: 1.55; color: var(--ink-muted); }
/* the first read, drawn: the week 1 to month 12 scale its own line names */
.cg-curve { display: none; }
.cg-reads li:first-child .cg-curve { display: block; grid-column: 2; grid-row: 1; justify-self: end; align-self: center; width: 112px; height: 60px; overflow: visible; }
.cg-reads li:first-child .cg-reads__d { padding-right: 136px; }
.cg-curve :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cg-curve .cg-curve__axis { stroke: var(--border-strong); }
.cg-curve .cg-curve__line { stroke: var(--accent-blue); stroke-width: 2.2; }
.cg-curve circle { fill: #fff; }
.cg-js .cg-reads [data-r] .cg-curve__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cg-js .cg-reads [data-r].is-in .cg-curve__line { animation: cg-draw 1400ms var(--cg-ease) 400ms both; }
.cg-js .cg-reads a:hover .cg-curve__line { animation: cg-redraw 1100ms var(--cg-ease) both; }
@keyframes cg-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cg-reads__go { justify-self: end; align-self: center; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--cg-ease); }
.cg-reads a:hover .cg-reads__t, .cg-reads a:focus-visible .cg-reads__t { color: var(--accent-blue-hover); transform: translateX(8px); }
.cg-reads a:hover .cg-reads__go, .cg-reads a:focus-visible .cg-reads__go { transform: translateX(8px); }
.cg-js .cg-reads [data-r]:not(.is-in) { transform: translateX(-28px); }
.cg-js .cg-reads li:nth-child(2)[data-r] { transition-delay: 110ms; }
.cg-js .cg-reads li:nth-child(3)[data-r] { transition-delay: 220ms; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .cgguide .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .cg-list { grid-template-columns: minmax(0, 1fr); }
  .cg-list h3 { margin-top: 0 !important; }
}
@media (max-width: 900px) {
  .cg-hero__row, .cg-role__grid, .cg-day__lead, .cg-you__grid, .cg-day__foot { grid-template-columns: minmax(0, 1fr); }
  .cg-hero__fig { max-width: 560px; }
  .cg-day__foot .cg-go { justify-self: start; text-align: left; }
  .cg-you__side { position: static; }
  .cg-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
  /* the clock rides down the right edge of the schedule */
  .cg-clockrow { grid-template-columns: minmax(0, 1fr) 76px; gap: 16px; }
  .cg-clock { order: 2; gap: 8px; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 20px); }
  .cg-clock svg { width: 76px; }
  .cg-clock .cg-clock__ticks path { stroke-width: 5; }
  .cg-clock .cg-clock__hour { stroke-width: 9; }
  .cg-clock .cg-clock__min { stroke-width: 6; }
  .cg-clock__read { font-size: 1.05rem; white-space: nowrap; }
  .cg-steps li { grid-template-columns: minmax(0, 1fr); padding-left: 32px; }
  /* the count and the copy button follow the list down the phone */
  .cg-pack__grid { display: block; }
  .cg-pack__tools { z-index: 3; top: calc(var(--hc-nav-h) + var(--hc-bar-h)); grid-template-columns: 52px minmax(0, 1fr); gap: 14px; margin: 20px calc(var(--cg-gut) * -1) 8px; padding: 10px var(--cg-gut); border-top: 0; border-bottom: 1px solid var(--border); background: #fff; }
  .cg-bag { width: 52px; }
  .cg-bag :is(path, rect, circle) { stroke-width: 3; }
  .cg-pack__state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; }
  .cg-pack__count { font-size: 1.25rem; }
  .cg-pack__note { order: 3; flex-basis: 100%; margin-top: 0 !important; font-size: 13.5px; }
  .cg-pack__btns { margin-top: 0; flex-wrap: nowrap; }
  .cg-btn { padding-inline: 14px; }
  .cg-ob { grid-template-columns: 60px minmax(0, 1fr); }
  .cg-strip { grid-column: 2; justify-self: start; margin-top: -6px; }
  .cg-ob > div { grid-column: 1 / -1; grid-row: auto; }
  .cgguide .cg-reads a { grid-template-columns: minmax(0, 1fr) 32px; padding-block: 20px; }
  .cg-reads__d { grid-column: 1; grid-row: 2; }
  .cg-reads li:first-child .cg-reads__d { padding-right: 0; }
  .cg-reads li:first-child .cg-curve { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; }
  .cg-reads__go { grid-column: 2; grid-row: 1; align-self: start; }
}
@media (max-width: 600px) {
  html:has(body.cgguide) { --hc-bar-h: 48px; }
  .cg-hero { padding-bottom: 36px; }
  .cg-role, .cg-day, .cg-pack, .cg-watch, .cg-you, .cg-next { padding-block: 44px; }
  .cg-steps li { padding-block: 13px; }
  .cg-steps li::before { top: 19px; }
  .cg-steps li:not(:last-child)::after { top: 34px; bottom: -19px; }
  .cg-clockrow { margin-top: 36px; }
  .cgguide .hc-bar__track { gap: 22px; }
  .cg-hero__go { flex-direction: column; gap: 0; }
  .cg-list ul { grid-template-columns: minmax(0, 1fr); }
  .cg-eve dl > div { grid-template-columns: 78px minmax(0, 1fr); }
  .cg-badge { width: 52px; height: 52px; }
  .cg-ob, .cg-care li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .cg-jobs li { padding-block: 10px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  /* the script does not arm the reveals here (no cg-js), so nothing starts hidden */
  .cgguide main *, .cgguide main *::before, .cgguide main *::after { animation: none !important; transition: none !important; }
  .cgguide .hc-bar { transition: none !important; }
  .cg-go:hover span, .cg-btn:hover, .cg-list input:hover + label::before, .cg-reads a:hover :is(.cg-reads__t, .cg-reads__go) { transform: none; }
  .cg-care li.is-lit .cg-badge path { stroke-dasharray: none; }
}
@media print {
  .cgguide main *, .cgguide main *::before, .cgguide main *::after { transition: none !important; }
  .cgguide .hc-bar, .cg-pack__btns, .cg-pack__note, .cg-share, .cg-dayn:has(output:empty), .cg-more summary { display: none !important; }
  .cg-role, .cg-day, .cg-pack, .cg-watch, .cg-you, .cg-next { padding-block: 24px; }
  .cg-list, .cg-ob, .cg-care li, .cg-steps li { break-inside: avoid; }
  .cg-you { background: #fff; }
  .cg-js [data-r]:not(.is-in), .cg-js [data-r] :is(.cg-jobs li, .cg-jobs__not, .cg-eye__iris, .cg-say__dot, .cg-batt__bar), .cg-js [data-r="ob"] > div { opacity: 1 !important; transform: none !important; }
  .cg-js [data-r] [pathLength] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .cg-day { background: #fff; color: var(--ink); }
  .cg-day :is(h2, h3, p, b, span, dt, dd, em, figcaption) { color: var(--ink) !important; }
  .cg-clock :is(path, circle) { stroke: var(--ink) !important; }
  .cg-pack__tools, .cg-clock, .cg-you__side { position: static; }
  .cg-list label::before { border-color: #000; }
}

/* Parts waiting to slide in sit a little to one side; without this a phone
   could be scrolled sideways until they arrive. clip keeps sticky working. */
main { overflow-x: clip; }

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}