/* ============================================================
   Board / destination pages — Christie Moreira
   These inherit their identity from the brand class on <main>:
     · medical.html / amare-picks.html → .brand-health
       (Montserrat + Lato, warm greige, single SAGE accent — soft,
        modern wellness; a DIFFERENT brand from Avenna.)
     · avenna.html → .brand-avenna
       (Playfair + Chivo + Pinyon, ivory, brushed brass — the
        elegant, separate design/real-estate world.)
   Everything below uses SEMANTIC tokens so the same CSS renders
   each page correctly in its own brand. No hard-coded palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

body { background: var(--surface-page); margin: 0; }

.pg {
  position: relative;
  max-width: 440px; margin: 0 auto; min-height: 100vh;
  padding: 22px 26px 48px; box-sizing: border-box;
  background: var(--surface-page);
}

.pg-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
.pg-back:hover { color: var(--accent); }

.pg-head { margin: 30px 0 26px; }
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.pg-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); opacity: 0.7; }
.pg-title {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.015em; line-height: 1.14; color: var(--text-primary); margin: 0 0 14px;
}
.pg-title em { font-style: italic; color: var(--accent); }
.pg-intro { font-family: var(--font-body); font-size: 15px; line-height: 1.62; color: var(--text-secondary); margin: 0; text-wrap: pretty; }

/* board of cards — each row: info link (photo + text) + a Shop pill */
.pg-board { display: flex; flex-direction: column; gap: 12px; }
.pg-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: 15px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.pg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.pg-card-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; text-decoration: none; }
.pg-card image-slot, .pg-card .pg-thumb {
  width: 76px; height: 76px; flex: none;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.pg-card .pg-info { flex: 1; min-width: 0; }
.pg-card .pg-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text-primary); }
.pg-card .pg-sub { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-top: 4px; }
.pg-card .pg-meta { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pg-card .pg-meta::after { content: "\2192"; font-size: 13px; }
/* Shop pill — the buy action, separate from the info tap target */
.pg-shop {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill); padding: 10px 16px; text-decoration: none;
  transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.pg-shop:hover { background: var(--accent); color: var(--cream); }

/* section heading between groups — tracked label with a sage rule */
.pg-section {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 30px 0 14px;
}
.pg-section::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }

/* offer / list rows */
.pg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-list li { display: flex; gap: 13px; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.pg-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }
.pg-list li b { color: var(--text-primary); font-weight: 700; }

/* CTA */
.pg-cta {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; color: var(--surface-card);
  background: var(--button-bg); border-radius: var(--radius-pill); padding: 16px;
  margin-top: 26px; border: none; width: 100%; cursor: pointer;
  transition: background var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.pg-cta:hover { background: var(--button-hover); transform: translateY(-1px); }

.pg-panel {
  background: var(--surface-tint); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 24px; margin-top: 20px;
}
.pg-price { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--text-primary); }
.pg-price small { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-muted); }

.pg-disclaimer { font-family: var(--font-body); font-size: 11px; line-height: 1.55; color: var(--text-muted); text-align: center; max-width: 560px; margin: 28px auto 0; }

.pg-foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; margin-top: 34px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--text-muted);
}
.pg-foot::before { content: ""; width: 36px; height: 1px; background: var(--accent); opacity: 0.55; }

/* ---- medical page extras ---- */
/* lead-magnet guide download card (charcoal feature) */
.pg-guide {
  position: relative; display: block; text-decoration: none; margin-top: 8px;
  background: var(--surface-invert); border-radius: var(--radius-lg);
  padding: 26px 26px; box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.pg-guide:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pg-guide-eyebrow { display: block; font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight); }
.pg-guide-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.16; letter-spacing: -0.01em; color: var(--text-on-dark); margin: 8px 0 8px; }
.pg-guide-sub { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(232,232,220,0.72); margin: 0 0 16px; }
.pg-guide-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--surface-invert); background: var(--highlight-soft); border-radius: var(--radius-pill); padding: 11px 20px; }

/* pricing rows */
.pg-prices { list-style: none; padding: 0; margin: 0; }
.pg-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-hairline); }
.pg-prices li:last-child { border-bottom: none; }
.pg-prices .pg-p-name { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--text-primary); }
.pg-prices .pg-p-val { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; }

/* two clear lanes */
.pg-lanes { display: flex; flex-direction: column; gap: 12px; }
.pg-lane { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 19px 20px; }
.pg-lane h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 7px; color: var(--text-primary); }
.pg-lane h4 span { color: var(--accent); }
.pg-lane p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* secondary (outline) CTA */
.pg-cta.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.pg-cta.ghost:hover { background: var(--accent-soft); color: var(--accent); }

/* personal sign-off in Caveat */
.pg-sign { font-family: "Caveat", cursive; font-weight: 600; font-size: 24px; color: var(--accent); }

/* ---- MailerLite opt-in forms (native, styled to brand) ---- */
.ml-optin { margin-top: 8px; }
.ml-optin-form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; }
.ml-optin-form input[type="email"] {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px;
  padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-primary); outline: none;
  transition: border-color var(--dur-base) var(--ease-soft);
}
.ml-optin-form input[type="email"]:focus { border-color: var(--accent); }
.ml-optin-form button {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  color: var(--cream); background: var(--accent); border: none; border-radius: var(--radius-pill);
  padding: 14px; cursor: pointer; transition: background var(--dur-base) var(--ease-soft);
}
.ml-optin-form button:hover { background: var(--accent-hover); }
.ml-optin-thanks { display: none; font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); margin: 10px 0 0; }
.ml-optin-form.done { display: none; }
.ml-optin-form.done ~ .ml-optin-thanks { display: block; }
.ml-iframe { display: none; width: 0; height: 0; border: 0; }
/* dark variant inside the charcoal guide card */
.pg-guide .ml-optin-form input[type="email"] { background: #ffffff; border-color: transparent; }
.pg-guide .ml-optin-form button { background: var(--highlight-soft); color: var(--surface-invert); }
.pg-guide .ml-optin-form button:hover { background: #c3ceb0; }
.pg-guide .ml-optin-thanks { color: rgba(232,232,220,0.8); }

/* ============================================================
   AVENNA brand overrides — the elegant, separate world.
   (brand-avenna already swaps fonts/colors via its token scope;
    these add the arch + Pinyon motifs the brand calls for.)
   ============================================================ */
.brand-avenna .pg-card image-slot, .brand-avenna .pg-card .pg-thumb {
  border-radius: 38px 38px var(--radius-sm) var(--radius-sm);  /* arch */
}
.brand-avenna .pg-title, .brand-avenna .pg-name, .brand-avenna .pg-guide-title,
.brand-avenna .pg-lane h4, .brand-avenna .pg-price, .brand-avenna .pg-p-val {
  font-weight: 500;  /* Playfair sits lighter than Montserrat */
}