/* TubHotels Research. A separate file like about.css and guides.css.
   Update-99 (Bosko, 10 Oct 2026): built from the design handoffs "Research page"
   and "Blog elements" (On this page, Key findings). Inter on this site has
   weights 400 to 700, so the design's 800 is set as 700. Paragraph sizes come
   from the site tokens --fs-p and --fs-dek in styles.css. */
.rs-main {
  --rs-ink: #1a1c22; --rs-body: #3b3e45; --rs-meta: #6b6e76; --rs-num: #8a8d94;
  --rs-border: #e3e1db; --rs-divider: #efede8; --rs-chip: #f4f2ed; --rs-soft: #f7f5f0;
  --rs-yellow: #f1b302; --rs-hl: #fdf0c4;
  padding-bottom: 64px; color: var(--rs-ink);
}
.rs-main .breadcrumbs { margin-top: 14px; }
.rs-head, .rs-findings, .rs-toc, .rs-article .research-body, .rs-article .faq, .rs-sec { max-width: 780px; }

/* header */
.rs-head { margin: 18px 0 32px; display: flex; flex-direction: column; gap: 16px; }
.rs-head h1 { font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.rs-hub-head h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.08; }
.rs-dek p { font-size: var(--fs-dek); line-height: 1.65; color: var(--rs-body); margin: 0 0 12px; }
.rs-dek p:last-child { margin-bottom: 0; }
.rs-meta { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rs-meta); }
.rs-meta a { color: var(--rs-ink); font-weight: 600; text-underline-offset: 3px; }
.rs-meta-dot { display: flex; align-items: center; gap: 8px; }
.rs-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-yellow); }

/* key findings */
.rs-findings { margin: 0 0 20px; padding: 26px 28px; background: #fff; border: 1px solid var(--rs-border); border-radius: 14px; }
.rs-findings h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 18px; }
.rs-findings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rs-findings li { margin: 0; font-size: var(--fs-p); line-height: 1.6; color: var(--rs-body); text-wrap: pretty; }
.rs-stat { font-weight: 700; color: var(--rs-ink); background: var(--rs-hl); padding: 1px 6px; border-radius: 5px; margin-right: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* on this page: closed until clicked; the links are in the HTML either way */
.rs-toc { margin: 0 0 36px; background: #fff; border: 1px solid var(--rs-border); border-radius: 14px; padding: 22px 24px; }
.rs-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -10px 0; }
.rs-toc summary::-webkit-details-marker { display: none; }
.rs-toc-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--rs-ink); }
.rs-chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rs-chip); display: grid; place-items: center; }
.rs-chev::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--rs-ink); border-bottom: 2px solid var(--rs-ink);
  transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.rs-toc details[open] .rs-chev::before { transform: rotate(-135deg); margin-top: 4px; }
