:root {
  --cc-primary: #173654;
  --cc-primary-soft: #314b67;
  --cc-accent: #2f8f73;
  --cc-accent-dark: #24745c;
  --cc-bg: #f7f8fc;
  --cc-band: #f3f5fb;
  --cc-border: #e6eaf2;
  --cc-text: #1e2d3d;
  --cc-muted: #687786;
  --cc-white: #ffffff;
  --cc-shadow: 0 14px 35px rgba(18, 42, 73, 0.08);
  --cc-radius-lg: 24px;
  --cc-radius-md: 20px;
  --cc-radius-sm: 14px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  color: var(--cc-text);
  background: var(--cc-bg);
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.section-space {
  padding: 88px 0;
}

.section-band {
  padding: 64px 0;
}

/* NAV */

.coupon-navbar {
  padding: 0.95rem 0;
}

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b5e75, #56c79b);
  color: #fff;
  font-size: 1.05rem;
}

.brand-text {
  font-size: 1.6rem;
  color: var(--cc-primary);
  font-weight: 800;
}

.navbar .nav-link {
  color: var(--cc-primary-soft);
  font-weight: 600;
}

.navbar .nav-link:hover {
  color: var(--cc-primary);
}

/* HERO */

.hero-full {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #eef2f8;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-desktop.jpg");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(247, 248, 252, 0.96) 0%,
    rgba(247, 248, 252, 0.90) 28%,
    rgba(247, 248, 252, 0.55) 48%,
    rgba(247, 248, 252, 0.10) 68%,
    rgba(247, 248, 252, 0.00) 82%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 88px;
  padding-bottom: 88px;
}

.hero-copy {
  max-width: 620px;
}

.hero-eyebrow {
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--cc-accent);
}

.hero-title {
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  line-height: 1.08;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 1.4rem;
}

.hero-subtitle {
  font-size: 1.24rem;
  max-width: 600px;
  color: #445465;
  margin-bottom: 1.6rem;
}

.hero-cta {
  background-color: var(--cc-accent) !important;
  border-color: var(--cc-accent) !important;
  color: #fff !important;
  border-radius: 16px;
  padding: 0.95rem 1.65rem;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: var(--cc-shadow);
  opacity: 1 !important;
  filter: none !important;
}

