/* =====================================================================
   Beyond Journey - Senior-Friendly Holidays (/senior-friendly-holidays)
   ---------------------------------------------------------------------
   The designer's second senior mock-up (2026-10-14, "design kro as it
   is"), section for section: the cream banner with the couple on the
   right, the five promises on a white card over its foot, "Discover
   More, Together" beside a polaroid collage and its round stamp, six
   round experiences between hairlines, four destinations with their
   names over the photo, and the closing band with the photo on the left
   and leaves on the right.
   Its layout and its deep-green-and-copper colours - in the SITE'S OWN
   TYPE (the designer, 2026-10-13: "font style or font size website m jo
   use h woi lo"): Poppins at 400/500/600, the hero at 40 / 34 / 28 /
   26px, section titles 26 / 23 / 20px, kickers 12px caps, running text
   13.5-14.5px, buttons 13px. Only the round stamp is hand-written.
   The same bones as css/bj-group-journeys.css, kept as its own file so a
   change asked for on one page never moves the other.
   Scoped to .sfh; markup in Areas/Booking/Views/Pages/SeniorFriendlyHolidays.cshtml.
   ===================================================================== */

.sfh {
  --sfh-green: #1f3d33;
  --sfh-green-dk: #142c24;
  --sfh-green-ico: #2c5546;
  --sfh-copper: #8a4526;
  --sfh-copper-dk: #723719;
  --sfh-tint: #edf1ea;
  --sfh-hero: #f7f2e8;
  --sfh-cream: #fbf8f2;
  --sfh-ink: #1b2e28;
  --sfh-body: #5a6377;
  --sfh-line: #e7e1d4;
  --sfh-leaf: #6f8a68;
  --sfh-r: 14px;
  --sfh-ease: cubic-bezier(.2, .7, .2, 1);
  --sfh-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  background: var(--sfh-cream);
  color: var(--sfh-body);
  font-family: 'Poppins', sans-serif;
  overflow-x: clip;
}

/* style.css pads every <section> 72/80px; each band here sets its own */
.sfh section { position: relative; padding: 56px 0; }
.sfh section > .container { position: relative; z-index: 1; }
.sfh p { margin: 0; }
.sfh h1, .sfh h2, .sfh h3 { color: var(--sfh-ink); letter-spacing: -.02em; font-weight: 600; margin: 0; }
.sfh h1 em, .sfh h2 em { font-style: normal; color: var(--sfh-copper); }

/* the spaced capitals over a title, and the small titles drawn in them */
.sfh .sfh-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sfh-ink); line-height: 1.5; }
.sfh .sfh-kicker--copper { color: var(--sfh-copper); }
.sfh .sfh-label { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sfh-ink); line-height: 1.4; }

