/* =============================================================
   Healthy Lifestyle BD — funnel / landing page styles
   ============================================================= */

:root{
  /* Icon shapes as CSS masks, so list markers and table cells can carry a
     glyph that still inherits its colour. Same drawings as app/helpers/icons.php. */
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.5 18 3 11.5l2.3-2.3 4.2 4.2 9.2-9.2L21 6.5 9.5 18Z'/%3E%3C/svg%3E");
  --ico-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 9.9 6.4-6.4 2.1 2.1L14.1 12l6.4 6.4-2.1 2.1L12 14.1l-6.4 6.4-2.1-2.1L9.9 12 3.5 5.6l2.1-2.1L12 9.9Z'/%3E%3C/svg%3E");
}
.lp-body{background:#fff;padding-bottom:78px}

/* ---------- top bar ---------- */
.lp-topbar{
  position:sticky;top:0;z-index:500;background:#fff;border-bottom:1px solid var(--line);
  padding:11px 0;box-shadow:0 2px 10px rgba(21,37,27,.05);
}
.lp-topbar-trust{font-size:.82rem;color:var(--muted);font-weight:600}
.lp-topbar-call{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--r-pill);
  background:var(--lp-theme,var(--brand));color:#fff;font-weight:800;font-size:.88rem;
}

/* ---------- hero ---------- */
.lp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--lp-theme,#2F7A3E),color-mix(in srgb,var(--lp-theme,#2F7A3E) 55%,#0C1F13));
  padding:clamp(36px,6vw,74px) 0;
}
.lp-hero::before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;top:-260px;right:-180px;
  background:radial-gradient(circle,color-mix(in srgb,var(--lp-accent,#F2A93B) 34%,transparent),transparent 70%);
}
.lp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.lp-hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
  position:relative;z-index:3;
}
.lp-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border-radius:var(--r-pill);
  background:var(--lp-accent,#F2A93B);color:#3D2708;font-weight:800;font-size:.82rem;margin-bottom:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.lp-h1{
  color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;margin-bottom:18px;letter-spacing:-.02em;
}
.lp-sub{color:rgba(255,255,255,.88);font-size:clamp(1rem,1.5vw,1.17rem);line-height:1.72;margin-bottom:26px;max-width:56ch}
.lp-hero-points{display:grid;gap:11px;margin-bottom:28px}
.lp-hero-points div{display:flex;gap:11px;align-items:flex-start;font-size:.98rem;color:rgba(255,255,255,.94)}
.lp-hero-points .tick{
  width:23px;height:23px;border-radius:50%;flex:none;margin-top:2px;display:grid;place-items:center;
  background:var(--lp-accent,#F2A93B);color:#3D2708;
}
.lp-hero-media{position:relative}
.lp-hero-media img{border-radius:var(--r-xl);box-shadow:0 34px 70px rgba(0,0,0,.42);width:100%}
.lp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.lp-price-tag{
  display:inline-flex;align-items:baseline;gap:12px;padding:14px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);margin-bottom:24px;
}
.lp-price-now{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--lp-accent,#F2A93B);line-height:1}
.lp-price-was{text-decoration:line-through;color:rgba(255,255,255,.55);font-size:1.05rem}
.lp-price-off{background:var(--danger);color:#fff;padding:4px 11px;border-radius:var(--r-pill);font-size:.76rem;font-weight:800}

.lp-rating-row{display:flex;align-items:center;gap:12px;font-size:.88rem;color:rgba(255,255,255,.8);flex-wrap:wrap}

/* stock urgency bar */
.lp-stock{margin-top:22px;max-width:400px}
.lp-stock-bar{height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);overflow:hidden;margin-top:7px}
.lp-stock-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--lp-accent,#F2A93B));border-radius:var(--r-pill)}

/* ---------- countdown ---------- */
.lp-countdown{display:flex;gap:9px;margin:22px 0}
.lp-cd{
  min-width:64px;padding:10px 8px;text-align:center;border-radius:var(--r);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}
.lp-cd b{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1;color:#fff}
.lp-cd span{display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;opacity:.75;margin-top:4px}

/* ---------- section shells ---------- */
.lp-section{padding:clamp(44px,6vw,78px) 0;position:relative}
.lp-section.bg-light{background:#fff}
.lp-section.bg-cream{background:var(--cream)}
.lp-section.bg-dark{background:var(--green-900);color:#DCE8DE}
.lp-section.bg-dark h2,.lp-section.bg-dark h3,.lp-section.bg-dark h4{color:#fff}
.lp-section.bg-green{background:linear-gradient(140deg,var(--lp-theme,#2F7A3E),color-mix(in srgb,var(--lp-theme,#2F7A3E) 60%,#0C1F13));color:#fff}
.lp-section.bg-green h2,.lp-section.bg-green h3,.lp-section.bg-green h4{color:#fff}

.lp-head{text-align:center;max-width:720px;margin:0 auto 42px}
.lp-head h2{font-size:clamp(1.6rem,3.2vw,2.5rem);margin-bottom:12px;line-height:1.15}
.lp-head p{font-size:1.06rem;color:var(--muted);margin:0}
.lp-section.bg-dark .lp-head p,.lp-section.bg-green .lp-head p{color:rgba(255,255,255,.8)}
.lp-kicker{
  display:inline-block;padding:6px 15px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--lp-accent,#F2A93B) 20%,transparent);
  color:var(--honey-700);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
}
.lp-section.bg-dark .lp-kicker,.lp-section.bg-green .lp-kicker{background:rgba(255,255,255,.16);color:#fff}

/* ---------- stats strip ---------- */
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lp-stat{
  text-align:center;padding:26px 16px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.lp-stat b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;color:var(--lp-theme,var(--brand));line-height:1}
.lp-stat span{display:block;font-size:.86rem;color:var(--muted);margin-top:7px;font-weight:600}

/* ---------- problem cards ---------- */
.lp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.lp-card{
  padding:26px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);height:100%;
}
.lp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.lp-card .ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:14px;background:color-mix(in srgb,var(--lp-theme,#2F7A3E) 10%,transparent);color:var(--lp-theme,#2F7A3E)}
.lp-card h4{font-family:var(--font-body);font-size:1.05rem;font-weight:800;margin-bottom:8px}
.lp-card p{font-size:.92rem;color:var(--muted);line-height:1.66;margin:0}
.lp-section.bg-dark .lp-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.lp-section.bg-dark .lp-card p{color:rgba(255,255,255,.72)}
.lp-card.problem{border-left:4px solid var(--danger)}
.lp-card.benefit{border-left:4px solid var(--lp-theme,var(--brand))}

/* ---------- steps ---------- */
.lp-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;counter-reset:step}
.lp-step{position:relative;padding:30px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.lp-step .num{
  position:absolute;top:-20px;left:24px;width:44px;height:44px;border-radius:50%;
  background:var(--lp-theme,var(--brand));color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.25rem;font-weight:700;box-shadow:var(--shadow);
}
.lp-step h4{font-family:var(--font-body);font-size:1.05rem;margin:10px 0 8px}
.lp-step p{font-size:.92rem;color:var(--muted);line-height:1.65;margin:0}

/* ---------- video ---------- */
.lp-video{max-width:880px;margin:0 auto}
.lp-video-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#000;
}
.lp-video-frame iframe{width:100%;height:100%;border:0;display:block}
.lp-video-cap{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px;font-style:italic}

/* ---------- comparison ---------- */
.lp-compare{max-width:900px;margin:0 auto;overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.lp-compare table{width:100%;min-width:620px;border-collapse:collapse}
.lp-compare th{
  padding:16px;text-align:left;font-size:.86rem;font-weight:800;
  background:var(--green-50);border-bottom:2px solid var(--line);
}
.lp-compare th:nth-child(2){background:color-mix(in srgb,var(--lp-theme,#2F7A3E) 14%,#fff);color:var(--green-800)}
.lp-compare td{padding:15px 16px;border-bottom:1px solid var(--line);font-size:.93rem}
.lp-compare tr:last-child td{border-bottom:0}
.lp-compare td:nth-child(2){
  background:color-mix(in srgb,var(--lp-theme,#2F7A3E) 6%,#fff);
  font-weight:700;color:var(--green-800);
}
.lp-compare td:nth-child(2)::before{
  content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  background:var(--green-600);
  -webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat;
}
.lp-compare td:nth-child(3){color:var(--muted)}
.lp-compare td:nth-child(3)::before{
  content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-1px;
  background:var(--danger);
  -webkit-mask:var(--ico-close) center/contain no-repeat;mask:var(--ico-close) center/contain no-repeat;
}
.lp-compare tbody tr:hover{background:rgba(0,0,0,.012)}

/* ---------- lab report ---------- */
.lp-lab{max-width:840px;margin:0 auto;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.lp-lab-row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:14px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--line);font-size:.93rem;
}
.lp-lab-row:last-child{border-bottom:0}
.lp-lab-row.head{background:var(--green-50);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700)}
.lp-lab-row .val{font-weight:800;color:var(--ink)}
.lp-lab-row .std{color:var(--muted);font-size:.86rem}
.lp-lab-pass{
  width:26px;height:26px;border-radius:50%;background:var(--green-100);color:var(--green-700);
  display:grid;place-items:center;font-size:.8rem;font-weight:900;
}

/* ---------- reviews ---------- */
.lp-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.lp-review{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;gap:12px;height:100%;
}
.lp-review p{font-size:.95rem;line-height:1.72;color:var(--ink-2);margin:0;flex:1}
.lp-review-who{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px dashed var(--line)}
.lp-review-avatar{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;
  background:linear-gradient(140deg,var(--lp-theme,#2F7A3E),color-mix(in srgb,var(--lp-theme,#2F7A3E) 55%,#0C1F13));
}

/* ---------- guarantee ---------- */
.lp-guarantee{
  max-width:860px;margin:0 auto;text-align:center;padding:clamp(30px,4vw,50px);
  border-radius:var(--r-xl);background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.35);
}
.lp-guarantee .seal{display:grid;place-items:center;margin:0 auto 14px;width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.16)}
.lp-guarantee h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:14px}
.lp-guarantee p{font-size:1.03rem;line-height:1.78;margin-bottom:24px}
.lp-guarantee ul{display:grid;gap:10px;max-width:520px;margin:0 auto;text-align:left}
.lp-guarantee li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem}
.lp-guarantee li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;
  background:var(--lp-accent,#F2A93B);
  -webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat;
}

/* ---------- FAQ ---------- */
.lp-faq{max-width:820px;margin:0 auto}

/* ---------- gallery ---------- */
.lp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.lp-gallery img{border-radius:var(--r-lg);width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line)}

/* ---------------------------------------------------------------
   Offer table + order form (the money section)
   --------------------------------------------------------------- */
.lp-order{
  background:linear-gradient(160deg,var(--cream),#fff);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lp-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;max-width:1060px;margin:0 auto}

.lp-offers{display:grid;gap:13px}
.lp-offer{
  position:relative;display:flex;gap:15px;align-items:center;padding:18px 20px;
  border:2px solid var(--line);border-radius:var(--r-lg);background:#fff;cursor:pointer;
  transition:all .2s var(--ease);
}
.lp-offer:hover{border-color:color-mix(in srgb,var(--lp-theme,#2F7A3E) 45%,#fff)}
.lp-offer.active{
  border-color:var(--lp-theme,var(--brand));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lp-theme,#2F7A3E) 14%,transparent);
  background:color-mix(in srgb,var(--lp-theme,#2F7A3E) 4%,#fff);
}
.lp-offer .radio{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;
  display:grid;place-items:center;transition:all .18s;
}
.lp-offer.active .radio{border-color:var(--lp-theme,var(--brand))}
.lp-offer.active .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--lp-theme,var(--brand))}
.lp-offer-info{flex:1;min-width:0}
.lp-offer-title{font-weight:800;font-size:1rem;line-height:1.3;display:block}
.lp-offer-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.lp-offer-price{text-align:right;white-space:nowrap}
.lp-offer-price b{display:block;font-family:var(--font-display);font-size:1.45rem;font-weight:700;color:var(--lp-theme,var(--brand));line-height:1}
.lp-offer-price s{font-size:.86rem;color:var(--muted-2)}
.lp-offer-flag{
  position:absolute;top:-11px;right:16px;padding:3px 12px;border-radius:var(--r-pill);
  background:var(--danger);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.lp-offer.popular{border-color:var(--lp-accent,#F2A93B)}
.lp-offer.popular .lp-offer-flag{background:var(--lp-accent,#F2A93B);color:#3D2708}

.lp-form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.lp-form-head{
  padding:24px 26px;color:#fff;text-align:center;
  background:linear-gradient(140deg,var(--lp-theme,#2F7A3E),color-mix(in srgb,var(--lp-theme,#2F7A3E) 58%,#0C1F13));
}
.lp-form-head h3{color:#fff;font-size:1.32rem;margin-bottom:6px}
.lp-form-head p{color:rgba(255,255,255,.85);font-size:.9rem;margin:0}
.lp-form-body{padding:26px}
.lp-total{
  display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-radius:var(--r);
  background:var(--green-50);border:1px solid var(--green-100);margin:18px 0;
}
.lp-total .lbl{font-weight:700;font-size:.95rem}
.lp-total .amt{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--lp-theme,var(--brand))}
.lp-total-lines{font-size:.88rem;color:var(--muted);display:grid;gap:5px;margin-bottom:12px}
.lp-total-lines div{display:flex;justify-content:space-between}

.lp-submit{
  width:100%;padding:19px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--lp-accent,#F2A93B);color:#3D2708;font-weight:900;font-size:1.14rem;letter-spacing:.01em;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  animation:btnPulse 2.6s infinite;
}
.lp-submit:hover{transform:translateY(-2px)}
.lp-submit:disabled{opacity:.65;cursor:wait;animation:none;transform:none}

.lp-form-trust{display:grid;gap:8px;margin-top:18px;font-size:.85rem;color:var(--muted)}
.lp-form-trust div{display:flex;gap:9px;align-items:center}

/* ---------- sticky mobile bar ---------- */
.lp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:600;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(21,37,27,.12);
  padding:11px 16px;display:flex;align-items:center;gap:14px;
  transform:translateY(110%);transition:transform .32s var(--ease);
}
.lp-sticky.show{transform:none}
.lp-sticky-price{flex:1;min-width:0}
.lp-sticky-price b{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--lp-theme,var(--brand));line-height:1.1}
.lp-sticky-price span{font-size:.78rem;color:var(--muted)}
.lp-sticky .btn{white-space:nowrap}

/* ---------- thank you ---------- */
.lp-thanks{max-width:660px;margin:0 auto;text-align:center;padding:clamp(30px,5vw,60px) 20px}
.lp-thanks-ring{
  width:104px;height:104px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  font-size:3rem;background:var(--green-100);color:var(--green-700);animation:pop .6s var(--ease);
}

/* ---------- footer ---------- */
.lp-footer{
  background:var(--green-900);color:#B9CDBE;text-align:center;padding:34px 0;font-size:.9rem;
  margin-bottom:0;
}
.lp-footer a{color:var(--honey-300);text-decoration:underline;text-underline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .lp-hero-grid{grid-template-columns:1fr;text-align:center}
  .lp-hero-media{order:-1;max-width:400px;margin-inline:auto}
  .lp-hero-points{text-align:left;max-width:440px;margin-inline:auto;margin-bottom:24px}
  .lp-hero-cta,.lp-rating-row{justify-content:center}
  .lp-price-tag{margin-inline:auto}
  .lp-stock{margin-inline:auto}
  .lp-order-grid{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .lp-countdown{justify-content:center}
  .lp-cd{min-width:56px}
  .lp-lab-row{grid-template-columns:1fr auto auto;gap:10px;font-size:.86rem}
  .lp-lab-row .std{display:none}
  .lp-topbar-trust{display:none}
}

/* Small phones. The CTA text is admin-editable, so it has to be allowed to
   wrap — .btn sets white-space:nowrap, which is what pushes a long
   "Order Now — Cash on Delivery" past the edge of a 320px screen. */
@media (max-width:420px){
  .lp-body .btn-xl{padding:15px 20px;font-size:1rem;white-space:normal;max-width:100%}
  .lp-body .btn-lg{padding:13px 18px;font-size:.95rem;white-space:normal}
  .lp-hero-cta{width:100%}
  .lp-hero-cta .btn{width:100%}
  .lp-stats{grid-template-columns:1fr}
  .lp-cd{min-width:50px}
}