.rs-toc summary:focus-visible { outline: 2px solid var(--rs-yellow); outline-offset: 4px; border-radius: 8px; }
.rs-toc ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.rs-toc li { margin: 0; }
.rs-toc a { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rs-divider);
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--rs-ink); text-decoration: none; text-wrap: pretty; }
.rs-toc a:hover { text-decoration: underline; text-decoration-color: var(--rs-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rs-toc-n { min-width: 18px; font-size: 12px; font-weight: 700; color: var(--rs-num); font-variant-numeric: tabular-nums; }

/* body */
.research-body h2 { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; margin: 38px 0 12px; scroll-margin-top: 96px; }
.research-body p, .research-body li { font-size: var(--fs-p); line-height: 1.65; color: var(--rs-body); }
.research-body ul { padding-left: 20px; }
.rs-table { margin: 16px 0 10px; border-radius: 12px; }
.rs-table table { margin: 0; font-size: 15px; }
.rs-table th { background: var(--rs-soft); font-size: 14px; font-weight: 600; color: var(--rs-ink); padding: 10px 12px;
  border-bottom: 1px solid var(--rs-border); text-align: left; }
.rs-table td { padding: 9px 12px; border-bottom: 1px solid var(--rs-divider); font-variant-numeric: tabular-nums; }
.rs-table tr:last-child td { border-bottom: 0; }
.rs-table td.rs-bar { background: linear-gradient(90deg, rgba(241, 179, 2, .22) calc(var(--p) * 1%), transparent 0); font-weight: 600; }
.rs-method { margin: 40px 0 8px; padding: 4px 24px 12px; background: var(--rs-soft); border: 1px solid var(--rs-border); border-radius: 14px; }
.rs-method h2 { margin-top: 18px; }
.rs-method li, .rs-method p { font-size: 15px; line-height: 1.6; }
.rs-article .faq summary { font-size: 16px; }

/* hub */
.rs-sec { margin: 0 0 clamp(40px, 6vw, 56px); }
.rs-sec h2 { font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 18px; }
.rs-sec > p { font-size: var(--fs-p); line-height: 1.65; color: var(--rs-body); margin: 0 0 18px; }
.rs-sec > p a { color: var(--rs-ink); font-weight: 600; text-decoration-color: var(--rs-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rs-sec > p a:hover { background: var(--rs-hl); }
.rs-studies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rs-studies li { margin: 0; }
.rs-study { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 3.2vw, 28px); background: #fff;
  border: 1px solid var(--rs-border); border-radius: 14px; color: var(--rs-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rs-study:hover { border-color: var(--rs-ink); box-shadow: 0 6px 20px rgba(26, 28, 34, .08); color: var(--rs-ink); }
.rs-study-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rs-study h3 { margin: 0; font-size: clamp(19px, 2.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.rs-arrow { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--rs-yellow); display: grid; place-items: center;
  font-size: 18px; font-weight: 700; line-height: 1; }
.rs-study-about { font-size: var(--fs-p); line-height: 1.6; color: var(--rs-body); }
.rs-study-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--rs-divider);
  font-size: 14px; color: var(--rs-meta); }
.rs-study-meta b { font-weight: 600; color: var(--rs-ink); }
.rs-chip { font-weight: 700; color: var(--rs-ink); background: var(--rs-hl); padding: 2px 8px; border-radius: 5px; }
.rs-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rs-rules li { margin: 0; padding: 20px; border: 1px solid var(--rs-border); border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.rs-n { font-size: 12px; font-weight: 700; color: var(--rs-num); font-variant-numeric: tabular-nums; }
.rs-rules h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.rs-rules p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rs-body); }
.rs-cite-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 16px 16px 20px; background: var(--rs-soft); border: 1px solid var(--rs-border); border-radius: 14px; }
.rs-cite-box p { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--rs-ink); }
.rs-copy { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--rs-ink); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rs-copy:hover { background: #000; }

/* phone */
@media (max-width: 640px) {
  .rs-head h1 { font-size: 28px; line-height: 1.18; }
  .rs-hub-head h1 { font-size: 32px; }
  .rs-meta { font-size: 13px; }
  .research-body h2 { font-size: 22px; }
  .rs-findings { padding: 20px 18px; }
  .rs-findings h2 { font-size: 18px; margin-bottom: 14px; }
  .rs-findings ul { gap: 14px; }
  .rs-toc { padding: 16px 18px; }
  .rs-toc ol { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .rs-toc a { padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .rs-table table { font-size: 13px; }
  .rs-table th { font-size: 12px; }
  .rs-table th, .rs-table td { padding: 7px; white-space: normal; }
  .rs-method { padding: 4px 16px 10px; }
  .rs-article .faq summary { font-size: 15px; }
}

/* Update-100: the jacuzzi guide (/how-to-use-hotel-jacuzzi/) uses this look */
.gu-article .research-body h3 { font-size: 17px; margin: 0 0 4px; }
.gu-photo { margin: 22px 0 26px; max-width: 780px; }
.gu-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; background: var(--rs-soft); }
.gu-photo figcaption, .gu-fig figcaption { margin-top: 8px; font-size: 13.5px; color: var(--rs-meta); }
.gu-fig { margin: 20px 0 26px; padding: 18px 18px 14px; border: 1px solid var(--rs-border); border-radius: 14px; background: #fff; }
.gu-fig svg { display: block; width: 100%; height: auto; }
.gu-steps { list-style: none; margin: 18px 0 24px; padding: 0; counter-reset: gu; display: flex; flex-direction: column; gap: 12px; }
.gu-steps li { counter-increment: gu; position: relative; padding: 16px 18px 14px 58px; border: 1px solid var(--rs-border); border-radius: 14px; background: #fff; }
.gu-steps li::before { content: counter(gu); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rs-hl); color: var(--rs-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.gu-steps li p { margin: 0; }
.gu-dl { margin: 16px 0 24px; border-top: 1px solid var(--rs-divider); }
.gu-dl > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rs-divider); }
.gu-dl dt { font-weight: 700; font-size: 15.5px; color: var(--rs-ink); }
.gu-dl dd { margin: 0; font-size: var(--fs-p); line-height: 1.6; color: var(--rs-body); }
.gu-box { margin: 4px 0 28px; padding: 6px 24px 8px; background: var(--rs-soft); border: 1px solid var(--rs-border); border-radius: 14px; }
.gu-article .research-body .gu-box h3 { margin: 16px 0 8px; }
.gu-box ol { margin: 0 0 14px; padding-left: 22px; }
.gu-box li { margin: 0 0 6px; }
.gu-sources ul { padding-left: 18px; }
.gu-sources a { color: var(--rs-ink); text-underline-offset: 2px; word-break: break-word; }
@media (max-width: 640px) {
  .gu-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gu-steps li { padding: 14px 14px 12px 52px; }
  .gu-steps li::before { left: 13px; top: 13px; }
  .gu-fig { padding: 12px 10px 10px; }
  .gu-box { padding: 4px 16px 6px; }
}
.gu-legend { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: lg; display: grid; gap: 6px; }
.gu-legend li { counter-increment: lg; display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: var(--rs-body); }
.gu-legend li::before { content: counter(lg); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--rs-ink); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center; transform: translateY(4px); }