/* ==========================================================================
   Home page visuals (assets/js/home-visuals.js): the staffing sky in the hero,
   "one record" at the end of The problem, the Monday-morning note in the close.
   Sunrise colours; the app-style cards stay white like the rest of the product pictures.
   ========================================================================== */
:root { --v-paper: #fffaf1; --v-teal: #087e78; --v-rust: #af4324; --v-app: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
:root[data-theme="dark"] { --v-paper: #33231a; --v-teal: #4fc7bd; --v-rust: #e2774f; }
@keyframes v-twinkle { 50% { opacity: .2; } }
@keyframes v-pulse { 50% { opacity: .45; } }
@keyframes v-blink { 50% { opacity: 0; } }

/* ---------- Hero · staffing sky ----------
   The sky colours, dawn glow and twinkling starfield are HTML layers blended by the GPU (opacity only);
   the SVG on top holds the stars, labels and ground and only repaints when the story changes. */
.hero-sky { width: 100%; max-width: 480px; justify-self: center; }
.sky-frame { position: relative; aspect-ratio: 460 / 520; border-radius: 20px; overflow: hidden; isolation: isolate;
  box-shadow: 0 28px 48px -14px rgba(40, 24, 60, .34), 0 6px 14px -6px rgba(40, 24, 60, .18); }
.sky-layer { position: absolute; inset: 0; }
.sky-night { background: linear-gradient(180deg, #0f1730 0%, #262a4e 60%, #3a2d48 86%); }
.sky-day { background: linear-gradient(180deg, #3a3a68 0%, #a86f8c 60%, #f3a36c 86%); opacity: 0; will-change: opacity; }
.sky-glow { background: radial-gradient(111% 61.5% at 50% 125%, rgba(255, 180, 112, .95), rgba(255, 180, 112, 0)); opacity: .12; will-change: opacity; }
.sky-field { will-change: opacity; }
.sky-twinkle { background: no-repeat 0 0 / 100% 100%; animation: v-twinkle 4.5s ease-in-out infinite; will-change: opacity; }
.sky-twinkle:nth-child(2) { animation-duration: 5.3s; animation-delay: -1.8s; }
.sky-twinkle:nth-child(3) { animation-duration: 6.1s; animation-delay: -3.4s; }
.sky-frame.paused .sky-twinkle { animation-play-state: paused; }
.sky-frame.wrap .sky-day, .sky-frame.wrap .sky-glow, .sky-frame.wrap .sky-field { transition: opacity 1.2s ease; }
.sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  font-family: var(--font); }
.sky-fg { transition: opacity .5s ease; }
.sky-frame.fading .sky-fg { opacity: 0; }
.sky-link { stroke: rgba(255, 255, 255, .55); stroke-width: 1.1; transition: opacity .6s .5s; }
.sky-link.off { opacity: 0; transition-delay: 0s; }
.sky-client { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 12.5px; fill: rgba(255, 255, 255, .62); transition: opacity .6s; }
.sky-client.dim { opacity: .25; }
.sky-star .halo { fill: url(#sky-halo); }
.sky-star .core { fill: #fff; }
.sky-star text { font-size: 10.5px; font-weight: 500; fill: rgba(255, 255, 255, .9); }
.sky-star.move { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.sky-star.fall .core { fill: #ffb27a; }
.sky-star.fall .halo { fill: url(#sky-halo-warm); }
.sky-ground { fill: #1c120d; }
.sky-ridge { fill: none; stroke: rgba(255, 178, 110, .6); stroke-width: 1.2; }
.sky-title { font-family: Georgia, "Times New Roman", serif; font-size: 25px; fill: #fff; }
.sky-sub { font-size: 12px; fill: rgba(255, 255, 255, .82); }
.sky-bench { font-family: Georgia, "Times New Roman", serif; font-size: 15px; fill: #fbeee0; }
.sky-cost { font-family: Georgia, "Times New Roman", serif; font-size: 20px; fill: #ffb27a; }
.sky-small { font-size: 10px; fill: rgba(251, 238, 224, .75); }
.sky-hint { font-size: 11px; fill: rgba(255, 255, 255, .72); transition: opacity .4s; }
.sky-hint.gone { opacity: 0; }
/* Phones: the sky shrinks to about 350px, so its labels are set larger to stay readable,
   and the names of people on the bench sit above their stars to clear the bench line. */
@media (max-width: 520px) {
  .sky-title { font-size: 30px; }
  .sky-sub { font-size: 15px; }
  .sky-client { font-size: 15px; }
  .sky-star text { font-size: 13.5px; }
  .sky-star.fall text { transform: translateY(-33px); font-size: 12.5px; }
  .sky-bench { font-size: 18px; }
  .sky-cost { font-size: 23px; }
  .sky-small { font-size: 12px; }
  .sky-hint { font-size: 13px; }
}

/* ---------- The problem · the answer band ---------- */
.answer { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.answer-copy { display: grid; gap: 14px; align-content: center; }
.answer-copy h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--heading-ink); }
.answer-copy h3 span { color: var(--heading-teal); }
.answer-copy p { color: var(--muted); max-width: 44ch; }
.answer-visual { width: 100%; max-width: 520px; justify-self: center; }
@media (max-width: 900px) { .answer { grid-template-columns: 1fr; } }

.rc { position: relative; height: 446px; font-family: var(--v-app); }
.rc > * { transition: opacity .55s ease, transform .9s cubic-bezier(.6, 0, .2, 1); }
.rc-cap { position: absolute; top: 0; left: 0; right: 0; height: 30px; margin: 0; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 20px; color: var(--heading-ink); }
.rc-cap span { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.rc-cap .b { color: var(--heading-teal); }
.rc[data-s="1"] .rc-cap .a, .rc[data-s="2"] .rc-cap .a, .rc[data-s="3"] .rc-cap .b { opacity: 1; }
.rc-card, .rc-rec { position: absolute; top: 52px; background: #fff; border: 1px solid #e5e8ef; border-radius: 12px; padding: 12px 14px 6px; color: #1b2330;
  box-shadow: 0 1px 2px rgba(17, 23, 38, .05), 0 18px 40px -18px rgba(17, 23, 38, .25); }
.rc-card { width: 46%; opacity: 0; }
.rc-card.ats { left: 0; transform: rotate(-3deg) translateY(8px); }
.rc-card.psa { right: 0; transform: rotate(2.5deg); }
.rc-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; font-size: 12px; font-weight: 600; color: #5b6474; }
.rc-h i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #8a94a6; border-radius: 4px; padding: 2px 6px; }
.rc-h b { color: #1b2330; font-size: 13.5px; }
.rc-h span { margin-left: auto; font-size: 11px; color: #5b6474; }
.rc dl { margin: 0; }
.rc dl div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #eef0f4; font-size: 12.5px; }
.rc dt { color: #5b6474; }
.rc dd { margin: 0; font-weight: 600; text-align: right; transition: filter .5s, opacity .5s; }
.rc .x dd { color: #b3261e; background: #fdecea; border-radius: 4px; padding: 0 6px; }
.rc .ok dd { color: #046c4e; }
.rc-ne { position: absolute; top: 138px; left: 50%; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; display: grid; place-items: center; background: var(--v-rust); color: #fff; font-size: 21px; z-index: 2; opacity: 0; box-shadow: 0 0 0 6px rgba(175, 67, 36, .15); }
.rc-rec { left: 8%; right: 8%; opacity: 0; transform: scale(.88); border-color: rgba(31, 111, 235, .35); box-shadow: 0 0 0 6px rgba(31, 111, 235, .08), 0 24px 50px -20px rgba(17, 23, 38, .35); }
.rc-line { position: absolute; top: 306px; left: 0; right: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); opacity: 0; }
.rc-line li { position: relative; padding-top: 28px; text-align: center; font-family: var(--font); }
.rc-line li::before { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); z-index: 1; transition: background .4s, border-color .4s, box-shadow .4s; }
.rc-line li::after { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--v-teal) 50%, var(--line) 50%) 100% 0 / 200% 100% no-repeat; transition: background-position .5s ease; }
.rc-line li:last-child::after { display: none; }
.rc-line li.lit::before { background: var(--v-teal); border-color: var(--v-teal); box-shadow: 0 0 0 5px rgba(8, 126, 120, .15); }
.rc-line li.lit::after { background-position: 0 0; }
.rc-line b { display: block; font-size: 13px; color: var(--ink); }
.rc-line span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.rc-foot { position: absolute; top: 408px; left: 0; right: 0; margin: 0; text-align: center; font: 12px var(--font); color: var(--muted); opacity: 0; }
.rc-foot b { color: var(--v-rust); letter-spacing: .04em; }
.rc-replay { position: absolute; right: 0; bottom: 0; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12px var(--font); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.rc-replay:hover { color: var(--ink); border-color: var(--line-2); }
.rc[data-s="1"] .rc-card, .rc[data-s="1"] .rc-ne, .rc[data-s="2"] .rc-card { opacity: 1; }
.rc[data-s="1"] .rc-ne { animation: v-pulse 1.2s ease-in-out infinite; }
.rc[data-s="2"] .ats { transform: translateX(54%) rotate(0); }
.rc[data-s="2"] .psa { transform: translateX(-54%) rotate(0); }
.rc[data-s="2"] .x dd { filter: blur(2px); opacity: .35; }
.rc[data-s="3"] .ats { transform: translateX(54%) scale(.9); }
.rc[data-s="3"] .psa { transform: translateX(-54%) scale(.9); }
.rc[data-s="3"] .rc-rec { opacity: 1; transform: none; }
.rc[data-s="3"] .rc-line, .rc[data-s="3"] .rc-foot { opacity: 1; }
@media (max-width: 420px) { .rc-line b { font-size: 11.5px; } .rc-line span { font-size: 10px; } .rc dl div { font-size: 11.5px; } }

/* ---------- Close · two columns: the ask, and the Monday-morning note ---------- */
.close-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; text-align: left; }
.close-grid .display { margin-inline: 0; }
.close-grid .lede { margin: 20px 0 28px; }
.close-note { width: 100%; max-width: 480px; justify-self: center; }
@media (max-width: 900px) { .close-grid { grid-template-columns: 1fr; text-align: center; } .close-grid .display { margin-inline: auto; } .close-grid .lede { margin-inline: auto; } }

.nt { position: relative; height: 500px; text-align: left; }
.nt-note { position: relative; margin: 14px 6px 0; padding: 26px 24px 16px 48px; min-height: 290px; border-radius: 4px; transform: rotate(-1.2deg);
  background-color: var(--v-paper);
  background-image: linear-gradient(90deg, transparent 33px, rgba(175, 67, 36, .35) 33px, rgba(175, 67, 36, .35) 34px, transparent 34px),
    repeating-linear-gradient(transparent 0 27px, rgba(8, 126, 120, .14) 27px 28px);
  background-position: 0 0, 0 26px;
  box-shadow: 0 1px 2px rgba(67, 41, 30, .08), 0 24px 44px -18px rgba(67, 41, 30, .35); }
.nt-tape { position: absolute; top: -12px; left: 50%; width: 100px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(231, 203, 176, .78); box-shadow: 0 1px 2px rgba(67, 41, 30, .12); }
.nt-date { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 14px; line-height: 28px; color: var(--v-rust); }
.nt-l { margin: 0; min-height: 28px; font-family: Georgia, "Times New Roman", serif; font-size: 18.5px; line-height: 28px; color: var(--heading-ink); }
.nt-k { cursor: pointer; outline: none; text-decoration: underline; text-decoration-color: var(--v-rust); text-decoration-thickness: 2px; text-underline-offset: 5px; border-radius: 3px; transition: background .25s; }
.nt-k.on { background: rgba(175, 67, 36, .13); }
.nt-k:focus-visible { outline: 2px solid var(--v-rust); outline-offset: 2px; }
.nt-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: v-blink 1s steps(1) infinite; }
.nt-sig { margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: var(--muted); }
.nt-ev { position: absolute; left: 7%; right: 7%; bottom: 6px; height: 150px; }
.ev { position: absolute; left: 0; right: 0; top: 0; padding: 12px 14px; background: #fff; border: 1px solid #e5e8ef; border-radius: 10px; font: 12.5px/1.4 var(--v-app); color: #1b2330;
  box-shadow: 0 14px 30px -16px rgba(17, 23, 38, .3); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.ev.on { opacity: 1; transform: none; }
.ev-h { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #5b6474; }
.ev-r { display: grid; grid-template-columns: 82px 1fr 44px; align-items: center; gap: 8px; height: 21px; font-size: 11.5px; }
.ev-r i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #0072B2 calc(var(--e) * 100%), #f1f3f7 0); }
.ev-r em { font-style: normal; font-size: 11px; text-align: right; color: #5b6474; }
.ev-lane { display: flex; gap: 4px; height: 26px; margin: 4px 0 8px; }
.ev-lane i { flex: 0 0 calc(var(--w) * 100%); display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font-style: normal; font-size: 11px; white-space: nowrap; overflow: hidden; }
.ev-lane .cur { background: #0072B2; color: #fff; }
.ev-lane .nx { background: #e6f4ee; color: #046c4e; border: 1px solid #9fd6bf; }
.ev-lane .gap { background: repeating-linear-gradient(135deg, #fdecea 0 6px, #fff 6px 12px); color: #b3261e; border: 1px dashed #e8a29b; }
.ev-s { margin: 0; font-size: 11.5px; color: #5b6474; }
.ev-t div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #eef0f4; }
.ev-t div:first-child { border-top: 0; }
.ev-t .bad b { color: #b3261e; }
@media (max-width: 520px) { .rc { height: 478px; } }
:root[data-theme="dark"] .nt-k.on { background: rgba(226, 119, 79, .3); }