/* Homepage (trust-hub layout from the owner's info-product homepage skill, in Meet Your Sweet's colours) */
.hm-hero { background: linear-gradient(180deg, #fbeff3 0%, #f7e3ea 100%); border-bottom: 1px solid var(--ms-pink-line); }
.hm-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding-top: 44px; padding-bottom: 48px; }
.hm-hero h1 { font: 400 42px/1.18 var(--ms-head); color: var(--ms-berry); margin: 0 0 16px; }
.hm-sub { font-size: 20px; line-height: 1.5; color: var(--ms-char); margin: 0 0 24px; }
.hm-ticket { font: 600 15px/1 var(--ms-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ms-char); margin: 0 0 14px; }
.hm-verbs { list-style: none; margin: 0; padding: 0; }
.hm-verbs li { position: relative; padding: 0 0 0 34px; margin: 0 0 12px; font-size: 18px; }
.hm-verbs li::before { content: ""; position: absolute; left: 0; top: .22em; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17s-6.5-4.1-6.5-8.6A3.6 3.6 0 0 1 10 6.3a3.6 3.6 0 0 1 6.5 2.1C16.5 12.9 10 17 10 17z' fill='%23a11442'/%3E%3C/svg%3E") center/contain no-repeat; }
.hm-verbs b { font: 600 18px/1 var(--ms-cond); letter-spacing: .04em; color: var(--ms-berry); }
.hm-mc { background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(129,20,50,.16); border-top: 5px solid var(--ms-berry); padding: 22px 28px 24px; scroll-margin-top: 20px; }
.hm-mc > img { display: block; margin: -4px auto 6px; width: 100%; max-width: 440px; }
.hm-mc h2 { font: 400 25px/1.25 var(--ms-head); color: var(--ms-ink); text-align: center; margin: 0 0 8px; }
.hm-mc > p { font-size: 15px; color: var(--ms-muted); text-align: center; margin: 0 0 16px; }
.hm-mc .hm-privacy { font-size: 13px; margin: 12px 0 0; }

.hm-trust { background: #fff; border-bottom: 1px solid var(--ms-line); }
.hm-trust-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.hm-trust-in > div { display: flex; align-items: center; gap: 14px; justify-content: center; }
.hm-trust-in img { width: 54px; height: 54px; flex: none; }
.hm-trust-in .ms-ic { width: 40px; height: 40px; color: var(--ms-berry); flex: none; }
.hm-trust-in p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ms-char); }
.hm-trust-in b { color: var(--ms-ink); }

.hm-h2 { font: 400 32px/1.25 var(--ms-head); color: var(--ms-berry); text-align: center; margin: 0 0 8px; }
.hm-lead { text-align: center; color: var(--ms-muted); margin: 0 0 28px; }
.hm-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.hm-rcard { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 24px 24px 20px; background: var(--ms-grey); border-radius: 12px; border: 1px solid var(--ms-line); position: relative; }
.hm-rcard::before { content: "\201C"; position: absolute; top: -6px; left: 16px; font: 400 72px/1 var(--ms-head); color: var(--ms-blush); opacity: .55; }
.hm-rcard blockquote { position: relative; margin: 0 0 16px; font: italic 400 17px/1.6 var(--ms-head); color: var(--ms-ink); }
.hm-rcard figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; border-top: 1px solid var(--ms-line); padding-top: 14px; }
.hm-rcard figcaption img { flex: none; width: 64px; height: 64px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.hm-rcard figcaption b { display: block; color: var(--ms-berry); font-size: 15px; }
.hm-rcard figcaption span span { display: block; color: var(--ms-muted); }
.hm-rcard figcaption a { display: block; margin-top: 3px; font-weight: 500; text-decoration: none; }

.hm-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 12px;
  padding: 22px 30px; margin: 24px 0; }
.hm-cta p { margin: 0; font: 400 24px/1.3 var(--ms-head); color: var(--ms-ink); }

.hm-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 6px 0 14px; }
.hm-pcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 20px; border-radius: 12px; border: 1px solid var(--ms-line);
  background: #fff; text-decoration: none !important; color: var(--ms-text) !important; transition: transform .12s, box-shadow .12s, border-color .12s; }
.hm-pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.1); border-color: var(--ms-pink-line); }
.hm-cover { display: flex; align-items: center; justify-content: center; height: 170px; margin-bottom: 12px; }
.hm-cover img { max-height: 170px; width: auto; max-width: 100%; }
.hm-pname { font: 700 19px/1.25 var(--ms-head); color: var(--ms-berry); }
.hm-new { position: absolute; top: 12px; right: 12px; font-style: normal; font: 600 12px/1 var(--ms-cond); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--ms-red); padding: 5px 8px; border-radius: 4px; }
.hm-pname-old { font-style: normal; font: 600 11px/1 var(--ms-cond); text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--ms-red); padding: 3px 6px; border-radius: 3px; vertical-align: 3px; }
.hm-pby { font-size: 13px; color: var(--ms-muted); margin: 4px 0 8px; }
.hm-pdesc { font-size: 15px; line-height: 1.5; }

.hm-bcols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.hm-bcols .ms-ribbon { margin-top: 18px; }
.hm-post { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ms-line); text-decoration: none !important; color: var(--ms-ink) !important; }
.hm-post img { flex: none; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--ms-grey); }
.hm-post span { font: 700 17px/1.35 var(--ms-sans); }
.hm-post small { display: block; font: 500 13px/1 var(--ms-sans); color: var(--ms-berry); margin-top: 8px; }
.hm-post:hover span { color: var(--ms-berry); }
.hm-more { margin: 14px 0 0; font-weight: 500; }

@media (max-width: 1000px) {
  .hm-pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hm-hero-in { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; padding-bottom: 30px; }
  .hm-hero h1 { font-size: 31px; }
  .hm-sub { font-size: 18px; }
  .hm-trust-in { grid-template-columns: 1fr; gap: 12px; }
  .hm-trust-in > div { justify-content: flex-start; }
  .hm-pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hm-bcols { grid-template-columns: 1fr; gap: 0; }
  .hm-cta { flex-direction: column; text-align: center; padding: 20px 16px; }
  .hm-cta p { font-size: 21px; }
  .hm-h2 { font-size: 26px; }
}
@media (max-width: 480px) {
  .hm-mc { padding: 18px 16px 20px; }
  .hm-pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hm-pcard { padding: 14px 8px 16px; }
  .hm-cover { height: 130px; }
  .hm-cover img { max-height: 130px; }
  .hm-pname { font-size: 16px; }
  .hm-pdesc { font-size: 14px; }
  .hm-post img { width: 92px; height: 64px; }
  .hm-post span { font-size: 16px; }
}