/* The free 60-second scorecard block.

   Linked only from the three accommodation audience pages that carry it
   (/who-we-serve/lodges-log-cabins-resorts/, /who-we-serve/short-term-rentals/,
   /who-we-serve/glamping-camping/), and every selector is prefixed .sc-, so no
   other page can be affected either by the link or by the class names.

   The block is the site's own furniture: .sec/.sec--cream band, .wrap,
   .eyebrow, .h2, .lede, .offer-points bullets and .btn, arranged as a dark card
   the same shape as the enquiry card already on these pages.

   Layout: the heading and intro run across the top at a wider measure than the
   card's left half, then the page splits — what you get on the left, the action
   on the right in a tinted panel — so the right side of the card is part of the
   composition rather than leftover space. Below 900px that split collapses to
   one column in reading order. */

.sc-card {
  background: var(--ink, #0C2A1C);
  border-radius: var(--r-lg, 28px);
  border-top: 4px solid var(--accent, #3E8E4F);
  padding: clamp(32px, 4.4vw, 68px);
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.28);
}
.sc-card .eyebrow { color: var(--accent-soft, #9FDCA9); margin: 0 0 18px; }
/* wide enough to use the card, short enough to break where it reads well */
.sc-card .h2 { color: var(--cream, #F2F6EE); max-width: 32ch; }
.sc-card .lede { color: rgba(242, 246, 238, 0.84); max-width: 72ch; margin: 24px 0 0; }
.sc-card .lede + .lede { margin-top: 16px; }

/* ---- the split: benefits beside the action ------------------------------- */
.sc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(28px, 3.4vw, 64px);
  /* the panel is only as tall as the button and its line of microcopy, and sits
     centred against the list rather than stretched to match it */
  align-items: center;
  margin-top: clamp(32px, 3.4vw, 46px);
}

.sc-sub {
  margin: 0;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-soft, #9FDCA9);
}
/* .offer-points is already written for a dark ground; here it simply fills the
   column it has been given. */
.sc-list .offer-points { margin-top: 18px; max-width: none; }

/* The action reads as a designed surface rather than a button floating in
   space: the same tinted panel the site uses on dark grounds elsewhere. */
.sc-cta {
  background: rgba(242, 246, 238, 0.06);
  border: 1px solid rgba(242, 246, 238, 0.16);
  border-radius: var(--r-md, 18px);
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px);
}
.sc-cta .actions { margin-top: 0; display: block; }
.sc-cta .actions .btn { display: flex; width: 100%; }
.sc-note {
  margin: 14px 0 0;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: rgba(242, 246, 238, 0.62);
}

@media (max-width: 900px) {
  /* one column, in reading order: benefits, then the action */
  .sc-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sc-card .h2 { max-width: 30ch; }
}

/* Stacked but still roomy: the panel spans the card, so the button takes a
   natural width rather than stretching the full width of a tablet. */
@media (min-width: 641px) and (max-width: 900px) {
  .sc-cta .actions .btn { display: inline-flex; width: auto; min-width: 300px; }
}

@media (max-width: 640px) {
  .sc-card { border-radius: var(--r-md, 18px); }
  .sc-card .h2 { max-width: none; }
  .sc-cta { padding: 22px 20px; }
}