/* ---- buttons: deep green pills, one in copper ------------------- */
.sfh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--sfh-green); color: #fff !important;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none !important; box-shadow: 0 12px 24px -14px rgba(20, 44, 36, .9);
  transition: transform .2s var(--sfh-ease), background-color .2s, color .2s;
}
.sfh-btn i, .sfh-btn svg { font-size: 12px; }
.sfh-btn:hover { background: var(--sfh-green-dk); transform: translateY(-2px); }
.sfh-btn--copper { background: var(--sfh-copper); box-shadow: 0 12px 24px -14px rgba(114, 55, 25, .9); }
.sfh-btn--copper:hover { background: var(--sfh-copper-dk); }
.sfh-btn--line { min-height: 38px; padding: 0 16px; font-size: 12.5px; gap: 8px; background: transparent; color: var(--sfh-green) !important; border-color: var(--sfh-green); box-shadow: none; }
.sfh-btn--line:hover { background: var(--sfh-green); color: #fff !important; }

/* line icons, the leaves */
.sfh-ico { display: block; width: 40px; height: 40px; color: var(--sfh-green-ico); flex: 0 0 auto; }
.sfh-leaf { position: absolute; z-index: 0; color: var(--sfh-leaf); pointer-events: none; }
.sfh-leaf--branch { width: 120px; height: 220px; opacity: .42; }
.sfh-leaf--line { width: 110px; height: 143px; opacity: .5; }

/* =====================================================================
   1. Banner - the words on cream, the couple on the right fading into it
   ===================================================================== */
.sfh .sfh-hero {
  min-height: 560px; display: flex; align-items: center; padding: 56px 0 150px;
  background: linear-gradient(180deg, #f9f5ec 0%, var(--sfh-hero) 100%);
  isolation: isolate;
}
.sfh-hero__ph { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 64%; margin: 0; }
.sfh-hero__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 13%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 13%, #000 30%);
}
.sfh-hero__copy { max-width: 540px; }
.sfh .sfh-hero .sfh-kicker { letter-spacing: .18em; }
.sfh .sfh-hero h1 { margin: 4px 0 14px; font-size: 40px; line-height: 1.12; }
.sfh .sfh-hero__sub { margin-bottom: 14px; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--sfh-ink); letter-spacing: -.01em; }
.sfh .sfh-hero__lead { max-width: 420px; margin-bottom: 26px; font-size: 14px; line-height: 1.7; color: #474c5e; }
.sfh-leaf--hero { left: -44px; top: 60px; transform: rotate(14deg); }
.sfh-leaf--hero2 { left: -30px; bottom: 120px; transform: rotate(-150deg) scale(.8); opacity: .3; }

/* the breadcrumb - "Home / Holidays / Senior-Friendly Holidays" - as every
   designed style page shows it (the designer, 2026-10-13) */
.sfh .sfh-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--sfh-body);
}
.sfh .sfh-crumbs a { color: var(--sfh-ink); text-decoration: none; }
.sfh .sfh-crumbs a:hover { color: var(--sfh-copper); }
.sfh .sfh-crumbs a + a::before, .sfh .sfh-crumbs span::before { content: "/"; margin-right: 8px; color: rgba(27, 46, 40, .35); }

/* =====================================================================
   2. The five promises - a white card over the banner's foot
   ===================================================================== */
.sfh .sfh-promise { padding: 0; z-index: 3; }
.sfh .sfh-promise__row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: -98px 0 0; padding: 24px 10px; list-style: none;
  background: #fff; border-radius: 24px; box-shadow: 0 24px 50px -30px rgba(20, 44, 36, .45);
}
.sfh-promise__row li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 12px; text-align: center; }
.sfh-promise__row li + li { border-left: 1px solid var(--sfh-line); }
.sfh-promise__row .sfh-ico { margin-bottom: 6px; }
.sfh-promise__row strong { font-size: 13.5px; font-weight: 600; color: var(--sfh-ink); line-height: 1.3; }
.sfh-promise__row span { max-width: 170px; font-size: 12.5px; line-height: 1.5; }

/* =====================================================================
   3. Discover more, together - words beside a polaroid collage
   ===================================================================== */
.sfh .sfh-discover { padding: 64px 0; }
.sfh-discover__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.sfh .sfh-discover h2 { margin-bottom: 16px; font-size: 26px; line-height: 1.22; }
.sfh .sfh-discover__copy > p:not(.sfh-kicker) { max-width: 460px; margin-bottom: 26px; font-size: 14px; line-height: 1.7; }
.sfh-leaf--discover { left: -40px; top: 30px; transform: rotate(18deg); }

.sfh-collage { position: relative; height: 420px; }
.sfh .sfh-polaroid {
  position: absolute; margin: 0; padding: 8px; background: #fff; border-radius: 3px;
  box-shadow: 0 2px 4px rgba(27, 46, 40, .06), 0 22px 40px -22px rgba(27, 46, 40, .5);
}
.sfh-polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.sfh-polaroid--a { left: 2%; top: 30px; width: 50%; height: 360px; transform: rotate(-3deg); z-index: 1; }
.sfh-polaroid--a img { object-position: 50% 45%; }
.sfh-polaroid--b { left: 54%; top: 0; width: 34%; height: 190px; transform: rotate(3deg); z-index: 2; }
.sfh-polaroid--b img { object-position: 50% 62%; }
.sfh-polaroid--c { left: 46%; top: 214px; width: 46%; height: 196px; transform: rotate(4deg); z-index: 3; }
.sfh-polaroid--c img { object-position: 40% 50%; }

