/* SnowGame /coaches: the rental page's look (/rental: navy round-capped outlines, flat cyan / pink / yellow fills,
   white cards, coupon-ticket tear lines, Kalam lines under navy titles on a cyan brush) as a kit shared by R1-R5.
   Everything is scoped to .cr (the page's <main>): classes cr-, variables --cr-, keyframes cr-.
   How to use each piece: coach-lab/rkit/KIT.md (live samples: coach-lab/rkit/demo.html).
   Mobile first: phones up to 767px (navbar 100px up to 479px, 120px from 480px), tablets 768-1023, desktop from 1024,
   wide from 1280. Content keeps 80px clear on each side for the floating contact buttons from 601px. */
.cr {
  --cr-ink: #17375a; --cr-text: #3a5167; --cr-en: #43647c;
  --cr-ice: #eaf6fc; --cr-stub: #e8f6fb; --cr-band: #f3fafd; --cr-line: #d2e4ee; --cr-line-2: #b4d3e3; --cr-edge: #c9dfeb; --cr-perf: #8cc4d8;
  --cr-cyan: #4edce9; --cr-cyan-soft: #cdf3f8; --cr-cyan-pale: #dcf6fa; --cr-cyan-line: #8fe6ef;
  --cr-red: #c81e4a; --cr-blue: #1d6aa8; --cr-blue-2: #14507f;
  --cr-yellow: #ffd75e; --cr-yellow-soft: #fff3c8; --cr-yellow-line: #f6cf4f; --cr-pink: #ff9ec0; --cr-pink-soft: #ffe3ee;
  --cr-snow: #c3e7f2; --cr-dot: #e2f1f8;
  --cr-shadow: 0 14px 28px -22px rgba(23, 55, 90, .5);
  --cr-ease: cubic-bezier(.22, 1, .36, 1);
  --cr-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --cr-w: min(1120px, calc(100% - 40px));
  --cr-nav: 100px;
  --cr-h2: 26px; --cr-kalam: 32px; --cr-pair: 14px; --cr-body: 16px;
  --cr-ch: 88px; --cr-sec: 64px; --cr-hd: 28px; --cr-bk: 20px; --cr-h3: 10px;
  display: block; background: #fff; color: var(--cr-text); font-size: var(--cr-body); line-height: 1.75; overflow-x: clip;
}
.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr [hidden] { display: none !important; }
.cr:focus, .cr:focus-visible { outline: none !important; }
.cr h1, .cr h2, .cr h3, .cr h4, .cr p, .cr ul, .cr ol, .cr dl, .cr dd, .cr figure, .cr blockquote { margin: 0; }
.cr ul, .cr ol { padding: 0; list-style: none; }
.cr h1, .cr h2, .cr h3, .cr h4 { color: var(--cr-ink); font-family: inherit; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.cr strong, .cr b { color: var(--cr-ink); font-weight: 700; }
.cr p, .cr li, .cr dd { text-wrap: pretty; }
.cr a { color: var(--cr-blue); text-underline-offset: 3px; }
.cr img { max-width: 100%; }
.cr svg { display: block; flex-shrink: 0; }
.cr button { font: inherit; }
.cr summary { list-style: none; cursor: pointer; }
.cr summary::-webkit-details-marker { display: none; }
.cr summary::marker { content: ""; }
.cr .cr-keep { display: inline-block; }
.cr .cr-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cr .cr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* jump targets land under the fixed navbar; controls keep clear of the navbar and the bottom contact buttons */
.cr [id] { scroll-margin-top: calc(var(--cr-nav) + 16px); }
.cr a, .cr button, .cr summary { scroll-margin-top: calc(var(--cr-nav) + 20px); scroll-margin-bottom: 84px; }
/* keyboard focus: a navy ring (clear on white, cyan and yellow); a mouse click shows none */
.cr a:focus-visible, .cr button:focus-visible, .cr summary:focus-visible, .cr [tabindex]:not(main):focus-visible { outline: 3px solid var(--cr-ink); outline-offset: 3px; }
.cr :focus:not(:focus-visible) { outline: none; }
.cr .cr-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- layout */
.cr .cr-wrap { width: var(--cr-w); margin-inline: auto; }
.cr .cr-sec { padding-top: var(--cr-sec); }
.cr .cr-sec--first { padding-top: 32px; }   /* the first section under the hero */
.cr .cr-rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--cr-line); }
/* a dotted line with a snowflake in the middle (between chapters) */
.cr .cr-dots {
  display: block; width: var(--cr-w); height: 26px; margin: var(--cr-sec) auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fff'/%3E%3Cpath d='M13 4.5v17M5.6 8.7l14.8 8.6M5.6 17.3l14.8-8.6' fill='none' stroke='%234edce9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    radial-gradient(circle, var(--cr-line-2) 1.6px, transparent 2.1px) center / 12px 12px repeat-x;
}
/* the closing chapter (help card + Let's go!!) sits on faint dots */
.cr .cr-ch3 {
  margin-top: calc(var(--cr-sec) / 2); padding: calc(var(--cr-ch) - var(--cr-sec) / 2) 0 var(--cr-ch);
  background: #fff radial-gradient(circle at 12px 12px, var(--cr-dot) 2px, transparent 2.6px) 0 0 / 24px 24px;
}

