/* ============================================================
   ARURIA, product landing page sections (Eloraen / Eloreum)
   Section composition only; chrome lives in aruria.css.
   ============================================================ */

/* ---------------- HERO §0 ---------------- */
.hero { padding: 5rem 0 6rem; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.8rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--mahogany); margin-bottom: 2rem;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 1.18rem; line-height: 1.6;
  color: var(--mahogany); opacity: 0.78; max-width: 480px; margin-bottom: 3rem;
}
.hero-ctas { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

/* sachet visual */
.hero-visual { position: relative; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; }
.sachet-frame {
  width: 100%; height: 100%;
  background: var(--sachet-grad, linear-gradient(135deg, #f5e8d3 0%, #e8d4b5 35%, #d4b888 100%));
  position: relative; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(61, 42, 22, 0.25); overflow: hidden;
}
.sachet-frame::before {
  content: ''; position: absolute; inset: 8% 14%;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 100%); border-radius: 2px;
}
.sachet-frame::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: linear-gradient(180deg, var(--gold-deep) 0%, var(--gold) 100%); z-index: 1;
}
.sachet-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14% 18%; z-index: 2; }
.sachet-brand { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.12em; color: var(--mahogany-deep); text-align: center; }
.sachet-product { text-align: center; }
.sachet-name { font-family: var(--font-serif); font-size: 2.4rem; font-style: italic; color: var(--mahogany-deep); margin-bottom: 0.5rem; }
.sachet-desc { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mahogany); opacity: 0.75; line-height: 1.5; }
.sachet-foot { font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mahogany); opacity: 0.6; text-align: center; }

/* ---------------- TRUST STRIP §1 ---------------- */
.trust-strip { padding: 1.8rem 0; border-top: 1px solid rgba(42,28,12,0.18); border-bottom: 1px solid rgba(42,28,12,0.22); background: linear-gradient(100deg, #7d6843 0%, #b59a72 14%, #e4d5ad 26%, #a38b66 40%, #f0e4c4 52%, #a38b66 64%, #e4d5ad 76%, #b59a72 88%, #7d6843 100%); background-size: 1440px 100%; background-repeat: repeat-x; }
.trust-marquee { overflow: hidden; width: 100%; }
.trust-marquee-track { display: flex; align-items: center; width: max-content; animation: trust-ltr 34s linear infinite; }
.trust-group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; flex: none; }
.trust-item { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #2a1c0c; opacity: 0.9; white-space: nowrap; flex: none; }
.trust-dot { width: 4px; height: 4px; background: #2a1c0c; border-radius: 50%; flex: none; }
@keyframes trust-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 720px) { .trust-group { gap: 1.5rem; padding-right: 1.5rem; } .trust-item { font-size: 0.62rem; letter-spacing: 0.18em; } }
@media (prefers-reduced-motion: reduce) { .trust-marquee-track { animation: none; } }

/* ---------------- RECOGNITION §3 ---------------- */
.recognition { background: var(--pearl-warm); }
.recognition-head { text-align: center; max-width: 680px; margin: 0 auto 4rem; padding: 0 1.5rem; }
.recognition-prompts { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.recognition-prompts p {
  font-family: var(--font-serif); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.7; color: var(--mahogany);
  margin: 0 0 1.5rem; padding-left: 2rem; border-left: 1px solid var(--gold);
  opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s;
}
.recognition-prompts p.visible { opacity: 1; transform: translateY(0); }
.recognition-closing { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--gold-deep); text-align: center; margin-top: 3rem; padding: 0 1.5rem; }

/* ---------------- MEET §4 ---------------- */
.meet { background: var(--pearl); }
.meet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 880px) { .meet-grid { grid-template-columns: 1fr; gap: 3rem; } }
.meet-visual { aspect-ratio: 4/5; background: linear-gradient(160deg, #faf5ea 0%, #e8d4b5 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.meet-visual::before { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(163, 139, 102, 0.4); }
.meet-visual-inner { text-align: center; z-index: 2; }
.meet-visual-inner .brand { font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: 0.15em; color: var(--mahogany-deep); margin-bottom: 1.5rem; }
.meet-visual-inner .name { font-family: var(--font-serif); font-style: italic; font-size: 3rem; color: var(--gold-deep); margin-bottom: 1rem; }
.meet-visual-inner .stage { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mahogany); opacity: 0.7; }
.meet-text h2 { font-style: italic; }
.meet-text h2 .reg { font-size: 0.45em; font-style: normal; vertical-align: super; color: var(--gold); }
.meet-text .stage-line { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 2.5rem; }
.meet-text p { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.75; color: var(--mahogany); margin: 0 0 1.2rem; }
.meet-text p:last-child { font-style: italic; color: var(--gold-deep); margin-top: 1.5rem; }

/* ---------------- HOW IT WORKS §5 ---------------- */
.howitworks { background: var(--pearl-warm); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 4rem; padding: 0 1.5rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 880px) { .steps-grid { grid-template-columns: 1fr; gap: 3rem; } }
.step { padding-top: 1rem; }
.step-num { font-family: var(--font-display); font-size: 4.5rem; font-weight: 300; color: var(--gold); opacity: 0.5; line-height: 1; margin-bottom: 0.5rem; }
.step h3 { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--mahogany); margin-bottom: 1.2rem; }
.step p { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.7; color: var(--mahogany); opacity: 0.85; }
.howitworks-micro { max-width: 720px; margin: 4rem auto 0; padding: 2rem 1.5rem 0; border-top: var(--hairline-gold); text-align: center; }
.howitworks-micro p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--mahogany); opacity: 0.78; margin: 0; }
.ritual-line { margin-top: 3.5rem; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--gold-deep); letter-spacing: 0.01em; }

