:root {
    --gp-dark:   #1a3a2a;
    --gp-mid:    #2a5a3f;
    --gp-accent: #4a9e6f;
    --gp-light:  #e8f0e9;
    --gp-cream:  #faf8f4;
    --gp-gold:   #c8a84b;
    --gp-text:   #1c1c1c;
    --gp-muted:  #6b7280;
    --gp-border: #e2e8e4;
}

  /* ── Breadcrumb ── */
  .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 14px 13px; font-size: 12px; color: var(--gp-muted); display: flex; gap: 6px; align-items: center; }
  .breadcrumb a { color: var(--gp-muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--gp-dark); }
  .breadcrumb span { color: var(--gp-border); }

  /* ── Hero ── */
  .hero { padding: 72px 0; position: relative; background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  .hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(28 58 18 / 40%);
    pointer-events: none;
}
  .hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; position: relative; padding: 0 13px; }
  .hero-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
  .hero-title { font-family: "Work Sans", sans-serif; font-size: 52px; font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: 16px; }
  .hero-desc { font-size: 15px; color: #fff; line-height: 1.7; margin-bottom: 28px; max-width: 480px; }
  .hero-stats { display: flex; gap: 32px; }
  .hero-stat-num { font-family: "Work Sans", sans-serif; font-size: 36px; font-weight: 600; color: #fff; line-height: 1; }
  .hero-stat-label { font-size: 12px; color: #fff; margin-top: 4px; }

  /* Quick start card */
  .quick-card { background-color: var(--gp); border-radius: 20px; padding: 28px; }
  .qc-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; }
  .qc-sub { font-size: 12px; color: #6b9e80; margin-bottom: 20px; }

  .freq-tabs { display: flex; gap: 0; background: rgba(0,0,0,.2); border-radius: 50px; padding: 3px; margin-bottom: 20px; }
  .freq-tab { flex: 1; text-align: center; padding: 8px; font-size: 12px; font-family: inherit; color: rgba(255,255,255, .7); background: transparent; border: none; border-radius: 50px; cursor: pointer; transition: all .2s; }
  .freq-tab.active { background: #fff; color: var(--gp); font-weight: 500; }

  .pack-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .pack-option { border: 1.5px solid #27723c; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pack-option:hover { border-color: #a8d8bc; }
  .pack-option.selected { border-color: #a8d8bc; background: rgba(168,216,188,.08); }
  .po-left { flex: 1; }
  .po-name { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 2px; }
  .po-desc { font-size: 11px; color: rgba(255,255,255, .5); }
  .po-right { text-align: right; flex-shrink: 0; }
  .po-price { font-size: 18px; font-weight: 500; color: #fff; }
  .po-per { font-size: 10px; color: rgba(255,255,255, .5); }
  .po-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a6a4f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
  .pack-option.selected .po-radio { border-color: #a8d8bc; background: #a8d8bc; }
  .pack-option.selected .po-radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gp-dark); }

  .qc-cta { width: 100%; background-color: #fff; color: var(--gp); border: none; border-radius: 50px; padding: 14px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background .2s; }
  .qc-cta:hover { background-color: #000; color: var(--white); }
  .qc-note { text-align: center; font-size: 11px; color: rgba(255,255,255, .5); margin-top: 10px; }

  /* ── Trust strip ── */
  .trust-strip { border-bottom: 1px solid var(--gp-border); }
  .trust-inner { max-width: 1200px; margin: 0 auto; padding: 0 13px; display: flex; }
  .trust-item { flex: 1; padding: 20px 16px; text-align: center; border-right: 1px solid var(--gp-border); font-size: 12px; color: var(--gp-muted); line-height: 1.5; }
  .trust-item:last-child { border-right: none; }
  .trust-item .ti-icon { font-size: 22px; margin-bottom: 6px; display: block; }
  .trust-item strong { display: block; font-size: 13px; font-weight: 500; color: var(--gp); margin-bottom: 2px; }

  /* ── Pack size section ── */
  .packs-section { padding: 80px 0; }
  .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 13px; }
  .section-header { text-align: center; margin-bottom: 40px; }
  .section-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #27723c; margin-bottom: 10px; }
  .section-heading { font-family: "Work Sans", sans-serif; font-size: 38px; font-weight: 600; color: var(--gp); margin-bottom: 10px; }
  .section-sub { font-size: 15px; color: var(--char); max-width: 540px; margin: 0 auto; }

  .main-freq-toggle { display: flex; gap: 0; border: 1.5px solid var(--gp-border); border-radius: 50px; overflow: hidden; width: fit-content; margin: 0 auto 40px; }
  .mf-btn { padding: 11px 28px; font-size: 13px; font-family: inherit; color: var(--gp-muted); background: #fff; border: none; cursor: pointer; transition: all .2s; }
  .mf-btn.active { background: var(--gp); color: #fff; font-weight: 500; }

  .packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pack-card { border: 1.5px solid var(--gp-border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
  .pack-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,58,42,.09); }
  .pack-card.featured { border-color: var(--gp); }
  .pack-card-top { padding: 28px 28px 20px; flex: 1; }
  .featured-label { display: inline-block; background-color: var(--gp); color: #fff; font-size: 10px; font-weight: 500; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; letter-spacing: .05em; }
  .pack-name { font-family: "Work Sans", sans-serif; font-size: 28px; font-weight: 600; color: var(--gp); margin-bottom: 6px; }
  .pack-tagline { font-size: 13px; color: var(--char); margin-bottom: 20px; line-height: 1.5; }
  .pack-price-block { margin-bottom: 8px; }
  .pack-price { font-size: 32px; font-weight: 500; color: var(--gp); line-height: 1; }
  .pack-price-currency { font-size: 14px; font-weight: 400; color: var(--gp-muted); }
  .pack-freq-label { font-size: 12px; color: var(--gp-muted); margin-bottom: 4px; }
  .pack-per-bottle { font-size: 12px; color: var(--gp-muted); }
  .pack-savings-badge { display: inline-block; background: #e8f4ee; color: var(--gp-accent); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; margin-top: 8px; }
  .pack-divider { border: none; border-top: 1px solid var(--gp-border); margin: 20px 28px; }
  .pack-features { padding: 0 28px; display: flex; flex-direction: column; gap: 10px; }
  .pack-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gp-muted); }
  .feat-check { width: 20px; height: 20px; border-radius: 50%; background: var(--gp-light); color: var(--gp-dark); font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .pack-card-bottom { padding: 24px 28px 28px; }
  .pack-btn { width: 100%; height: 50px; background-color: var(--gp); color: #fff; border: none; border-radius: 50px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background .2s; text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .pack-btn:hover { background-color: #000; }
  .pack-card:not(.featured) .pack-btn { background-color: transparent; color: var(--gp); border: 1.5px solid var(--gp); }
  .pack-card:not(.featured) .pack-btn:hover { background-color: var(--gp); color: #fff; }

  /* ── Juice menu preview ── */
  .juices-section { background-color: #e8f0e9; border-top: 1px solid var(--gp-border); border-bottom: 1px solid var(--gp-border); padding: 80px 0; }
  .juices-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }
  .juice-card { background-color: #fff; border: 1px solid var(--gp-border); border-radius: 14px; padding: 20px 12px; text-align: center; transition: transform .2s, box-shadow .2s; }
  .juice-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,58,42,.07); }
  .juice-card.oos { opacity: .5; }
  .juice-emoji { font-size: 40px; margin-bottom: 10px; }
  .juice-name { font-size: 13px; font-weight: 500; color: var(--gp-dark); margin-bottom: 3px; }
  .juice-size { font-size: 11px; color: var(--gp-muted); margin-bottom: 6px; }
  .juice-oos { font-size: 10px; color: var(--gp-muted); background: #f5f5f5; border-radius: 20px; padding: 2px 8px; }
  .juice-avail { font-size: 10px; color: var(--gp-accent); }
  .juice-more { background: var(--gp-light); border: 1.5px dashed var(--gp-border); border-radius: 14px; padding: 20px 12px; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
  .juice-more span { font-size: 20px; }
  .juice-more p { font-size: 12px; color: var(--gp-muted); font-weight: 500; }

  /* ── Two delivery types ── */
  .delivery-section { padding: 80px 0; }
  .delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  .delivery-card { border: 1.5px solid var(--gp-border); border-radius: 20px; padding: 32px; transition: border-color .2s; }
  .delivery-card:hover { border-color: var(--gp-accent); }
  .delivery-card-icon { font-size: 40px; margin-bottom: 16px; }
  .delivery-card h3 { font-family: "Work Sans", sans-serif; font-size: 26px; font-weight: 600; color: var(--gp-dark); margin-bottom: 8px; }
  .delivery-card .dc-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gp-accent); margin-bottom: 12px; }
  .delivery-card p { font-size: 14px; color: var(--gp-muted); line-height: 1.7; margin-bottom: 16px; }
  .delivery-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .d-tag { font-size: 12px; border: 1px solid var(--gp-border); color: var(--gp-dark); padding: 5px 12px; border-radius: 20px; }
  .delivery-card .dc-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--gp); color: #fff; border: none; border-radius: 50px; padding: 12px 24px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .2s; }
  .delivery-card .dc-btn:hover { background-color: #000; }

  /* ── How it works ── */
  .how-section { background-color: var(--gp); padding: 80px 0; }
  .how-heading { font-family: "Work Sans", sans-serif; font-size: 38px; font-weight: 600; color: #fff; margin-bottom: 10px; }
  .how-sub { font-size: 15px; color: rgba(255,255,255, .7); margin-bottom: 48px; }
  .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .step { }
  .step-num { font-family: "Work Sans", sans-serif; font-size: 48px; font-weight: 600; color: var(--white); line-height: 1; margin-bottom: 12px; }
  .step-icon { font-size: 28px; margin-bottom: 12px; }
  .step-title { font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 8px; }
  .step-desc { font-size: 13px; color: rgba(255,255,255, .5); line-height: 1.6; }

  /* ── Rewards section ── */
  .rewards-section { padding: 80px 0; background-color: rgb(41 131 80 / 5%); border-top: 1px solid var(--gp); }
  .rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  .reward-card { background-color: var(--gp); border-radius: 20px; padding: 36px; color: #fff; }
  .reward-card h3 { font-family: "Work Sans", sans-serif; font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 10px; }
  .reward-card .rc-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a8d8bc; margin-bottom: 12px; display: block; }
  .reward-card p { font-size: 14px; color: rgba(255,255,255, .9); line-height: 1.7; margin-bottom: 20px; }
  .reward-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .reward-step { display: flex; align-items: center; gap: 14px; }
  .rs-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--white); color: var(--white); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .rs-text { font-size: 13px; color: rgba(255,255,255, .9); }
  .reward-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--white); border: 1px solid var(--white); border-radius: 50px; padding: 11px 22px; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .2s; text-decoration: none; }
  .reward-btn:hover { background-color: #000; color: #fff; border-color: #000; }

  /* ── FAQ ── */
  .faq-section { padding: 80px 13px; border-top: 1px solid var(--gp); }
  .faq-inner { max-width: 860px; margin: 0 auto; }
  .faq-list { margin-top: 40px; }
  .faq-item { border-bottom: 1px solid var(--char); }
  .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; font-size: 15px; font-family: inherit; font-weight: 500; color: var(--char); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s; }
  .faq-q:hover { color: var(--gp); }
  .faq-icon { font-size: 22px; transition: transform .3s; flex-shrink: 0; color: var(--gp-muted); }
  .faq-item.open .faq-icon { transform: rotate(45deg); }
  .faq-a { font-size: 14px; color: var(--gp-muted); line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding-bottom .35s; }
  .faq-item.open .faq-a { max-height: 300px; padding-bottom: 20px; }

  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr; }
    .quick-card { max-width: 480px; }
    .juices-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 900px) {
    .packs-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .delivery-grid { grid-template-columns: 1fr; }
    .rewards-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .juices-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px) {
    .trust-inner { flex-wrap: wrap; }
    .trust-item { min-width: 50%; border-bottom: 1px solid var(--gp-border); border-right: none; }
    .trust-item:nth-child(odd) { border-right: 1px solid var(--gp-border); }
    .hero-title { font-size: 36px; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .juices-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.breadcrumb {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.hero, .packs-section, .juices-section, .delivery-section, .how-section, .rewards-section {
		padding: 30px 0;
	}
	.faq-section {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.hero-tag {
		margin-bottom: 6px;
		line-height: normal;
	}
	.hero-title {
        font-size: 32px;
        margin-bottom: 8px;
    }
	.hero-desc {
		font-size: 14px;
		line-height: 1.5;
		max-width: 100%;
		margin-bottom: 12px;
	}
	.hero-stats {
		gap: 8px;
    }
	.hero-stat-num {
		font-size: 24px;
	}
	.hero-inner {
		gap: 20px;
	}
	.quick-card {
		max-width: 100%;
		border-radius: 10px;
		padding: 14px;
	}
	.qc-sub {
		margin-bottom: 10px;
	}
	.pack-option {
		padding: 8px;
		border-radius: 7px;
	}
	.pack-options {
		margin-bottom: 10px;
	}
	.trust-item {
		padding: 10px;
	}
	.section-header, .main-freq-toggle {
		margin-bottom: 14px;
	}
	.section-tag {
		margin-bottom: 8px;
		line-height: normal;
	}
	.section-heading {
		margin-bottom: 8px;
		font-size: 26px;
		line-height: normal;
	}
	.section-sub {
		font-size: 14px;
		max-width: 100%;
		margin: 0;
	}
	.pack-card {
		border-radius: 10px;
	}
	.pack-card-top, .pack-card-bottom {
		padding: 16px;
	}
	.pack-name {
		font-size: 22px;
		margin-bottom: 4px;
	}
	.pack-tagline {
		margin-bottom: 10px;
	}
	.pack-price {
		font-size: 22px;
	}
	.pack-divider {
		margin: 0 8px;
	}
	.pack-btn {
		height: 40px;
	}
	.section-header, .main-freq-toggle {
		margin-bottom: 0;
	}
	.juices-grid {
		gap: 8px;
		margin-top: 12px;
	}
	.juice-card {
		padding: 12px;
		border-radius: 8px;
	}
	.delivery-grid {
		gap: 12px;
		margin-top: 16px;
	}
	.delivery-card {
		padding: 16px;
		border-radius: 10px;
	}
	.delivery-card .dc-label {
		margin-bottom: 6px;
		line-height: normal;
	}
	.delivery-card h3 {
		font-size: 20px;
		margin-bottom: 6px;
	}
	.delivery-card p {
		line-height: 1.5;
		margin-bottom: 8px;
	}
	.delivery-card .dc-btn {
		padding: 10px 16px;
	}
	.how-heading {
		font-size: 26px;
		line-height: normal;
		margin-bottom: 8px;
	}
	.how-sub {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.steps-grid {
		gap: 10px;
	}
	.step-num {
		font-size: 30px;
		margin-bottom: 8px;
	}
	.rewards-grid {
		margin-top: 16px;
		gap: 12px;
	}
	.reward-card {
		padding: 18px;
		border-radius: 10px;
	}
	.reward-card .rc-tag {
		margin-bottom: 8px;
		line-height: normal;
	}
	.reward-card h3 {
		font-size: 24px;
		margin-bottom: 6px;
	}
	.reward-card p {
		margin-bottom: 10px;
	}
	.reward-steps {
		gap: 8px;
		margin-bottom: 12px;
	}
	.reward-btn {
		padding: 8px 12px;
	}
	.faq-list {
		margin-top: 10px;
	}
	.faq-inner .section-heading {
		margin: 0;
	}
	.faq-q {
		padding: 10px 0;
	}
}