/* CKS Northline - front page. Mobile-first. Order follows live: hero (slide 1), promises, products,
   rewards (slide 2), shipping/cities, reviews, about, resources.
   Shared pieces live elsewhere: cards, chips -> catalog.css; review widget, post cards, section head -> chrome.css. */
.cks-usp, .cks-products, .cks-rewards, .cks-ship, .cks-reviews, .cks-about, .cks-resources { margin-top: 38px; }
/* hero: live slide 1 - photo card, text on the calm left side of the picture */
.cks-hero { padding-top: 4px; }
.cks-hero-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; background: #E7EEE6; color: var(--cks-spruce); }
.cks-hero-img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: 84% 50%; }
.cks-hero-body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 24px; }
.cks-hero-kicker { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #246B4E; }
.cks-hero-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; }
.cks-hero-text { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.55; color: #3E4F47; }
.cks-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cks-hero-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding-inline: 30px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.cks-hero-btn:hover, .cks-rewards-card .cks-btn-primary:hover { background: #A90D27; }
/* promises */
.cks-usp { margin-top: 22px; }
.cks-usp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cks-usp-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid #E3E1D9; border-radius: 16px; background: #fff; color: var(--cks-spruce); }
.cks-usp-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cks-fir-tint); color: #246B4E; }
.cks-usp-item h2 { margin: 1px 0 0; font-family: var(--cks-font-body); font-size: 15px; font-weight: 700; }
.cks-usp-item p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: #51635A; }
/* rewards: live slide 2 - dark photo card */
.cks-rewards-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--cks-spruce); color: var(--cks-snow); }
.cks-rewards-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.cks-rewards-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12, 18, 15, .8); }
.cks-rewards-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 620px; padding: 28px 20px; }
.cks-rewards-card .cks-rewards-title { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.15; color: #fff; }
.cks-rewards-card p:not(.cks-rewards-title) { margin: 0; font-size: 14.5px; line-height: 1.55; color: #DCE3DE; }
.cks-rewards-card .cks-btn-primary { margin-top: 4px; }
/* shipping + city links (the paragraph under the H1 on live) */
.cks-ship-card { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid #E3E1D9; border-radius: 20px; background: #fff; }
.cks-ship-body { display: flex; gap: 14px; align-items: flex-start; padding: 20px; }
.cks-ship-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #3E4F47; }
.cks-ship-body a { color: #246B4E; font-weight: 600; text-underline-offset: 2px; }
.cks-ship-img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: 50% 60%; }
/* about */
.cks-about-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; border: 1px solid #E3E1D9; border-radius: 20px; background: #fff; }
.cks-about-card h2 { margin: 0 0 10px; font-size: 22px; }
.cks-about p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #3E4F47; }
.cks-about a:not(.cks-btn-secondary) { color: #246B4E; }
.cks-about .cks-btn-secondary { margin-top: 4px; }
.cks-about-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cks-about-img { display: block; width: 100%; height: 124px; object-fit: cover; border-radius: 14px; }
@media (max-width: 719px) { .cks-products .cks-card-wide-only { display: none; } } /* phones: the four best sellers only */
@media (max-width: 599px) {
  .cks-resources .cks-post-grid { gap: 16px; }
  .cks-resources .cks-pcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
  .cks-resources .cks-pcard-media { grid-row: 1 / span 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .cks-resources .cks-pcard-date { margin: 0; align-self: end; }
  .cks-resources .cks-pcard-title { font-size: 15px; }
}
@media (min-width: 720px) {
  .cks-hero-card { justify-content: center; min-height: 380px; }
  .cks-hero-card.has-img .cks-hero-img { position: absolute; inset: 0; height: 100%; object-position: 100% 50%; }
  .cks-hero-card.has-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(231, 238, 230, .97) 0%, rgba(231, 238, 230, .9) 38%, rgba(231, 238, 230, 0) 66%); }
  .cks-hero-body { z-index: 2; max-width: 540px; padding: 40px; }
  .cks-hero-btn { width: auto; }
  .cks-usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .cks-rewards-card::before { background: linear-gradient(90deg, rgba(12, 18, 15, .95) 0%, rgba(12, 18, 15, .86) 44%, rgba(12, 18, 15, .2) 100%); }
  .cks-rewards-body { padding: 40px; }
}
@media (min-width: 860px) {
  .cks-ship-card.has-img { grid-template-columns: minmax(0, 1fr) 340px; }
  .cks-ship-body { align-items: center; padding: 30px 34px; }
  .cks-ship-body p { font-size: 15.5px; }
  .cks-ship-img { height: 100%; min-height: 170px; }
}
@media (min-width: 960px) {
  .cks-usp, .cks-products, .cks-rewards, .cks-ship, .cks-reviews, .cks-about, .cks-resources { margin-top: 60px; }
  .cks-usp { margin-top: 26px; }
  .cks-hero-card { min-height: 450px; border-radius: 24px; }
  .cks-hero-body { gap: 14px; max-width: 640px; padding: 56px; }
  .cks-hero-kicker { font-size: 13.5px; }
  .cks-hero-title { font-size: 52px; }
  .cks-hero-text { font-size: 17px; }
  .cks-rewards-card { border-radius: 24px; }
  .cks-rewards-body { padding: 52px 56px; }
  .cks-rewards-card .cks-rewards-title { font-size: 32px; }
  .cks-rewards-card p:not(.cks-rewards-title) { font-size: 16px; }
  .cks-about-card { padding: 38px 40px; }
  .cks-about-card.has-img { grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; align-items: center; }
  .cks-about-card h2 { font-size: 28px; }
  .cks-about p { font-size: 15.5px; }
  .cks-about-media { position: relative; display: block; height: 310px; }
  .cks-about-img { position: absolute; }
  .cks-about-img:first-child { top: 0; right: 0; width: 84%; height: 236px; border-radius: 18px; }
  .cks-about-img:last-child { left: 0; bottom: 0; width: 52%; height: 164px; border: 6px solid #fff; border-radius: 20px; box-sizing: border-box; }
}