/* Sendible homepage — builds on style.css (tokens, header, buttons).
   Units: rem for scaling (1rem = 16px), 1px kept only for hairline borders. */

.home-wrap { width: min(71.5rem, 100% - 3rem); margin: 0 auto; }  /* 1144px container */

/* ============ HERO ============ */
.hero-home { padding: 2.5rem 0 4rem; }
.hero-home-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
}
.hero-home-text { max-width: 33rem; }
.hero-home-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 3.375rem;              /* 54px */
  font-weight: 500;
  line-height: 1.125;              /* ~60.75px */
  letter-spacing: -0.084rem;       /* -1.35px */
  color: var(--brand-dark);        /* #201e24 */
}
.hero-home-title em { font-family: var(--font-serif); font-style: italic; }
.hero-home-desc {
  margin: 1.5rem 0 0;
  font-size: 1.5rem;               /* 24px */
  line-height: 1.2;                /* ~29px */
  color: var(--brand-dark);
}

/* hero CTAs — larger than the pricing buttons (16px) */
.hero-home-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.hbtn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1;
  padding: 0.75rem 1.5rem; border-radius: 2rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.hbtn-primary { background: var(--btn-primary-bg); color: #fff; }
.hbtn-primary:hover { background: #574fe8; }
.hbtn-outline { background: var(--btn-outlined-bg); color: var(--btn-outlined-fg); border-color: var(--btn-outlined-border); }
.hbtn-outline:hover { background: #f2effe; }
.hbtn-arrow { width: 1.125rem; height: 1.125rem; stroke-width: 2px; }

.hero-home-checks {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0; padding: 0; list-style: none;
  font-size: 0.875rem; color: var(--gray-900);
}
.hero-home-checks li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-home-checks .tick { width: 1rem; height: 1rem; color: var(--brand-strong); stroke-width: 2.5px; }

.hero-home-media { justify-self: end; }
.hero-home-media img { display: block; width: 100%; max-width: 37.5rem; height: auto; }

/* ============ Responsive ============ */
@media (max-width: 60rem) {
  .hero-home-title { font-size: 2.75rem; }
  .hero-home-desc { font-size: 1.25rem; }
}
@media (max-width: 45rem) {
  .hero-home { padding: 1.5rem 0 3rem; }
  .hero-home-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-home-text { max-width: none; }
  .hero-home-media { justify-self: stretch; order: 2; }
  .hero-home-media img { max-width: 100%; margin: 0 auto; }
}

/* ============ shared section helpers ============ */
.sec-title { margin: 0; font-family: var(--font-sans); font-size: 2.625rem; font-weight: 500; line-height: 1.125; letter-spacing: -0.075rem; color: var(--brand-dark); }
.sec-title--left { text-align: left; }
.supported-home-head .sec-title { text-align: center; }
.sec-title em { font-family: var(--font-serif); font-style: italic; }
.sec-sub { margin: 1rem auto 0; max-width: 40rem; font-size: 1.25rem; line-height: 1.5; color: #323232; text-align: center; }
.sec-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 1rem; color: var(--btn-text-fg); text-decoration: none; }
.sec-link svg { width: 1.125rem; height: 1.125rem; stroke-width: 2px; transition: transform .15s ease; }
.sec-link:hover svg { transform: translateX(0.1875rem); }
.eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: uppercase; padding: 0.125rem 0.5625rem; border-radius: 0.4375rem; }
.eyebrow--outline { color: var(--brand-dark); border: 1px solid var(--gray-200); background: transparent; }
.eyebrow--pink { color: #b0186d; background: #fce7f1; }
.eyebrow--cyan { color: #0b6b7d; background: #d7f7ff; }

/* ============ 2 · supported networks ============ */
.supported-home { background: #e7fbff; padding: 5.5rem 0; }
.supported-home .sec-title { font-size: 2.625rem; line-height: 1.125; }
.supported-home-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.supported-home-head .sec-link { margin-top: 1.5rem; }
.marquee { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-row { display: flex; width: max-content; animation: mq 34s linear infinite; }
.marquee-row--rev { animation-duration: 44s; animation-direction: reverse; }
.marquee-track { display: flex; gap: 3.5rem; padding-left: 3.5rem; }
.mq-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 0.25rem 1.5rem rgba(0,127,142,.15); }
.mq-tile img { width: 2.875rem; height: 2.875rem; object-fit: contain; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ============ 3 · features (What can Sendible do) ============ */
.features-home { padding: 4rem 0; }
.features-home .sec-title { margin-top: 1rem; font-size: 2.625rem; line-height: 1.125; }
.feat-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.5rem 0 1.5rem; }
.feat-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border-radius: 2rem; border: 1px solid var(--surface-2); background: #fff; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--gray-900); cursor: pointer; }
.feat-tab .feat-tab-ic { width: 1.125rem; height: 1.125rem; stroke-width: 2px; color: currentColor; }
.feat-tab.is-active { background: var(--neutral-900); color: #fff; border-color: var(--neutral-900); }
.feat-panel { display: grid; grid-template-columns: 1.9fr 1fr; gap: 1.875rem; align-items: stretch; }
.feat-shot { border-radius: 1rem; overflow: hidden; background: linear-gradient(135deg, #d7f4fb, #eef2ff); }
.feat-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feat-card { border: 1px solid #003262; border-radius: 0.625rem; padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.feat-card h3 { margin: 0; font-size: 1.5rem; font-weight: 500; color: var(--brand-dark); }
.feat-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--gray-600); }

/* ============ 4 · social proof ============ */
.proof-home { padding: 4rem 0 5rem; }
.proof-statement { margin: 0 auto; max-width: 62rem; text-align: center; font-size: 1.25rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.0125rem; color: var(--brand-dark); }
.proof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.proof-stats li { display: flex; flex-direction: column; gap: 0.5rem; }
.proof-num { font-size: 2.625rem; font-weight: 500; letter-spacing: -0.0656rem; color: var(--brand-dark); }
.proof-txt { font-size: 0.875rem; line-height: 1.45; color: var(--brand-dark); }
.proof-link { display: inline-flex; margin-top: 2.5rem; }

/* ============ 5a · ratings band ============ */
.ratings-home { background: #151d25; padding: 4rem 0; }
.ratings-title { margin: 0; text-align: center; font-size: 2.625rem; font-weight: 500; line-height: 1.125; color: #fff; }
.ratings-row { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2rem; }
.rating { display: flex; align-items: center; gap: 0.75rem; }
.rating-logo { width: 2.75rem; height: 2.75rem; }
.rating-capterra { font-size: 1.5rem; font-weight: 700; color: #4098d7; }
.rating > div { display: flex; flex-direction: column; gap: 0.25rem; }
.rating-badge { font-size: 0.875rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border-radius: 0.375rem; padding: 0.1875rem 0.5rem; align-self: flex-start; }
.rating-badge em { opacity: .6; font-style: normal; }
.rating-label { font-size: 0.875rem; color: #b9b9c6; }
.ratings-div { width: 1px; height: 3rem; background: rgba(255,255,255,.18); }

/* ============ 5b · interactive demo ============ */
.demo-home { background: #fdeef6; padding: 4.5rem 0 5rem; }
.demo-home .sec-title { margin-top: 1rem; }
.demo-shot { position: relative; margin-top: 2.5rem; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(20,20,30,.12); }
.demo-shot img { display: block; width: 100%; }
.demo-overlay { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); background: #fff; border-radius: 1rem; padding: 1.5rem 2rem; box-shadow: 0 0.75rem 2rem rgba(20,20,30,.15); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.demo-overlay h3 { margin: 0; font-size: 1.5rem; font-weight: 500; color: var(--brand-dark); }

/* ============ 5c · solutions ============ */
.solutions-home { background: #fdeef6; padding: 0 0 5rem; }
.solutions-home .sec-title { margin-top: 1rem; max-width: 40rem; }
.sol-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 1.5rem; }
.sol-tab { padding: 0.625rem 1.125rem; border-radius: 2rem; border: 1px solid transparent; background: rgba(255,255,255,.6); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--gray-600); cursor: pointer; }
.sol-tab.is-active { background: #fff; color: var(--brand-strong); box-shadow: 0 0.125rem 0.5rem rgba(20,20,30,.08); }
.sol-panel { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; align-items: center; background: rgba(255,255,255,.45); border-radius: 1.25rem; padding: 2rem; }
.sol-panel-text p { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.5; color: var(--brand-dark); }
.sol-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sol-card { background: #fff; border: 1px solid var(--surface-2); border-radius: 1rem; padding: 1.5rem; }
.sol-card-ic { width: 1.5rem; height: 1.5rem; color: var(--brand-strong); stroke-width: 2px; }
.sol-card h4 { margin: 0.75rem 0 0.5rem; font-size: 1.0625rem; font-weight: 500; color: var(--brand-dark); }
.sol-card p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--gray-600); }

/* ============ 6 · testimonial ============ */
.testi-home { background: #ffe9e5; padding: 2.5rem 0; }
.testi-inner { display: grid; grid-template-columns: 22rem 1fr; gap: 1.5rem; align-items: stretch; }
.testi-photo { position: relative; border-radius: 1.25rem; overflow: hidden; min-height: 25rem; }
.testi-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.testi-name { position: absolute; left: 1.5rem; bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; color: #fff; z-index: 1; text-shadow: 0 0.0625rem 0.5rem rgba(0,0,0,.4); }
.testi-name-main { font-size: 1.375rem; font-weight: 500; }
.testi-name-sub { font-size: 0.9375rem; opacity: .92; }
.testi-body { background: #fff; border-radius: 1.25rem; padding: 2.5rem; display: flex; flex-direction: column; }
.testi-body blockquote { margin: 0; font-size: 1.625rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.0375rem; color: var(--brand-dark); }
.testi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.testi-stats li { display: flex; flex-direction: column; gap: 0.375rem; }
.testi-num { font-size: 2rem; font-weight: 500; color: var(--brand-dark); }
.testi-lbl { font-size: 0.9375rem; color: var(--gray-600); }
.testi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2rem; }
.testi-logo { height: 1.75rem; width: auto; }

/* ============ 7 · resources ============ */
.resources-home { padding: 5rem 0; }
.resources-home .sec-title { margin-top: 1rem; }
.res-tabs { display: flex; gap: 0.75rem; margin: 2rem 0 2rem; }
.res-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border-radius: 2rem; border: 1px solid var(--surface-2); background: #fff; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--gray-900); cursor: pointer; }
.res-tab.is-active { background: var(--neutral-900); color: #fff; border-color: var(--neutral-900); }
.res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.res-card { display: flex; flex-direction: column; }
.res-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.75rem; background: #f2eefc; }
.res-card h3 { margin: 1.25rem 0 0.5rem; font-size: 1.375rem; font-weight: 500; line-height: 1.2; color: var(--brand-dark); }
.res-card p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--gray-600); }
.resources-home > .home-wrap > .sec-link { display: inline-flex; margin-top: 2.5rem; }

/* ============ 8 · footer ============ */
.footer-home { background: #191927; color: #c7c7d2; padding: 4rem 0 2rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem; }
.footer-brand img { filter: brightness(0) invert(1); }
.footer-find { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-addr { font-style: normal; font-size: 0.875rem; line-height: 1.5; color: #9a9aa8; }
.footer-col h4 { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; color: #fff; }
.footer-col ul, .footer-find { list-style: none; }
.footer-col ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-home a { color: #c7c7d2; text-decoration: none; font-size: 0.875rem; }
.footer-home a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.8125rem; color: #9a9aa8; }
.footer-bottom ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }

/* ============ responsive ============ */
@media (max-width: 60rem) {
  .sec-title, .ratings-title { font-size: 2.25rem; }
  .feat-panel { grid-template-columns: 1fr; }
  .proof-stats { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .sol-panel { grid-template-columns: 1fr; }
  .testi-inner { grid-template-columns: 1fr; }
  .testi-photo { min-height: 20rem; }
  .res-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 45rem) {
  .proof-stats { grid-template-columns: 1fr 1fr; }
  .ratings-row { flex-direction: column; gap: 1.25rem; }
  .ratings-div { display: none; }
  .demo-overlay { position: static; transform: none; margin: 1rem; box-shadow: none; }
  .testi-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }
}