/* the round stamp - "New Places, New Friends, New Stories" and a heart */
.sfh .sfh-stamp {
  position: absolute; right: -40px; top: 150px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 134px; height: 134px; margin: 0; border-radius: 50%;
  border: 1.5px solid rgba(138, 69, 38, .4); outline: 1px solid rgba(138, 69, 38, .18); outline-offset: 4px;
  background: rgba(251, 248, 242, .94); transform: rotate(-10deg);
  font-family: var(--sfh-script); font-size: 13px; line-height: 1.3; color: #4a3a30; text-align: center;
}
.sfh-stamp svg { width: 18px; height: 18px; margin-top: 4px; color: var(--sfh-copper); }
.sfh-leaf--collage { right: -26px; bottom: -34px; transform: rotate(-24deg); }
.sfh-leaf--collage2 { left: 40%; bottom: -46px; transform: rotate(60deg) scale(.7); opacity: .4; }

/* =====================================================================
   4. Experiences designed for you - six round photos between hairlines
   ===================================================================== */
.sfh .sfh-exps { padding: 40px 0 36px; background: #fff; }
.sfh .sfh-exps .sfh-label { margin-bottom: 22px; }
.sfh-exps__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sfh .sfh-exp {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 0 8px; border: 0; background: none; text-align: center; cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.sfh-exp + .sfh-exp { border-left: 1px solid var(--sfh-line); }
.sfh-exp:focus-visible { outline: 2px solid var(--sfh-green); outline-offset: 4px; border-radius: 8px; }
.sfh-exp__ph {
  display: block; width: 100%; max-width: 150px; aspect-ratio: 1; margin-bottom: 12px; overflow: hidden;
  border-radius: 50%; background: var(--sfh-tint);
  box-shadow: 0 0 0 4px #fff, 0 14px 26px -18px rgba(27, 46, 40, .7);
}
.sfh-exp__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sfh-ease); }
.sfh-exp:hover .sfh-exp__ph img { transform: scale(1.06); }
.sfh .sfh-exp strong { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--sfh-ink); }
.sfh-exp span:last-child { max-width: 150px; font-size: 12px; line-height: 1.5; color: var(--sfh-body); }
.sfh-exp:hover strong { color: var(--sfh-copper); }

/* =====================================================================
   5. Popular destinations - the name over the photo
   ===================================================================== */