/* ---------------- INSIDE §6 ---------------- */
.inside { background: var(--pearl); }
.ingredient-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--max-w-mid); margin: 0 auto; padding: 0 1.5rem; border-top: var(--hairline); border-left: var(--hairline); }
@media (max-width: 720px) { .ingredient-grid { grid-template-columns: 1fr; } }
.ingredient { padding: 2.5rem; border-right: var(--hairline); border-bottom: var(--hairline); background: var(--pearl); transition: background 0.4s; }
.ingredient:hover { background: var(--pearl-warm); }
.ingredient-name { font-family: var(--font-serif); font-size: 1.3rem; font-style: italic; color: var(--mahogany); margin-bottom: 0.4rem; }
.ingredient-dose { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.ingredient-body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--mahogany); margin-bottom: 1rem; }
.ingredient-source { font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; color: var(--gold-deep); opacity: 0.85; }
.carrier { max-width: var(--max-w-mid); margin: 3rem auto 0; padding: 0 1.5rem; text-align: center; }
.carrier p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--mahogany); opacity: 0.78; margin: 0; }
.free-from { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin: 3rem auto 0; padding: 2rem 1.5rem 0; max-width: var(--max-w-mid); border-top: var(--hairline-gold); }
.free-from span { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mahogany); opacity: 0.75; }

/* ---------------- WHAT TO EXPECT §7 ---------------- */
.expect { background: var(--pearl-warm); }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--max-w-mid); margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 720px) { .timeline { grid-template-columns: 1fr; gap: 2rem; } }
.timeline-item { padding: 0 1.5rem; position: relative; }
.timeline-item:not(:last-child) { border-right: var(--hairline-gold); }
@media (max-width: 720px) { .timeline-item:not(:last-child) { border-right: none; border-bottom: var(--hairline-gold); padding-bottom: 2rem; } }
.timeline-marker { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; margin-bottom: 1.5rem; }
.timeline-label { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.timeline-item h3 { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--mahogany); margin-bottom: 1rem; }
.timeline-item p { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--mahogany); opacity: 0.85; }
.expect-note { max-width: 620px; margin: 4rem auto 0; padding: 0 1.5rem; text-align: center; }
.expect-note p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); margin: 0; }

/* ---------------- DIFFERENT §8 ---------------- */
.different { background: var(--pearl); }
.different-list { max-width: var(--max-w-mid); margin: 0 auto; padding: 0 1.5rem; }
.different-item { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 2.5rem 0; border-bottom: var(--hairline); }
.different-item:last-child { border-bottom: none; }
.different-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; color: var(--gold); line-height: 1; }
.different-content h3 { font-family: var(--font-serif); font-size: 1.4rem; font-style: italic; color: var(--mahogany); margin-bottom: 0.8rem; }
.different-content p { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7; color: var(--mahogany); opacity: 0.85; margin: 0; }
@media (max-width: 600px) { .different-item { grid-template-columns: 1fr; gap: 1rem; } .different-num { font-size: 1.6rem; } }

