/* =====================================================================
   ROUND 9 · Julia facts and work photo slot, guarantee beside the timer,
   captions on the before/after pairs, the bag section without the checklist
   ===================================================================== */
.julia__facts { font-family: var(--sc-font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text); padding: 10px 0; border-block: 1px solid var(--line); }
.julia__photos { padding-bottom: 46%; }
.julia__work { position: absolute; left: -4%; bottom: 0; width: 52%; margin: 0; rotate: -3deg; }
.julia__work-ph { aspect-ratio: 4 / 3; border: 1.5px dashed rgb(28 25 22 / 0.4); border-radius: var(--r); background: rgb(246 243 238 / 0.9);
  display: grid; place-items: center; padding: 14px; text-align: center; font-family: var(--sc-font-mono); font-size: 0.72rem; line-height: 1.5; color: var(--soft); }
.julia__photo2 { bottom: 24%; }

/* the guarantee sits right under the clock: the price holds a day, the money back holds two weeks */
.guarantee--deal { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--white); }
.guarantee--deal h3 { margin: 0 0 10px; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--text); }
.guarantee--deal .guarantee__lead { font-weight: 700; color: var(--text); margin-bottom: 8px !important; }
.guarantee--deal p:not([class]) { color: var(--soft); line-height: 1.6; }
.guarantee-note { align-self: center; color: var(--soft); line-height: 1.6; }
.guarantee-note a { color: #EFEAE3; text-decoration-color: #B0525C; text-underline-offset: 0.25em; }

/* captions on the pairs */
.fpair { grid-template-rows: auto auto; }
.fpair__cap { grid-column: 1 / -1; padding: 6px 2px 0; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--soft); }

/* the bag section without its checklist starts straight with the quote and the numbers */
.bag .bag__why { margin-top: 0; }

@media (max-width: 860px) {
  .julia__photos { padding-bottom: 40%; }
  .julia__work { width: 50%; left: 0; }
}