/* ---------------------------------------------------------------- section title: navy Chinese on a cyan brush + Kalam line */
.cr .cr-head { margin-bottom: var(--cr-hd); }
.cr .cr-head__title { position: relative; z-index: 0; display: inline-block; font-size: var(--cr-h2); line-height: 1.5; }
.cr .cr-head__title::after {
  content: ""; position: absolute; z-index: -1; left: -.2em; right: -.2em; top: 68%; height: 30%;
  border-radius: .3em .5em .4em .45em; background: rgba(78, 220, 233, .55); transform: rotate(-1deg); transform-origin: left center;
}
.cr .cr-en { display: block; font-family: Kalam, Arial, sans-serif; font-weight: 700; letter-spacing: 0; color: var(--cr-en); }
.cr .cr-head .cr-en { margin-top: var(--cr-pair); font-size: var(--cr-kalam); line-height: 1; text-wrap: balance; }
.cr .cr-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cr .cr-lead { max-width: 38em; margin-bottom: var(--cr-bk); }
.cr .cr-foot { margin-top: var(--cr-hd); }
.cr .cr-foot:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
/* two-column section (>= 1024px): the title stays in view on the left while the content on the right scrolls */
.cr .cr-guide__in { padding: calc(var(--cr-sec) * 1.25) 0 calc(var(--cr-sec) / 2); }
.cr .cr-guide + .cr-guide .cr-guide__in { border-top: 1px solid var(--cr-line); }
.cr .cr-guide__body { min-width: 0; }