.sfh .sfh-dests { padding: 30px 0 60px; background: #fff; }
.sfh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sfh-dests__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sfh .sfh-dest {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  background: var(--sfh-tint); color: #fff; text-decoration: none;
  box-shadow: 0 16px 30px -24px rgba(27, 46, 40, .7);
}
.sfh-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sfh-ease); }
.sfh-dest::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 20, 0) 38%, rgba(14, 24, 20, .38) 62%, rgba(14, 24, 20, .82) 100%);
}
.sfh-dest:hover img { transform: scale(1.05); }
.sfh-dest:focus-visible { outline: 2px solid var(--sfh-green); outline-offset: 3px; }
.sfh-dest__txt { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.sfh .sfh-dest__txt strong { font-size: 19px; font-weight: 600; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.sfh-dest__txt span { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }

/* =====================================================================
   6. Closing band - the couple on the left, leaves round the words
   ===================================================================== */
.sfh .sfh-cta { padding: 0; background: var(--sfh-hero); overflow: hidden; }
.sfh-cta__ph { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 60%; margin: 0; }
.sfh-cta__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%);
}
.sfh-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); min-height: 360px; align-items: center; }
.sfh-cta__copy { grid-column: 2; padding: 56px 0 56px 24px; }
.sfh .sfh-cta .sfh-kicker { font-size: 11.5px; }
.sfh .sfh-cta h2 { margin-bottom: 14px; font-size: 28px; line-height: 1.2; color: var(--sfh-green); }
.sfh .sfh-cta__copy > p:not(.sfh-kicker) { max-width: 400px; margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: #474c5e; }
.sfh-leaf--cta { right: -30px; top: 20px; transform: rotate(-12deg); }
.sfh-leaf--cta2 { right: 40px; bottom: -60px; transform: rotate(160deg) scale(.75); opacity: .3; }
.sfh-leaf--cta3 { left: 46%; top: 50px; transform: rotate(-18deg) scale(.6); opacity: .28; }

/* =====================================================================
   Tablet and phone
   ===================================================================== */
@media (max-width: 1199px) {
  .sfh .sfh-hero h1 { font-size: 34px; }
  .sfh-hero__ph { width: 60%; }
  .sfh-promise__row li { padding: 4px 10px; }
  .sfh-promise__row strong { font-size: 13px; }
  .sfh-promise__row span { font-size: 11.5px; }
  .sfh .sfh-discover h2 { font-size: 23px; }
  .sfh-collage { height: 380px; }
  .sfh-polaroid--a { height: 320px; }
  .sfh-polaroid--b { height: 168px; }
  .sfh-polaroid--c { top: 190px; height: 176px; }
  .sfh .sfh-stamp { width: 118px; height: 118px; font-size: 11.5px; right: -8px; top: 128px; }
  .sfh-exps__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .sfh-exp:nth-child(4) { border-left: 0; }
  .sfh .sfh-cta h2 { font-size: 23px; }
}

@media (max-width: 991px) {
  /* the photo moves under the words and fades in from its top edge */
  .sfh .sfh-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 40px 0 0; }
  .sfh-hero__copy { max-width: 560px; }
  .sfh-hero__ph { position: relative; order: 2; width: 100%; height: 360px; margin-top: -10px; }
  .sfh-hero__ph img {
    object-position: 70% 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 30%);
  }
  .sfh-leaf--hero2 { display: none; }

  .sfh .sfh-promise__row { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: -70px; row-gap: 18px; padding: 20px 10px; }
  .sfh-promise__row li { grid-column: span 2; }
  .sfh-promise__row li:nth-child(4) { grid-column: 2 / span 2; }
  .sfh-promise__row li:nth-child(4), .sfh-promise__row li:nth-child(5) { border-left: 0; }
  .sfh-promise__row li:nth-child(5) { border-left: 1px solid var(--sfh-line); }

  .sfh .sfh-discover { padding: 56px 0 50px; }
  .sfh-discover__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sfh-collage { max-width: 620px; width: 100%; margin: 0 auto; }

  .sfh-dests__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the band stacks: the photo on top fading into the cream */
  .sfh-cta__ph { position: relative; width: 100%; height: 300px; }
  .sfh-cta__ph img {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .sfh-cta__grid { display: block; min-height: 0; }
  .sfh-cta__copy { padding: 0 0 48px; margin-top: -24px; }
  .sfh-leaf--cta3 { display: none; }
}