.hero-cta:hover,
.hero-cta:focus {
  background-color: var(--cc-accent-dark) !important;
  border-color: var(--cc-accent-dark) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.hero-disclaimer {
  margin-top: 1rem;
  max-width: 560px;
  color: #6c7786;
  font-size: 0.98rem;
}









* CATEGORIES */

.categories-section {
  background: #f4f7fb; /* slightly richer than before */
}

.category-card {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  padding: 1.7rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

/* PRESCRIPTIONS (GREEN – PRIMARY) */
.category-card-prescriptions {
  background: linear-gradient(135deg, #e4f4ec 0%, #cfeee0 100%);
}

/* GROCERY (WARM / PEACH) */
.category-card-grocery {
  background: linear-gradient(135deg, #fff1e6 0%, #ffe0cc 100%);
}

/* DINING (GOLD / YELLOW) */
.category-card-dining {
  background: linear-gradient(135deg, #fff7d6 0%, #ffecad 100%);
}

/* ICON BASE */
.category-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 1.25rem;
  border: none; /* remove flat white look */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* ICON COLORS (now filled instead of outline feel) */
.category-icon-green {
  background: #1f8f5f;
  color: #ffffff;
}

.category-icon-peach {
  background: #d97706;
  color: #ffffff;
}

.category-icon-gold {
  background: #c59a00;
  color: #ffffff;
}

/* TEXT */
.category-title {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 0.85rem;
}

.category-copy {
  font-size: 1.08rem;
  color: #3f5161; /* slightly darker for contrast */
  margin-bottom: 0;
  max-width: 310px;
}









/* PHARMACY BAND */

.pharmacy-band {
  background: linear-gradient(180deg, #f4f6fb 0%, #f8f9fd 100%);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
}

.band-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 1.8rem;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cc-border);
  color: #637184;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(18, 42, 73, 0.04);
}

.band-note {
  margin-bottom: 0;
  color: #7c8795;
  font-size: 0.98rem;
}

/* FAQ SECTION */

.faq-section {
  background: #fbfbfe;
}

.faq-heading {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--cc-primary);
  font-weight: 800;
}

.info-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.45rem;
  flex-shrink: 0;
  box-shadow: var(--cc-shadow);
}

.info-icon-green {
  background: linear-gradient(135deg, #46a97c, #2c8a6d);
}

.info-icon-blue {
  background: linear-gradient(135deg, #4d9cff, #3b7fe3);
}

.info-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cc-primary);
  line-height: 1.1;
  margin-bottom: 0.55rem;
}

.info-copy {
  color: #5a6775;
  font-size: 1.06rem;
  margin-bottom: 0;
  max-width: 320px;
}

.faq-accordion .accordion-item {
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  margin-bottom: 1rem;
  background: #fff;
}

.faq-accordion .accordion-button {
  background: #fff;
  color: var(--cc-primary);
  font-size: 1.22rem;
  font-weight: 700;
  padding: 1.15rem 1.25rem;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: #f9fbff;
  color: var(--cc-primary);
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
}

.faq-accordion .accordion-body {
  color: #556474;
  font-size: 1rem;
  padding-top: 0.25rem;
}

/* FOOTER */

.site-footer {
  padding: 70px 0 32px;
  background: linear-gradient(180deg, #f4f6fb 0%, #eef3f8 100%);
  border-top: 1px solid var(--cc-border);
}

.footer-brand-wrap .brand-text {
  font-size: 1.45rem;
}

.footer-copy {
  color: #6d7b89;
  font-size: 1rem;
  max-width: 360px;
  margin-bottom: 0;
}

.footer-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cc-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-links li + li {
  margin-top: 0.65rem;
}

.footer-links a {
  color: #667485;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--cc-primary);
}

.footer-contact {
  color: #667485;
  font-weight: 500;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cc-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-bottom-copy {
  color: #8893a1;
  font-size: 0.95rem;
}

/* RESPONSIVE HERO IMAGES */

@media (max-width: 1200px) {
  .hero-bg {
    background-image: url("/images/hero-tablet.jpg");
    background-position: center right;
  }

  .hero-full {
    min-height: 640px;
  }
}

@media (max-width: 991.98px) {
  .section-space {
    padding: 72px 0;
  }

  .hero-full {
    min-height: 620px;
  }

  .hero-content {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(247, 248, 252, 0.75) 0%,
      rgba(247, 248, 252, 0.52) 100%
    );
  }

  .hero-title {
    max-width: 700px;
  }

  .navbar-collapse {
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .hero-bg {
    background-image: url("/images/hero-mobile.jpg");
    background-position: center top;
  }

  .hero-full {
    min-height: 720px;
    align-items: flex-start;
  }

  .hero-content {
    padding-top: 64px;
    padding-bottom: 54px;
  }

  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(247, 248, 252, 0.80) 0%,
      rgba(247, 248, 252, 0.60) 42%,
      rgba(247, 248, 252, 0.74) 100%
    );
  }

  .hero-subtitle {
    font-size: 1.12rem;
  }

  .category-title,
  .info-title {
    font-size: 1.8rem;
  }

  .logo-pill {
    min-width: 100px;
  }
}

@media (max-width: 575.98px) {
  .section-space {
    padding: 58px 0;
  }

  .section-band {
    padding: 52px 0;
  }

  .brand-text {
    font-size: 1.4rem;
  }

  .hero-full {
    min-height: 760px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-cta {
    width: 100%;
  }

  .category-card {
    padding: 1.35rem;
  }

  .category-title,
  .info-title {
    font-size: 1.6rem;
  }

  .faq-accordion .accordion-button {
    font-size: 1.05rem;
  }

  .footer-bottom {
    gap: 0.6rem;
  }
}






/* COUPON CARD PAGE */

.card-hero-section {
  position: relative;
  padding: 70px 0 36px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  overflow: hidden;
}

.card-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("/images/pharmacy-bg-desktop.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.42;
  filter: blur(0.5px);
}

.card-hero-content {
  position: relative;
  z-index: 2;
}

.card-hero-intro {
  max-width: 980px;
  margin: 0 auto 1.75rem;
}

.card-page-title {
  color: var(--cc-primary);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.card-page-subtitle {
  color: #4e5e6f;
  font-size: 1.32rem;
  max-width: 1020px;
  margin: 0 auto;
}

.couponcard-stage {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1.6rem;
}

.couponcard-stage-card {
  width: 100%;
  max-width: 760px;
}

.couponcard-main-card {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 38px rgba(18, 42, 73, 0.12);
}

.couponcard-main-top {
  padding: 1.25rem 1.4rem;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(135deg, #2056aa 0%, #2b6fda 52%, #5ab1ff 100%);
}

.couponcard-brand-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.couponcard-mini-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b5e75, #56c79b);
  color: #fff;
  font-size: 1rem;
}

.couponcard-main-brand {
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.01em;
}

.couponcard-main-body {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.7rem 1.9rem 1.1rem;
  background: #fff;
}

.couponcard-main-left {
  flex: 1 1 52%;
}

.couponcard-main-right {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 220px;
}

.card-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.card-line-label {
  font-size: 1.1rem;
  color: #4f6275;
  letter-spacing: 0.02em;
}

.card-line-value {
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 800;
  color: var(--cc-primary);
}

.fake-barcode {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  width: 100%;
  max-width: 210px;
  height: 115px;
  margin-bottom: 0.6rem;
}

.fake-barcode span {
  display: block;
  background: #193257;
  height: 100%;
}

.fake-barcode span:nth-child(1)  { width: 3px; }
.fake-barcode span:nth-child(2)  { width: 5px; }
.fake-barcode span:nth-child(3)  { width: 2px; }
.fake-barcode span:nth-child(4)  { width: 6px; }
.fake-barcode span:nth-child(5)  { width: 3px; }
.fake-barcode span:nth-child(6)  { width: 4px; }
.fake-barcode span:nth-child(7)  { width: 2px; }
.fake-barcode span:nth-child(8)  { width: 6px; }
.fake-barcode span:nth-child(9)  { width: 3px; }
.fake-barcode span:nth-child(10) { width: 5px; }
.fake-barcode span:nth-child(11) { width: 2px; }
.fake-barcode span:nth-child(12) { width: 7px; }
.fake-barcode span:nth-child(13) { width: 3px; }
.fake-barcode span:nth-child(14) { width: 4px; }
.fake-barcode span:nth-child(15) { width: 2px; }
.fake-barcode span:nth-child(16) { width: 6px; }
.fake-barcode span:nth-child(17) { width: 3px; }
.fake-barcode span:nth-child(18) { width: 5px; }
.fake-barcode span:nth-child(19) { width: 2px; }
.fake-barcode span:nth-child(20) { width: 6px; }
.fake-barcode span:nth-child(21) { width: 4px; }
.fake-barcode span:nth-child(22) { width: 2px; }
.fake-barcode span:nth-child(23) { width: 5px; }
.fake-barcode span:nth-child(24) { width: 3px; }
.fake-barcode span:nth-child(25) { width: 6px; }
.fake-barcode span:nth-child(26) { width: 2px; }
.fake-barcode span:nth-child(27) { width: 5px; }
.fake-barcode span:nth-child(28) { width: 3px; }

.fake-barcode-id {
  font-size: 1.2rem;
  font-weight: 700;
  color: #274666;
}

.couponcard-main-footer {
  text-align: center;
  padding: 0 1.25rem 1.35rem;
  color: #43695f;
  font-size: 1.2rem;
  font-weight: 600;
}

.option-cards-row {
  margin-top: 0.4rem;
}

.card-option {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(18, 42, 73, 0.07);
  background: #fff;
  border: 1px solid rgba(23, 54, 84, 0.08);
}

.card-option-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  font-weight: 800;
  font-size: 1.05rem;
}

.card-option-body {
  background: rgba(255,255,255,0.92);
  color: #4b5d70;
  padding: 1.15rem 1.2rem 1.25rem;
  font-size: 1.04rem;
  line-height: 1.45;
}

.card-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.card-option-title-inline {
  line-height: 1.1;
}

.card-option-green .card-option-header {
  background: linear-gradient(180deg, #2c8a6d 0%, #2f8f73 100%);
  color: #fff;
}

.card-option-blue .card-option-header {
  background: linear-gradient(180deg, #eef3ff 0%, #f4f7ff 100%);
  color: #2c4c86;
}

.card-option-gold .card-option-header {
  background: linear-gradient(180deg, #fbf5df 0%, #fff8ea 100%);
  color: #6b5a1d;
}

.card-how-section {
  background: #fbfbfe;
  padding-top: 34px;
}

.how-use-stack {
  max-width: 1040px;
  margin: 0 auto;
}

.how-use-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 1.2rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 20px;
  padding: 0.85rem 1rem;
  box-shadow: 0 10px 24px rgba(18, 42, 73, 0.05);
}

.how-use-row + .how-use-row {
  margin-top: 1rem;
}

.how-use-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-use-img {
  width: 100%;
  max-width: 210px;
  height: auto;
  object-fit: contain;
  display: block;
}

.how-use-title {
  font-size: 2rem;
  line-height: 1.08;
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 0.55rem;
}

.how-use-text {
  color: #576777;
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.card-disclaimer-center {
  text-align: center;
  max-width: 980px;
  margin: 1.4rem auto 0;
  color: #6a7686;
  font-size: 1.14rem;
}

@media (max-width: 1200px) {
  .card-hero-bg {
    background-image: url("/images/pharmacy-bg-tablet.jpg");
  }
}

@media (max-width: 991.98px) {
  .couponcard-main-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .couponcard-main-right {
    width: 100%;
    min-width: 0;
  }

  .how-use-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .how-use-copy {
    padding-bottom: 0.3rem;
  }

  .card-page-subtitle {
    font-size: 1.12rem;
  }
}

@media (max-width: 768px) {
  .card-hero-bg {
    background-image: url("/images/pharmacy-bg-mobile.jpg");
    background-position: center top;
  }

  .card-hero-section {
    padding-top: 54px;
  }

  .couponcard-main-brand {
    font-size: 1.5rem;
  }

  .card-line-value {
    font-size: 1.3rem;
  }

  .couponcard-main-footer {
    font-size: 1rem;
  }

  .how-use-title {
    font-size: 1.45rem;
  }

  .how-use-text {
    font-size: 1rem;
  }

  .card-disclaimer-center {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .couponcard-main-body {
    padding: 1.2rem 1.1rem 0.85rem;
  }

  .couponcard-main-top {
    padding: 1rem 1rem;
  }

  .card-line {
    flex-wrap: wrap;
  }

  .card-option-header {
    font-size: 0.98rem;
  }
}







/* ABOUT PAGE */

.about-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: #eef2f8;
}

.about-hero-image {
  position: absolute;
  inset: 0;
  background-image: url("/images/about-hero-desktop.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/*
  Recommended hero background sizes:
  Desktop: 2000 x 900 px
  Tablet: 1400 x 900 px
  Mobile: 900 x 1100 px
*/

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(246, 247, 252, 0.08) 0%,
    rgba(246, 247, 252, 0.22) 38%,
    rgba(246, 247, 252, 0.92) 80%,
    rgba(246, 247, 252, 0.98) 100%
  );
}

.about-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 70px;
}

.about-hero-label {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 220px;
}

.about-hero-copy-wrap {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 1rem;
}

.about-hero-copy {
  color: #4f5f6f;
  font-size: 1.18rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.about-intro-section,
.about-b2c-section,
.about-experience-section,
.about-b2b-section,
.about-mission-section,
.about-cta-section {
  background: #fafbfd;
}

.about-intro-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--cc-shadow);
}

.about-device-image {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.pillar-card,
.experience-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.7rem;
  box-shadow: var(--cc-shadow);
}

.pillar-icon,
.experience-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: var(--cc-shadow);
}

.pillar-icon-green,
.experience-icon-green {
  background: linear-gradient(135deg, #46a97c, #2c8a6d);
}

.pillar-icon-blue,
.experience-icon-blue {
  background: linear-gradient(135deg, #4d9cff, #3b7fe3);
}

.pillar-icon-gold,
.experience-icon-gold {
  background: linear-gradient(135deg, #d8b951, #c6a53a);
}

.pillar-icon-purple {
  background: linear-gradient(135deg, #8d78d8, #6d5bc7);
}

.pillar-icon-teal {
  background: linear-gradient(135deg, #32a7b8, #21889a);
}

.pillar-title,
.experience-title {
  font-size: 1.55rem;
  line-height: 1.08;
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.pillar-copy,
.experience-copy {
  color: #586777;
  font-size: 1rem;
  margin-bottom: 0;
}

.about-bridge-text {
  max-width: 920px;
  margin: 2rem auto 0;
  text-align: center;
  color: #556575;
  font-size: 1.08rem;
  line-height: 1.65;
}

.about-mission-section,
.about-b2b-section {
  background: #f8fafc;
}

.mission-panel {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--cc-shadow);
}

.mission-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.35rem;
}

.mission-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #506171;
  font-size: 1.05rem;
  font-weight: 600;
}

.mission-point i {
  color: var(--cc-accent);
  margin-top: 0.1rem;
}

@media (max-width: 1200px) {
  .about-hero-image {
    background-image: url("/images/about-hero-tablet.jpg");
  }

  .about-hero-label {
    margin-bottom: 180px;
  }
}

@media (max-width: 991.98px) {
  .about-hero {
    min-height: 480px;
  }

  .about-hero-label {
    margin-bottom: 150px;
  }

  .about-intro-card,
  .mission-panel,
  .pillar-card,
  .experience-card {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .about-hero-image {
    background-image: url("/images/about-hero-mobile.jpg");
    background-position: center center;
  }

  .about-hero {
    min-height: 460px;
  }

  .about-hero-content {
    padding-top: 38px;
    padding-bottom: 52px;
  }

  .about-hero-label {
    margin-bottom: 115px;
  }

  .about-hero-copy {
    font-size: 1.04rem;
  }

  .pillar-title,
  .experience-title {
    font-size: 1.4rem;
  }

  .about-bridge-text {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .about-hero {
    min-height: 430px;
  }

  .about-hero-label {
    margin-bottom: 95px;
  }

  .about-intro-card,
  .mission-panel,
  .pillar-card,
  .experience-card {
    padding: 1.25rem;
  }
}



/* GET COUPONCARD PAGE */

.hero-form-page .hero-copy {
  max-width: 610px;
}

.couponcard-form {
  max-width: 520px;
  margin-bottom: 1rem;
}

.form-label-custom {
  font-weight: 700;
  color: var(--cc-primary);
  margin-bottom: 0.55rem;
}

.form-control-custom {
  border: 1px solid #d8e1eb;
  border-radius: 16px;
  padding: 0.95rem 1rem;
  box-shadow: none;
}

.form-control-custom:focus {
  border-color: #8eb7a7;
  box-shadow: 0 0 0 0.2rem rgba(47, 143, 115, 0.12);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 0.85rem;
  color: #5f6f7e;
  font-size: 0.96rem;
  font-weight: 600;
}

.trust-row i {
  color: var(--cc-accent);
  margin-right: 0.35rem;
}

.card-preview-shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.card-preview-label {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(47, 143, 115, 0.1);
  color: var(--cc-accent);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.couponcard-preview {
  width: 100%;
  max-width: 470px;
  border-radius: 24px;
  padding: 1.5rem;
  color: #fff;
  box-shadow: var(--cc-shadow);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 30%),
    linear-gradient(135deg, var(--cc-primary) 0%, #165d72 55%, var(--cc-accent) 100%);
}

.couponcard-preview-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.couponcard-mini-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.8;
}

.couponcard-preview-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.couponcard-preview-icon {
  font-size: 2rem;
  opacity: 0.92;
}

.couponcard-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}

.couponcard-data {
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
}

.couponcard-data-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
  margin-bottom: 0.2rem;
}

.couponcard-data-value {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.couponcard-preview-note {
  font-size: 0.95rem;
  opacity: 0.88;
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 2.6rem;
}

.section-heading-main {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--cc-primary);
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.section-copy-main {
  color: #5d6d7d;
  font-size: 1.08rem;
  margin-bottom: 0;
}

.card-options-section {
  background: #fafbfd;
}

.delivery-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.6rem;
  box-shadow: var(--cc-shadow);
}

.delivery-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 1.15rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.delivery-icon-green {
  color: #63b78f;
}

.delivery-icon-blue {
  color: #4d9cff;
}

.delivery-title {
  font-size: 1.75rem;
  line-height: 1.08;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 0.8rem;
}

.delivery-copy {
  color: #556575;
  font-size: 1.02rem;
  margin-bottom: 1.2rem;
  max-width: 420px;
}

.delivery-btn {
  border-radius: 14px;
  font-weight: 700;
  padding: 0.78rem 1.2rem;
}

.how-it-works-lite {
  background: #fbfbfe;
}

.step-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.6rem;
  box-shadow: var(--cc-shadow);
}

.step-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #46a97c, #2c8a6d);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.step-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 0.8rem;
  line-height: 1.08;
}

.step-copy {
  color: #586777;
  margin-bottom: 0;
  font-size: 1rem;
}

.compliance-section {
  background: #f8fafc;
}

.compliance-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: var(--cc-shadow);
}

.compliance-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 0.8rem;
}

.compliance-copy {
  color: #586777;
  font-size: 1.02rem;
}

@media (max-width: 991.98px) {
  .card-preview-shell {
    margin-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  .couponcard-preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .delivery-title,
  .step-title,
  .compliance-title {
    font-size: 1.45rem;
  }
}

@media (max-width: 575.98px) {
  .couponcard-preview {
    padding: 1.2rem;
  }

  .couponcard-preview-title {
    font-size: 1.65rem;
  }

  .couponcard-preview-grid {
    grid-template-columns: 1fr;
  }

  .trust-row {
    flex-direction: column;
    gap: 0.55rem;
  }
}


/* PRIVACY POLICY / LEGAL PAGES */

.legal-hero {
  background: linear-gradient(180deg, #f7f9fc 0%, #f1f5fa 100%);
  padding: 78px 0 54px;
  border-bottom: 1px solid var(--cc-border);
}

.legal-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.legal-eyebrow {
  color: var(--cc-accent);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.legal-title {
  color: var(--cc-primary);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  line-height: 1.06;
  margin-bottom: 1rem;
}

.legal-subtitle {
  color: #556575;
  font-size: 1.18rem;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.legal-updated {
  color: #7b8795;
  font-size: 0.98rem;
  margin-bottom: 0;
}

.legal-page-section {
  background: #fafbfd;
}

.legal-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: 110px;
}

.legal-sidebar-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.35rem;
  box-shadow: var(--cc-shadow);
}

.legal-sidebar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cc-primary);
  margin-bottom: 1rem;
}

.legal-sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-sidebar-links li + li {
  margin-top: 0.75rem;
}

.legal-sidebar-links a {
  color: #586777;
  font-weight: 600;
  line-height: 1.4;
}

.legal-sidebar-links a:hover {
  color: var(--cc-primary);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.legal-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  padding: 1.6rem 1.7rem;
  box-shadow: var(--cc-shadow);
}

.legal-section-title {
  color: var(--cc-primary);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.1;
  margin-bottom: 0.9rem;
}

.legal-paragraph {
  color: #586777;
  font-size: 1.03rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.legal-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #586777;
}

.legal-list li {
  margin-bottom: 0.65rem;
  line-height: 1.65;
}

.legal-inline-link {
  color: var(--cc-primary);
  font-weight: 700;
}

.legal-inline-link:hover {
  color: var(--cc-accent-dark);
}

@media (max-width: 991.98px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-sidebar {
    position: static;
  }

  .legal-sidebar-card {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  .legal-hero {
    padding: 62px 0 42px;
  }

  .legal-subtitle {
    font-size: 1.05rem;
  }

  .legal-card {
    padding: 1.25rem;
  }

  .legal-section-title {
    font-size: 1.35rem;
  }

  .legal-paragraph,
  .legal-list li {
    font-size: 0.98rem;
  }
}