/* ---------------- CLUB TEASER (shared with Landing) ---------------- */
.club { background: var(--mahogany-deep); color: var(--pearl); padding: var(--space-2xl) 0; overflow: hidden; position: relative; }
.club::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: var(--gold); }
.club-inner { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.club .eyebrow { color: var(--gold); margin-bottom: 2rem; }
.club h2 { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(2.25rem, 4.5vw, 3.4rem); color: var(--pearl); margin-bottom: 1.4rem; line-height: 1.1; }
.club p { font-family: var(--font-sans); font-size: 1.12rem; line-height: 1.75; color: var(--pearl); opacity: 0.88; margin: 0 auto 1.2rem; max-width: 52ch; }
.club .spotlight { font-style: italic; color: var(--gold-soft); font-size: 1.2rem; margin: 2rem auto; opacity: 1; }
.club .btn { margin-top: 1.4rem; }

/* ---------------- PRICING §10 ---------------- */
.pricing { background: var(--pearl); }
.pricing-card { background: var(--pearl-warm); padding: 2.5rem 2rem; border: 1px solid transparent; position: relative; transition: all 0.4s ease; display: flex; flex-direction: column; }
.pricing-card:hover { background: var(--pearl); box-shadow: 0 20px 60px -20px rgba(61, 42, 22, 0.15); }
.pricing-label { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.pricing-card h3 { font-family: var(--font-serif); font-style: italic; font-size: 1.8rem; color: var(--mahogany); margin-bottom: 1rem; }
.pricing-price { font-family: var(--font-serif); font-size: 2.4rem; color: var(--mahogany); margin-bottom: 0.4rem; line-height: 1; }
.pricing-meta { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--mahogany); opacity: 0.7; margin-bottom: 1.8rem; }
.pricing-card p.body-text { margin-bottom: 1.8rem; flex: 1; }
.pricing-card .btn { width: 100%; }
/* BEGIN split (photo left / card right) */
.begin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: var(--max-w-mid); margin: 0 auto; padding: 0 1.5rem; }
.begin-photo { aspect-ratio: 4/5; background: linear-gradient(160deg, #faf5ea 0%, #e8d4b5 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.begin-photo::before { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(163, 139, 102, 0.4); }
.begin-photo .placeholder-label { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mahogany); opacity: 0.5; }
.begin-split .section-head { text-align: left; margin: 0 0 2rem; }
.begin-split .pricing-card { max-width: none; }
@media (max-width: 880px) { .begin-split { grid-template-columns: 1fr; gap: 3rem; } .begin-split .section-head { text-align: center; } }

/* ---------------- FAQ §11 ---------------- */
.faq { background: var(--pearl-warm); }
.faq-list { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 1.5rem; }
.faq-item { border-bottom: var(--hairline); }
.faq-item:first-child { border-top: var(--hairline); }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 1.6rem 0; font-family: var(--font-serif); font-style: italic; font-size: 1.18rem; color: var(--mahogany); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-question .indicator { font-family: var(--font-sans); font-size: 1.5rem; font-style: normal; color: var(--gold); flex-shrink: 0; transition: transform 0.3s ease; }
.faq-item.open .faq-question .indicator { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.3s ease; }
.faq-item.open .faq-answer { max-height: 600px; padding-bottom: 1.6rem; }
.faq-answer p { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.7; color: var(--mahogany); opacity: 0.88; margin: 0; }

/* ---------------- CLOSING §12 ---------------- */
.closing { background: var(--pearl); text-align: center; }
.closing-body { max-width: 560px; margin: 0 auto; padding: 0 1.5rem; }
.closing-body p { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--mahogany); margin: 0 0 1.5rem; }
.newsletter { max-width: 480px; margin: 5rem auto 0; padding: 3rem 1.5rem 0; border-top: var(--hairline-gold); }
.newsletter h4 { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--mahogany); margin-bottom: 0.8rem; }
.newsletter p { font-family: var(--font-serif); font-style: italic; font-size: 0.98rem; color: var(--mahogany); opacity: 0.7; margin-bottom: 1.5rem; }
.newsletter-form { display: flex; gap: 0.5rem; }
.newsletter-form input { flex: 1; border: none; border-bottom: 1px solid var(--mahogany); background: transparent; padding: 0.8rem 0.5rem; font-family: var(--font-sans); font-size: 1rem; color: var(--mahogany); outline: none; }
.newsletter-form input::placeholder { color: var(--mahogany); opacity: 0.4; }
.newsletter-form button { background: var(--mahogany); color: var(--pearl); border: none; padding: 0.8rem 1.5rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.3s; }
.newsletter-form button:hover { background: var(--gold); }

/* ---------------- STICKY MOBILE CTA ---------------- */
.sticky-cta { display: none; position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 40; }
.sticky-cta .btn { width: 100%; background: var(--gold); border-color: var(--gold); color: var(--mahogany-deep); padding: 1.1rem; box-shadow: 0 10px 30px -10px rgba(61, 42, 22, 0.3); }
.sticky-cta .btn:hover { background: var(--mahogany); border-color: var(--mahogany); color: var(--pearl); }
@media (max-width: 720px) { .sticky-cta.show { display: block; } }

/* ---------------- ELOREUM amber theme (product visual cue only) ---------------- */
.theme-eloreum .sachet-frame { background: linear-gradient(135deg, #f3ddc0 0%, #e6c08c 35%, #d09a52 100%); }
.theme-eloreum .meet-visual { background: linear-gradient(160deg, #f8ecd6 0%, #e3bd84 100%); }