@media (max-width: 575px) {
  .sfh section { padding: 40px 0; }
  .sfh-btn { min-height: 38px; padding: 0 16px; font-size: 12px; gap: 8px; }
  .sfh-btn--line { min-height: 34px; padding: 0 13px; font-size: 11.5px; }
  .sfh-tail { display: none; }
  .sfh .sfh-kicker { font-size: 10.5px; letter-spacing: .14em; margin-bottom: 8px; }
  .sfh .sfh-label { font-size: 11.5px; letter-spacing: .16em; }
  .sfh .sfh-crumbs { margin-bottom: 12px; font-size: 11.5px; }
  .sfh-leaf--branch { width: 80px; height: 147px; }

  .sfh .sfh-hero { padding: 28px 0 0; }
  .sfh .sfh-hero h1 { font-size: 26px; margin-bottom: 10px; }
  .sfh .sfh-hero__sub { font-size: 15px; margin-bottom: 10px; }
  .sfh .sfh-hero__lead { font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
  .sfh-hero__ph { height: 250px; }
  .sfh-leaf--hero { left: -50px; top: 10px; opacity: .25; }

  /* two promises a row, the fifth across the foot */
  .sfh .sfh-promise__row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -46px; padding: 16px 6px; border-radius: 18px; row-gap: 14px; }
  .sfh-promise__row li, .sfh-promise__row li:nth-child(4) { grid-column: auto; padding: 2px 8px; }
  .sfh-promise__row li + li, .sfh-promise__row li:nth-child(5) { border-left: 0; }
  .sfh-promise__row li:nth-child(even) { border-left: 1px solid var(--sfh-line); }
  .sfh-promise__row li:last-child { grid-column: 1 / -1; }
  .sfh-promise__row .sfh-ico { width: 30px; height: 30px; margin-bottom: 2px; }
  .sfh-promise__row strong { font-size: 12.5px; }
  .sfh-promise__row span { font-size: 11px; }

  .sfh .sfh-discover h2 { font-size: 20px; margin-bottom: 12px; }
  .sfh .sfh-discover__copy > p:not(.sfh-kicker) { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
  .sfh-leaf--discover { display: none; }
  .sfh-collage { height: 290px; }
  .sfh-polaroid--a { width: 52%; top: 22px; height: 236px; padding: 6px; }
  .sfh-polaroid--b { left: 55%; width: 40%; height: 124px; padding: 6px; }
  .sfh-polaroid--c { left: 44%; top: 140px; width: 52%; height: 128px; padding: 6px; }
  .sfh .sfh-stamp { width: 96px; height: 96px; top: auto; bottom: -22px; right: auto; left: 2%; font-size: 9px; outline-offset: 3px; }
  .sfh-stamp svg { width: 13px; height: 13px; margin-top: 2px; }
  .sfh-leaf--collage, .sfh-leaf--collage2 { display: none; }

  /* experiences: three a row, smaller circles */
  .sfh .sfh-exps { padding: 34px 0 26px; }
  .sfh .sfh-exps .sfh-label { margin-bottom: 16px; }
  .sfh-exps__row { row-gap: 20px; }
  .sfh .sfh-exp { padding: 0 6px; }
  .sfh-exp__ph { max-width: 88px; margin-bottom: 8px; box-shadow: 0 0 0 3px #fff, 0 10px 18px -14px rgba(27, 46, 40, .7); }
  .sfh .sfh-exp strong { font-size: 11.5px; }
  .sfh-exp span:last-child { font-size: 10.5px; line-height: 1.4; }

  /* destinations: two cards a page, dots under (js/bj-mobrail.js) */
  .sfh-head { margin-bottom: 14px; }
  .sfh-dests__row {
    display: flex; gap: 12px;
    margin: 0 -15px; padding: 2px 15px 10px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 15px; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sfh-dests__row::-webkit-scrollbar { display: none; }
  .sfh .sfh-dest { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; aspect-ratio: 4 / 5; }
  .sfh-dest__txt { left: 12px; right: 12px; bottom: 12px; }
  .sfh .sfh-dest__txt strong { font-size: 15px; }
  .sfh-dest__txt span { font-size: 11px; }
  .sfh .sfh-dests { padding: 26px 0 40px; }

  .sfh-cta__ph { height: 220px; }
  .sfh .sfh-cta h2 { font-size: 20px; }
  .sfh .sfh-cta__copy > p:not(.sfh-kicker) { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
  .sfh .sfh-cta .sfh-kicker { font-size: 10px; }
  .sfh-cta__copy { padding-bottom: 40px; margin-top: -14px; }
  .sfh-leaf--cta2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sfh *, .sfh *::before, .sfh *::after { transition: none !important; }
  .sfh-dests__row { scroll-behavior: auto; }
}

/* the banner as tall as its words (the designer, 2026-10-14: "faltu ke
   spaces ... htaao"): 56px above the breadcrumb, 64px from the button to
   the promise card, which overlaps the banner by 98px */
@media (min-width: 992px) {
  .sfh .sfh-hero { min-height: 0; padding-bottom: 162px; }
}

/* "Explore Senior-Friendly Holidays" glides down to the experiences
   instead of leaving for the listing (2026-10-21, as Group Journeys); the
   heading stops clear of the sticky header. Less motion: a plain jump. */
.sfh-exps { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.sfh-exps) { scroll-behavior: smooth; }
}