/* ---------------------------------------------------------------- hero: title + confetti, Kalam line, ribbon, lead; art on the right */
.cr .cr-hero { padding-top: calc(var(--cr-nav) + 40px); }
.cr .cr-hero__inner { position: relative; display: grid; gap: 24px; align-items: center; }
.cr .cr-hero__copy { position: relative; z-index: 1; min-width: 0; }
.cr .cr-deco { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.cr .cr-hero__title { position: relative; width: fit-content; font-size: 33px; line-height: 1.25; letter-spacing: .08em; }
.cr .cr-hero__title::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 46px; height: 46px; margin: -28px 0 0 2px;
  pointer-events: none; transform-origin: 0 60%; background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 13.6 11 4.9' stroke='%23ff9ec0'/%3E%3Cpath d='M10.4 18 19.1 13' stroke='%23ffd75e'/%3E%3Cpath d='M12 24h10' stroke='%234edce9'/%3E%3Cpath d='M10.4 30 19.1 35' stroke='%23ff9ec0'/%3E%3Ccircle cx='22.9' cy='6.1' r='2.2' fill='%23ffd75e' stroke='none'/%3E%3C/svg%3E");
}
.cr .cr-hero__en { margin-top: 4px; font-size: 22px; line-height: 1.15; }
.cr .cr-hero__lead { max-width: 30em; margin-top: 12px; }
.cr .cr-hero__art { display: none; }
.cr .cr-hero__svg { width: 100%; height: auto; }
/* phones: a small drawing top right, beside the title */
.cr .cr-hero__mini { position: absolute; top: -10px; right: -4px; width: clamp(80px, calc(100vw - 278px), 112px); height: auto; aspect-ratio: 3 / 2; }
/* snow: pale and cyan dots and one small flake around the words */
.cr .cr-fl { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cr-snow); }
.cr .cr-fl--2, .cr .cr-fl--5 { width: 5px; height: 5px; background: var(--cr-cyan); }
.cr .cr-fl--3 {
  width: 12px; height: 12px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234edce9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.2l16.4 9.6M3.8 16.8l16.4-9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cr .cr-fl--1 { top: -4px; left: 214px; }
.cr .cr-fl--2 { top: 34px; left: 200px; }
.cr .cr-fl--3 { top: 96px; left: 262px; }
.cr .cr-fl--4 { top: 128px; left: 300px; width: 6px; height: 6px; }
.cr .cr-fl--5 { top: 150px; right: 18px; }
/* ribbon (pink band, navy outline, swallow-tailed ends tucked behind): <p class="cr-ribbon"><span class="cr-ribbon__band"> */
.cr .cr-ribbon { position: relative; z-index: 0; isolation: isolate; display: block; width: fit-content; max-width: calc(100% - 24px); margin: 10px 12px 4px; }
.cr .cr-ribbon__band {
  position: relative; display: block; padding: 4px 14px; border: 2px solid var(--cr-ink); border-radius: 2px;
  background: linear-gradient(#ffd9e6, #ffc9dc); text-align: center; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--cr-ink);
}
.cr .cr-ribbon__band::before, .cr .cr-ribbon__band::after { content: ""; position: absolute; z-index: -1; top: 5px; bottom: -5px; width: 26px; pointer-events: none; }
.cr .cr-ribbon__band::before {
  left: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M1 1H25V39H1L8.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 34.2H25V39H14Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cr .cr-ribbon__band::after {
  right: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M25 1H1V39H25L17.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 34.2H1V39H12Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- cards: white card, coupon ticket (tear line + tinted stub) */
.cr .cr-card { position: relative; min-width: 0; padding: 20px; border: 1.5px solid var(--cr-line); border-radius: 20px; background: #fff; box-shadow: var(--cr-shadow); }
.cr .cr-ticket { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: var(--cr-shadow); }
.cr .cr-ticket::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--cr-edge); border-radius: inherit; pointer-events: none; }
.cr .cr-ticket__main { flex: 1 1 auto; min-width: 0; padding: 16px; }
.cr .cr-ticket__stub { position: relative; padding: 12px 16px 16px; background: var(--cr-stub); border-top: 2px dashed var(--cr-perf); }
/* the two notches show the page's white, with the ticket's edge line around them */
.cr .cr-ticket__stub::before, .cr .cr-ticket__stub::after {
  content: ""; position: absolute; z-index: 1; top: -13px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--cr-edge);
}
.cr .cr-ticket__stub::before { left: -12px; }
.cr .cr-ticket__stub::after { right: -12px; }
.cr .cr-ticket__label { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--cr-text); }
/* the big word top right (the rental tickets' 「9 折」), in navy */
.cr .cr-ticket__big { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; color: var(--cr-ink); font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; }
.cr .cr-ticket__big > span { display: inline-flex; align-items: center; gap: 4px; }
.cr .cr-ticket__big svg { width: 30px; height: 30px; fill: none; stroke: var(--cr-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- round icons, icon rows, four tips */
.cr .cr-ic { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--cr-ice); }
.cr .cr-ic svg { width: 40px; height: 40px; fill: none; stroke: var(--cr-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cr .cr-ic--md { width: 44px; height: 44px; }
.cr .cr-ic--md svg { width: 30px; height: 30px; stroke-width: 2.2; }
.cr .cr-ic--sm { width: 28px; height: 28px; }
.cr .cr-ic--sm svg { width: 20px; height: 20px; stroke-width: 2; }
.cr .cr-ic--yellow { background: var(--cr-yellow-soft); }
.cr .cr-ic--pink { background: var(--cr-pink-soft); }
.cr .cr-ic--white { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cr-line-2); }
.cr .cr-points { display: grid; gap: 8px; line-height: 1.5; }
.cr .cr-points > li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cr .cr-points > li > .cr-ic--sm { margin-top: calc((1.5em - 28px) / 2); }
.cr .cr-kv { display: flex; gap: 8px; min-width: 0; }
.cr .cr-kv__k { flex: 0 0 auto; min-width: 4.4em; color: var(--cr-ink); font-weight: 700; }
.cr .cr-kv__v { min-width: 0; }
.cr .cr-tips { display: grid; gap: calc(var(--cr-bk) + 8px); }
.cr .cr-tip { display: flex; align-items: flex-start; gap: 14px; }
.cr .cr-tip__title { font-size: 18px; line-height: 1.5; }
.cr .cr-tip p { max-width: 38em; margin-top: var(--cr-h3); }

/* ---------------------------------------------------------------- tinted boxes (cyan / yellow / blue) with round picture tiles */
.cr .cr-boxes { display: grid; gap: 16px; }
.cr .cr-box { min-width: 0; padding: 20px; border: 1.5px solid var(--cr-perf); border-radius: 20px; background: #eafafd; color: var(--cr-ink); }
.cr .cr-box--yellow { border-color: #e5c469; background: #fff6d6; }
.cr .cr-box--blue { border-color: #9cc9e3; background: #f1f7fd; }
.cr .cr-box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--cr-ink); }
.cr .cr-box__icon { width: 28px; height: 28px; }
.cr .cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 14px 4px; margin-top: 16px; }
.cr .cr-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 6px 2px 8px;
  border: 0; border-radius: 16px; background: none; color: var(--cr-ink); font-size: 16px; line-height: 1.35;
  text-align: center; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
}
.cr button.cr-tile, .cr a.cr-tile { cursor: pointer; transition: background-color .3s; }
.cr button.cr-tile:hover, .cr a.cr-tile:hover { background: rgba(255, 255, 255, .75); }
.cr .cr-tile[aria-pressed="true"], .cr .cr-tile[aria-current="true"], .cr .cr-tile[aria-selected="true"] { background: var(--cr-cyan-soft); font-weight: 800; }
.cr .cr-tile__art { display: grid; place-items: center; width: 52px; height: 52px; padding: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--cr-line-2); }
.cr .cr-tile__art, .cr .cr-tile__art svg { fill: none; stroke: var(--cr-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cr .cr-tile__art > svg { width: 100%; height: 100%; }
.cr .cr-box--yellow .cr-tile__art { box-shadow: inset 0 0 0 1.5px #edc3d3; }
.cr .cr-tile__photo { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--cr-line-2); }

/* ---------------------------------------------------------------- segmented switch (navy capsule = chosen) */
.cr .cr-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #eef4f8; }
.cr .cr-seg__btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--cr-text);
  font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color .3s, color .3s;
}
.cr .cr-seg__btn:hover { background: #e0ebf2; }
.cr .cr-seg__btn[aria-selected="true"], .cr .cr-seg__btn[aria-pressed="true"] { background: var(--cr-ink); color: #fff; }

/* ---------------------------------------------------------------- folding groups (the rental notice, version d) */
.cr .cr-acc { display: grid; gap: 12px; }
.cr .cr-acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 10px 10px 18px;
  border-radius: 16px; background: var(--cr-band); box-shadow: inset 0 0 0 1.5px var(--cr-line);
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--cr-ink); transition: background-color .3s ease, color .3s ease;
}
.cr .cr-acc__sum:hover { background: #e3f4fa; }
.cr .cr-acc__chev { flex: 0 0 auto; width: 40px; height: 40px; transition: transform .3s; }
.cr .cr-acc__item[open] > .cr-acc__sum .cr-acc__chev { transform: rotate(180deg); }
.cr .cr-acc__item.is-closing > .cr-acc__sum .cr-acc__chev { transform: none; }
.cr .cr-acc__item[open]:not(.is-closing) > .cr-acc__sum { background: var(--cr-cyan-soft); color: var(--cr-blue); }
.cr .cr-acc__body { padding: 16px 4px 10px; }

/* ---------------------------------------------------------------- small bits: tags, count pill, washi label, notes, dots list */
.cr .cr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cr .cr-tag { font-family: var(--cr-sans); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; background: var(--cr-ice); color: var(--cr-ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.cr .cr-tag--cyan { background: var(--cr-cyan-pale); }
.cr .cr-tag--yellow { background: var(--cr-yellow-soft); }
.cr .cr-tag--pink { background: var(--cr-pink-soft); }
.cr .cr-tag--line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cr-line-2); }
.cr .cr-count { font-family: var(--cr-sans); letter-spacing: .02em; vertical-align: .15em; display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--cr-ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.cr .cr-washi {
  display: inline-block; padding: 1px 14px; rotate: -4deg;
  background: repeating-linear-gradient(-45deg, rgba(78, 220, 233, .42) 0 6px, rgba(78, 220, 233, .26) 6px 12px);
  font-family: Kalam, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--cr-en);
}
.cr .cr-washi--pink { rotate: 3deg; background: repeating-linear-gradient(-45deg, rgba(255, 158, 192, .45) 0 6px, rgba(255, 158, 192, .28) 6px 12px); }
.cr .cr-pill { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-radius: 14px; background: var(--cr-cyan-pale); font-weight: 700; line-height: 1.55; color: var(--cr-ink); }
.cr .cr-pill--yellow { background: var(--cr-yellow-soft); }
.cr .cr-pill > svg { width: 20px; height: 20px; margin-top: calc((1.55em - 20px) / 2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr .cr-warn { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1.5px solid #e5b83e; border-left-width: 5px; border-radius: 16px; background: #fff6d6; color: var(--cr-ink); }
.cr .cr-dotlist { display: grid; gap: 10px; }
.cr .cr-dotlist > li { position: relative; padding-left: 18px; }
.cr .cr-dotlist > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--cr-cyan); }

/* ---------------------------------------------------------------- decorations: washi tape, lift-ticket tag */
.cr .cr-tape {
  position: absolute; z-index: 2; width: 64px; height: 18px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 1.2px, transparent 1.7px) 2px 2px / 8px 8px, rgba(255, 158, 192, .45);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 12.5%, calc(100% - 3px) 25%, 100% 37.5%, calc(100% - 3px) 50%, 100% 62.5%,
    calc(100% - 3px) 75%, 100% 87.5%, calc(100% - 3px) 100%, 3px 100%, 0 87.5%, 3px 75%, 0 62.5%, 3px 50%, 0 37.5%, 3px 25%, 0 12.5%);
}
.cr .cr-tape--cyan { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 8px), rgba(78, 220, 233, .42); }
.cr .cr-tape--tl { top: 4px; left: -17px; rotate: -38deg; }
.cr .cr-tape--tr { top: 4px; right: -17px; rotate: 38deg; }
/* a little lift ticket hanging on a string (put a letter or nothing inside) */
.cr .cr-liftag {
  position: relative; display: grid; place-items: end center; width: 28px; height: 38px; padding-bottom: 5px;
  border: 2px solid var(--cr-ink); border-radius: 6px; rotate: 8deg; transform-origin: 50% -14px;
  background:
    radial-gradient(circle at 50% 6px, #fff 0 2.4px, var(--cr-ink) 2.6px 3.7px, transparent 4px),
    linear-gradient(90deg, var(--cr-ink) 55%, transparent 0) 0 11px / 4.4px 1.6px repeat-x,
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px) 0 0 / 100% 11px no-repeat,
    linear-gradient(var(--cr-tag, var(--cr-cyan)) 0 11px, #fff 0);
  color: var(--cr-ink); font-family: Kalam, Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1;
}
.cr .cr-liftag--yellow { --cr-tag: var(--cr-yellow); }
.cr .cr-liftag--pink { --cr-tag: var(--cr-pink); }
.cr .cr-liftag::before {
  content: ""; position: absolute; left: 50%; top: -17px; width: 10px; height: 24px; margin-left: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M5 .5 2.3 20.5Q5 24.2 7.7 20.5Z' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- buttons: blue capsule (main), white capsule with a blue line */
.cr .cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 28px;
  border: 2px solid transparent; border-radius: 999px; background: var(--cr-blue); color: #fff; box-shadow: 3px 4px 0 #c0d9ed;
  font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .3s;
}
.cr .cr-btn:hover { background: var(--cr-blue-2); color: #fff; }
.cr .cr-btn--ink { background: var(--cr-ink); }
.cr .cr-btn .cr-ico { width: 20px; height: 20px; }
.cr .cr-btn-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px;
  border: 2px solid var(--cr-blue); border-radius: 999px; background: #fff; color: var(--cr-blue);
  font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s;
}
.cr .cr-btn-o:hover { background: var(--cr-blue); color: #fff; }
.cr .cr-btn-o--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------- need help? (white card held on by two strips of tape) */
.cr .cr-help__card { position: relative; display: grid; gap: 16px; padding: 24px; border: 1.5px solid var(--cr-line); border-radius: 20px; background: #fff; box-shadow: var(--cr-shadow); }
.cr .cr-help__card::before, .cr .cr-help__card::after {
  content: ""; position: absolute; z-index: 1; width: 64px; height: 18px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 1.2px, transparent 1.7px) 2px 2px / 8px 8px, rgba(255, 158, 192, .45);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 12.5%, calc(100% - 3px) 25%, 100% 37.5%, calc(100% - 3px) 50%, 100% 62.5%,
    calc(100% - 3px) 75%, 100% 87.5%, calc(100% - 3px) 100%, 3px 100%, 0 87.5%, 3px 75%, 0 62.5%, 3px 50%, 0 37.5%, 3px 25%, 0 12.5%);
}
.cr .cr-help__card::before { top: 4px; left: -17px; rotate: -38deg; }
.cr .cr-help__card::after { top: 4px; right: -17px; rotate: 38deg; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 8px), rgba(78, 220, 233, .42); }
.cr .cr-help__title { font-size: 22px; line-height: 1.4; }
.cr .cr-help__text p { max-width: 38em; margin-top: var(--cr-h3); }
.cr .cr-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cr .cr-help__actions > .cr-btn-o { flex: 1 1 150px; }

/* ---------------------------------------------------------------- closing call to action: a gondola, Let's go!!, the question, a blue capsule */
.cr .cr-end { margin-top: var(--cr-sec); }
.cr .cr-end__in { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 14px; width: min(800px, calc(100% - 40px)); margin-inline: auto; }
.cr .cr-end__art { width: 80px; height: 80px; }
.cr .cr-end__art svg { width: 100%; height: 100%; }
.cr .cr-end__copy { position: relative; min-width: 0; }
.cr .cr-end__en { font-size: 22px; line-height: 1.15; }
.cr .cr-end__title { margin-top: 2px; font-size: 26px; line-height: 1.35; }
.cr .cr-end__btn { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 360px; margin-top: 20px; }
/* a little lift ticket hangs just right of the question */
.cr .cr-end__copy::after {
  content: ""; position: absolute; right: -40px; top: -14px; width: 30px; height: 52px; rotate: 9deg; transform-origin: 50% 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 52'%3E%3Cdefs%3E%3CclipPath id='s'%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M15 1 12 19.5M15 1l3 18.5' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z' fill='%234edce9'/%3E%3Cg clip-path='url(%23s)' stroke='%23fff' stroke-opacity='.4' stroke-width='2'%3E%3Cpath d='M-2 14l13 13M4 14l13 13M10 14l13 13M16 14l13 13M22 14l13 13'/%3E%3C/g%3E%3Cpath d='M3 26.5h24v19a4.5 4.5 0 0 1-4.5 4.5h-15A4.5 4.5 0 0 1 3 45.5z' fill='%23fff'/%3E%3Crect x='3' y='14' width='24' height='36' rx='4.5' fill='none' stroke='%2317375a' stroke-width='2'/%3E%3Cpath d='M3.5 26.5h23' stroke='%2317375a' stroke-width='1.5' stroke-dasharray='2.2 2'/%3E%3Ccircle cx='15' cy='20' r='2.6' fill='%23fff' stroke='%2317375a' stroke-width='1.4'/%3E%3Cpath d='M13.3 19.4q1.7 2.6 3.4 0' fill='none' stroke='%2317375a' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M8.5 43.5l4.5-7 3.5 4.5 2.5-3 4.5 5.5z' fill='%23cdf3f8' stroke='%2317375a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- coach dialog (one shared <dialog data-cv-dialog>) */
html:has(.cr dialog[open]) { overflow: hidden; }
.cr .cr-dialog {
  width: min(760px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px); margin: auto; padding: 0; border: 0; border-radius: 20px;
  background: #fff; color: var(--cr-text); box-shadow: 0 24px 60px -24px rgba(23, 55, 90, .6); overflow: auto; overscroll-behavior: contain;
}
.cr .cr-dialog::backdrop { background: rgba(23, 55, 90, .45); }
.cr .cr-dialog[open] { animation: cr-dlg-in .35s var(--cr-ease); }
@keyframes cr-dlg-in { from { opacity: 0; translate: 0 14px; } }
.cr .cr-dialog__close {
  position: sticky; z-index: 3; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 10px -54px auto; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: var(--cr-ink); box-shadow: inset 0 0 0 1.5px var(--cr-line-2), 0 6px 14px -8px rgba(23, 55, 90, .5);
  cursor: pointer; transition: background-color .3s;
}
.cr .cr-dialog__close:hover { background: var(--cr-ice); }
.cr .cr-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.cr .cr-dialog__top { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "fig head" "info info"; gap: 16px; align-items: center; padding: 20px 20px 20px; }
.cr .cr-dialog__fig { grid-area: fig; margin: 0; }
.cr .cr-dialog__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--cr-ice); }
.cr .cr-dialog__head { grid-area: head; min-width: 0; padding-right: 48px; }
.cr .cr-dialog__en { font-size: 18px; line-height: 1.2; }
.cr .cr-dialog__name { margin-top: 4px; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.cr .cr-dialog__info { grid-area: info; min-width: 0; }
.cr .cr-dialog__stub { padding: 18px 20px 24px; background: var(--cr-stub); border-top: 2px dashed var(--cr-perf); }
.cr .cr-dialog__bio-title { font-size: 18px; line-height: 1.5; }
.cr .cr-dialog__bio { margin-top: 8px; }
.cr .cr-dialog__bio p + p { margin-top: .75em; }
.cr .cr-dialog__go { margin-top: 20px; }

/* ---------------------------------------------------------------- motion: only after coaches-rkit.js adds .cr-motion (never without
   JS or with reduced motion). Accents replay each time they come back into view; words never fade or move,
   except cards marked data-cr-reveal="once", which rise in the first time only. */
.cr.cr-motion .cr-head[data-cr-reveal] .cr-head__title::after { transform: rotate(-1deg) scaleX(0); }
.cr.cr-motion .cr-head[data-cr-reveal].is-on .cr-head__title::after { transform: rotate(-1deg) scaleX(1); transition: transform 1.2s var(--cr-ease); }
.cr.cr-motion .cr-deco[data-cr-reveal]:not(.is-on) ~ .cr-hero__copy .cr-hero__title::after { opacity: 0; scale: .3; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on ~ .cr-hero__copy .cr-hero__title::after { transition: scale 1.2s var(--cr-ease) .2s, opacity .8s .2s; }
.cr.cr-motion .cr-deco[data-cr-reveal]:not(.is-on) .cr-fl { opacity: 0; translate: 0 -16px; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on .cr-fl { transition: translate 1.6s var(--cr-ease) .6s, opacity 1.2s .6s; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on .cr-fl--2 { transition-delay: .76s; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on .cr-fl--3 { transition-delay: .92s; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on .cr-fl--4 { transition-delay: 1.08s; }
.cr.cr-motion .cr-deco[data-cr-reveal].is-on .cr-fl--5 { transition-delay: 1.24s; }
/* things hanging in the drawings swing a little when they come into view */
.cr .cr-swing { transform-box: view-box; transform-origin: var(--cr-pivot, 50% 0); }
.cr.cr-motion [data-cr-reveal].is-on .cr-swing { animation: cr-swing 2.8s ease-out .4s both; }
.cr.cr-motion [data-cr-reveal].is-on .cr-swing--late { animation-delay: .7s; }
@keyframes cr-swing { 0% { rotate: 0deg; } 16% { rotate: 7deg; } 40% { rotate: -4.5deg; } 62% { rotate: 2.4deg; } 82% { rotate: -1deg; } 100% { rotate: 0deg; } }
.cr.cr-motion [data-cr-reveal="once"]:not(.is-on) { opacity: 0; translate: 0 16px; }
.cr.cr-motion [data-cr-reveal="once"].is-on { transition: opacity 1.4s var(--cr-ease) var(--cr-delay, 0s), translate 1.4s var(--cr-ease) var(--cr-delay, 0s); }

/* ---------------------------------------------------------------- sizes */
@media (max-width: 389px) {
  .cr .cr-ribbon { margin-inline: 10px; }
  .cr .cr-ribbon__band { padding-inline: 12px; }
  .cr .cr-ribbon__band::before { left: -12px; width: 23px; }
  .cr .cr-ribbon__band::after { right: -12px; width: 23px; }
}
@media (max-width: 374px) {
  .cr .cr-ribbon__band { font-size: 17px; }
}
@media (max-width: 360px) {
  .cr { --cr-w: calc(100% - 32px); }
  .cr .cr-hero__mini { width: clamp(72px, calc(100vw - 268px), 92px); }
  .cr .cr-help__card::before { left: -12px; }
  .cr .cr-help__card::after { right: -12px; }
}
@media (max-width: 359px) {
  .cr .cr-end__in { column-gap: 10px; }
  .cr .cr-end__art { width: 64px; height: 64px; }
  .cr .cr-end__title { font-size: 24px; }
}
@media (max-width: 340px) {
  .cr .cr-hero__mini, .cr .cr-fl--3 { display: none; }
  .cr .cr-fl--4 { top: 18px; left: 250px; }
  .cr .cr-fl--5 { top: 60px; right: 4px; }
  .cr .cr-ribbon__band { font-size: 16px; }
}
@media (min-width: 480px) {
  .cr { --cr-nav: 120px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .cr { --cr-h2: 30px; --cr-pair: 12px; }
  .cr .cr-hero__title { font-size: 36px; }
  .cr .cr-fl--4 { top: 94px; left: 360px; }
  .cr .cr-fl--5 { top: 108px; }
}
@media (min-width: 601px) and (max-width: 1279px) {
  .cr { --cr-w: calc(100% - 160px); }
  .cr .cr-end__in { width: min(800px, calc(100% - 160px)); }
}
@media (min-width: 720px) {
  .cr .cr-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .cr { --cr-h2: 28px; --cr-kalam: 28px; --cr-pair: 2px; --cr-ch: 64px; --cr-sec: 48px; --cr-hd: 16px; --cr-bk: 16px; --cr-h3: 2px; }
  .cr .cr-head__title { line-height: 1.4; }
  .cr .cr-head .cr-en { line-height: 1.15; text-wrap: wrap; }
  .cr .cr-sec--first { padding-top: 24px; }
  .cr .cr-guide__in { padding: calc(var(--cr-sec) / 2) 0; }
  .cr .cr-hero { padding-top: calc(var(--cr-nav) + 16px); }
  .cr .cr-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px; }
  .cr .cr-hero__title { font-size: 48px; }
  .cr .cr-hero__title::after { width: 52px; height: 52px; margin: -31px 0 0 4px; }
  .cr .cr-ribbon { margin: 14px 16px 8px; }
  .cr .cr-ribbon__band { padding: 6px 20px; font-size: 21px; }
  .cr .cr-ribbon__band::before, .cr .cr-ribbon__band::after { top: 6px; bottom: -6px; width: 32px; }
  .cr .cr-ribbon__band::before { left: -18px; }
  .cr .cr-ribbon__band::after { right: -18px; }
  .cr .cr-hero__art { display: block; width: 100%; max-width: 300px; justify-self: end; }
  .cr .cr-hero__mini { display: none; }
  .cr .cr-fl { left: auto; }
  .cr .cr-fl--1 { top: 6px; right: 330px; }
  .cr .cr-fl--2 { top: 56px; right: 300px; }
  .cr .cr-fl--3 { top: 170px; right: 318px; width: 16px; height: 16px; }
  .cr .cr-fl--4 { top: -8px; right: 26px; }
  .cr .cr-fl--5 { top: 132px; right: -10px; }
  .cr .cr-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  .cr .cr-help__card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 32px; }
  .cr .cr-help__text p { margin-top: 6px; }
  .cr .cr-help__actions > .cr-btn-o { flex: 0 0 auto; }
  .cr .cr-end__in { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; }
  .cr .cr-end__art { width: 112px; height: 112px; }
  .cr .cr-end__en { font-size: 28px; }
  .cr .cr-end__title { font-size: 34px; }
  .cr .cr-end__btn { grid-column: auto; width: auto; margin-top: 0; }
  .cr .cr-end__copy::after { right: 4px; top: -24px; }
  .cr .cr-acc { gap: 10px; }
  .cr .cr-dialog__top { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "fig head" "fig info"; grid-template-rows: auto 1fr; align-items: start; gap: 12px 24px; padding: 28px 28px 24px; }
  .cr .cr-dialog__head { padding-top: 6px; }
  .cr .cr-dialog__name { font-size: 28px; }
  .cr .cr-dialog__stub { padding: 22px 28px 28px; }
}
/* phones: the lift ticket hangs inside the question's top right corner (beside Let's go!!), so it is never cut off */
@media (max-width: 767px) {
  .cr .cr-end__copy::after { right: 4px; top: -34px; }
}
/* tablets: the flake sits between the ribbon's end and the drawing, clear of the lead's first line */
@media (min-width: 768px) and (max-width: 1023px) {
  .cr .cr-fl--3 { top: 148px; right: auto; left: 330px; }
}
@media (min-width: 1024px) {
  .cr { --cr-body: 17px; --cr-ch: 96px; --cr-sec: 64px; --cr-hd: 24px; }
  .cr .cr-sec--first { padding-top: 32px; }
  .cr .cr-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; }
  .cr .cr-hero__art { max-width: 330px; }
  .cr .cr-fl--1 { right: 356px; }
  .cr .cr-fl--2 { top: 104px; right: 366px; }
  .cr .cr-fl--3 { right: 344px; }
  .cr .cr-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .cr .cr-tip { flex-direction: column; gap: 12px; }
  .cr .cr-guide__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .cr .cr-guide__in > .cr-head { position: sticky; top: 160px; margin-bottom: 0; }
}
@media (min-width: 1280px) {
  .cr { --cr-h2: 30px; --cr-kalam: 32px; }
  .cr .cr-hero__title { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr *, .cr *::before, .cr *::after { transition: none !important; animation: none !important; }
}