/* =========================================================================
   AlexusLab — THEME V6  (light, warm, readable — Chermane-inspired)
   Loads LAST. Flips the dark-dominant page to a cream/white-dominant design,
   swaps Playfair → a clean grotesque, keeps the platform showcase + final CTA
   dark as premium accents.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

:root {
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  /* Kill the monospace "computer" lettering everywhere — route mono → grotesk */
  --font-mono:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;

  /* warm light surfaces */
  --t-cream:   #F6F2EA;
  --t-cream-2: #EFE9DD;
  --t-white:   #FFFFFF;
  --t-ink:     #1B1813;   /* near-black warm */
  --t-ink-2:   #4A4339;   /* body */
  --t-ink-3:   #8A8073;   /* muted */
  --t-line:    rgba(27, 24, 19, 0.10);
  --t-line-2:  rgba(27, 24, 19, 0.20);
  --t-green:   #5E8C4A;   /* a touch deeper for contrast on light */
  --t-green-deep: #3F5F31;
}

/* ---------- base ---------------------------------------------------------- */
html, body { background: var(--t-cream); color: var(--t-ink); }
.page { background: var(--t-cream); }

/* Headlines clean + dark by default */
.headline, h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
/* Force ink on light surfaces — beats styles.css `.section:not(.section--paper) h1..h4`
   and `.headline{color:#F2F1EE}` which assume a dark page. Dark showcase
   sections (platform + final CTA) are re-lightened further down. */
.headline,
h1, h2, h3, h4, h5, h6,
.section:not(.section--paper) h1,
.section:not(.section--paper) h2,
.section:not(.section--paper) h3,
.section:not(.section--paper) h4,
.hero--platform .hero__h1 { color: var(--t-ink); }
.headline .it, .it { font-style: italic; font-weight: 600; }
.headline .accent, .accent { color: var(--t-green); }
.eyebrow { color: var(--t-ink-3); font-weight: 600; }
.eyebrow::before { background: var(--t-ink-3); }
.sub { color: var(--t-ink-2); }

/* ---------- NAV (light glass) -------------------------------------------- */
.nav {
  background: rgba(246, 242, 234, 0.82);
  border-bottom: 1px solid var(--t-line);
}
.nav__links a { color: var(--t-ink-2); font-weight: 500; }
.nav__links a:hover { color: var(--t-ink); }
.nav__login { color: var(--t-ink); border-color: var(--t-line-2); }
.nav__login:hover { border-color: var(--t-ink); color: var(--t-ink); }
.nav__cta { background: var(--t-green); color: #fff; }
.nav__cta:hover { background: #517d40; }
.nav__burger span { background: var(--t-ink); }
.nav__drawer { background: rgba(246, 242, 234, 0.98); border-bottom: 1px solid var(--t-line); }
.nav__drawer a { color: var(--t-ink); border-bottom: 1px solid var(--t-line); }
.nav__drawer-login { color: var(--t-ink) !important; }
.nav__drawer-cta { color: var(--t-green) !important; }

/* ---------- TOP BANNER (solid green, clear offer) ------------------------ */
.top-banner {
  background: var(--t-green);
  border-bottom: 0;
  color: #fff;
}
.top-banner__pulse { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18) 45%, transparent 60%); }
.top-banner__text b { color: #fff; }
.top-banner__text .sep { color: rgba(255,255,255,0.5); }
.top-banner__text .price { color: #fff; }
.top-banner__text .strike { color: rgba(255,255,255,0.7); }
.top-banner__text .strike::after { background: rgba(255,255,255,0.8); }
.top-banner__cta { background: #fff; color: var(--t-green-deep); }
.top-banner__close { color: rgba(255,255,255,0.8); }
.top-banner__close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- BUTTONS ------------------------------------------------------- */
.btn--primary { background: var(--t-green); color: #fff; box-shadow: 0 8px 22px rgba(94,140,74,0.22); }
.btn--primary:hover { background: #517d40; box-shadow: 0 12px 30px rgba(94,140,74,0.32); }
.btn--ghost { color: var(--t-ink); border: 1px solid var(--t-line-2); }
.btn--ghost:hover { background: rgba(27,24,19,0.04); border-color: var(--t-ink); }

/* ---------- HERO (cream) -------------------------------------------------- */
.hero--platform { background: var(--t-cream); border-bottom: 1px solid var(--t-line); }
.hero--platform__glow {
  background:
    radial-gradient(ellipse 900px 520px at 78% 8%, rgba(94,140,74,0.10), transparent 62%),
    radial-gradient(ellipse 560px 380px at 6% 92%, rgba(94,140,74,0.05), transparent 70%);
}
.hero--platform .hero__sub { color: var(--t-ink-2); }
.hero__micro { color: var(--t-ink-3); }
.hero__login { color: var(--t-ink-2); }
.hero__login:hover { color: var(--t-green); }
.hero__visual-tag { color: var(--t-ink-2); border-color: rgba(94,140,74,0.30); background: rgba(94,140,74,0.07); }
.hero__h1 .accent { background-image: linear-gradient(transparent calc(100% - 5px), rgba(94,140,74,0.45) 5px); }
.live-dot { background: var(--t-green); }

/* ---------- VALUE BAR (white strip) -------------------------------------- */
.valuebar { background: var(--t-white); border-bottom: 1px solid var(--t-line); border-top: 1px solid var(--t-line); }
.valuebar__item { background: var(--t-cream); border: 1px solid var(--t-line); color: var(--t-ink); }
.valuebar__ic { background: rgba(94,140,74,0.12); color: var(--t-green); }

/* ---------- PROBLEM (cream) ----------------------------------------------- */
.problem-section { background: var(--t-cream); }
.problem-card { background: var(--t-white); border: 1px solid var(--t-line); color: var(--t-ink); }
.problem-card__x { background: rgba(178,107,92,0.12); color: #B26B5C; }

/* ---------- SOLUTION (white) — already light, just normalize -------------- */
.solution-section.section--paper { background: var(--t-white); color: var(--t-ink); }
.solution-card { background: var(--t-cream); border: 1px solid var(--t-line); }
.solution-card__ic { background: rgba(94,140,74,0.12); color: var(--t-green-deep); }
.solution-card__title { color: var(--t-ink); }
.solution-card__desc { color: var(--t-ink-2); }
.solution-card__n { color: var(--t-ink-3); }

/* ---------- PLATFORM (kept DARK — premium showcase) ---------------------- */
.platform-section { background: linear-gradient(180deg, #14171C 0%, #0C0E12 100%); }
.section.platform-section .headline,
.section.platform-section h1, .section.platform-section h2,
.section.platform-section h3, .section.platform-section h4 { color: #F6F2EA; }
.platform-section .eyebrow { color: #9CA796; }
.platform-section .eyebrow::before { background: #9CA796; }
.platform-section .sub { color: #C9CCC4; }
.platform-feat { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: #EDEAE3; }
.platform-feat__ic { background: rgba(127,176,105,0.14); color: #8FBE74; }
.platform-login { color: #C9CCC4; border-color: rgba(255,255,255,0.18); }
.platform-login:hover { border-color: rgba(143,190,116,0.6); color: #8FBE74; }

/* ---------- COMMUNITY (cream) -------------------------------------------- */
.community-section.section--paper { background: var(--t-cream); color: var(--t-ink); }
.community-copy .sub { color: var(--t-ink-2); }
.community-list li { color: var(--t-ink-2); }
.community-list__ic { background: rgba(94,140,74,0.14); color: var(--t-green-deep); }

/* ---------- DIRECTOS (white) --------------------------------------------- */
.directos-section { background: var(--t-white); }
.directos-card { background: var(--t-cream); border: 1px solid var(--t-line); color: var(--t-ink); }
.directos-card__ic { background: rgba(94,140,74,0.10); color: var(--t-green); }

/* ---------- INCLUYE (cream) ---------------------------------------------- */
.incluye-section.section--paper { background: var(--t-cream); color: var(--t-ink); }
.incluye-list li { background: var(--t-white); border: 1px solid var(--t-line); color: var(--t-ink-2); }
.incluye-list__ic { background: rgba(94,140,74,0.14); color: var(--t-green-deep); }

/* ---------- PARA QUIEN (white) ------------------------------------------- */
.paraquien-section { background: var(--t-white); }
.paraquien__col--si { background: rgba(94,140,74,0.06); border-color: rgba(94,140,74,0.32); }
.paraquien__col--no { background: var(--t-cream); border-color: var(--t-line); }
.paraquien__col--si .paraquien__label { color: var(--t-green-deep); }
.paraquien__col--no .paraquien__label { color: #B26B5C; }
.paraquien li { color: var(--t-ink-2); }
.paraquien__col--si li .icon { color: var(--t-green-deep); }
.paraquien__col--no li .icon { color: #B26B5C; }

/* ---------- REVIEWS (cream) ---------------------------------------------- */
.reviews-section.section--paper { background: var(--t-cream); color: var(--t-ink); }
.reviews-section .testi { background: var(--t-white); border: 1px solid var(--t-line); box-shadow: 0 6px 22px rgba(27,24,19,0.05); }
.reviews-section .testi__quote { color: var(--t-ink); font-style: normal; font-family: var(--font-display); font-weight: 500; }
.reviews-section .testi__quote::before { color: var(--t-green); }
.reviews-section .testi__author { border-top: 1px solid var(--t-line); }
.reviews-section .testi__avatar { background: #EAE3D6; color: var(--t-ink); }
.reviews-section .testi__name { color: var(--t-ink); }
.reviews-section .testi__sub { color: var(--t-ink-3); }
.reviews-section .testi-disclaimer { color: var(--t-ink-3); }

/* ---------- PRICING (white) ---------------------------------------------- */
.pricing-section { background: var(--t-white); }
.plan { background: var(--t-cream); border: 1px solid var(--t-line); }
.plan--featured { background: linear-gradient(180deg, #EAF1E2 0%, var(--t-white) 60%); border-color: rgba(94,140,74,0.45); }
.plan__ribbon { background: var(--t-green); color: #fff; }
.plan__name { color: var(--t-ink); }
.plan__name .it { color: var(--t-ink-3); }
.plan__sub { color: var(--t-ink-3); }
.plan__price { color: var(--t-ink); }
.plan__period { color: var(--t-ink-2); }
.plan__crossed { color: var(--t-ink-3); }
.plan__save { color: var(--t-green-deep); }
.plan__save b { color: var(--t-ink) !important; }
.plan__features { border-top: 1px solid var(--t-line); }
.plan__features li { color: var(--t-ink-2); }
.plan__features .check { color: var(--t-green); }
.plan__cta .meta { color: var(--t-ink-3); }
/* override the inline-styled ghost button on the monthly plan */
.plan .btn--ghost { border: 1px solid var(--t-line-2) !important; color: var(--t-ink) !important; }
.plan .btn--ghost:hover { background: rgba(27,24,19,0.04) !important; }
.pricing-micro { color: var(--t-ink-3); }

/* ---------- FAQ (cream) -------------------------------------------------- */
.faq-section { background: var(--t-cream); }
.faq { border-top: 1px solid var(--t-line); }
.faq__item { border-bottom: 1px solid var(--t-line); }
.faq__item.open { background: rgba(94,140,74,0.04); }
.faq__q { color: var(--t-ink); font-family: var(--font-display); font-weight: 600; }
.faq__q:hover { color: var(--t-green); }
.faq__chev { color: var(--t-ink-2); border: 1px solid var(--t-line-2); }
.faq__item.open .faq__chev { background: var(--t-green); border-color: var(--t-green); color: #fff; }
.faq__a > p { color: var(--t-ink-2); }

/* ---------- FINAL CTA (kept DARK closer) --------------------------------- */
.final-cta { background: linear-gradient(180deg, #14171C 0%, #0C0E12 100%); border-top: 0; }
.section.final-cta .headline,
.section.final-cta h1, .section.final-cta h2, .section.final-cta h3 { color: #F6F2EA; }
.final-cta .eyebrow { color: #9CA796; }
.final-cta .eyebrow::before { background: #9CA796; }
.final-cta p { color: #C9CCC4; }
.cta-micro, .final-cta .cta-micro { color: #9CA796; }

/* ---------- FOOTER (dark anchor) ----------------------------------------- */
.footer { background: #0C0E12; border-top: 0; }

/* ---------- SCROLL PROGRESS (calmer) ------------------------------------- */
.scroll-progress { background: var(--t-green); box-shadow: none; }

/* ---------- MOBILE STICKY + TOAST stay dark glass (fine on light) -------- */
.mobile-cta { background: rgba(20, 23, 28, 0.94); }

/* ---------- section vertical rhythm: a touch tighter --------------------- */
.problem-section, .directos-section, .paraquien-section, .reviews-section,
.community-section, .incluye-section, .pricing-section, .faq-section { }

/* ---------- shared CTA micro line ---------------------------------------- */
.cta-micro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--t-ink-3); }
.section-cta .cta-micro { color: var(--t-ink-3); }
.platform-section .section-cta .cta-micro { color: #9CA796; }

/* ---------- HERO ENTRANCE — bulletproof visibility ----------------------
   The base (platform.css) starts hero copy at opacity:0 and relies on a CSS
   animation to reveal it. That fails in headless/background contexts and can
   leave the hero blank. Make the resting state VISIBLE; treat motion as a
   pure enhancement that only plays when motion is allowed.
   ------------------------------------------------------------------------ */
.hero__copy > *,
.hero__visual {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: heroRise 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both !important; }
  .hero__copy > *:nth-child(1) { animation-delay: 0.04s !important; }
  .hero__copy > *:nth-child(2) { animation-delay: 0.12s !important; }
  .hero__copy > *:nth-child(3) { animation-delay: 0.20s !important; }
  .hero__copy > *:nth-child(4) { animation-delay: 0.28s !important; }
  .hero__copy > *:nth-child(5) { animation-delay: 0.36s !important; }
  .hero__visual { animation: heroRise 0.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.22s both !important; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   PRICING V7 — 3 plans, Chermane-style cards (clean, graphic, scannable)
   ========================================================================= */
.pricing-section { background: var(--t-white); padding: 72px 24px 88px; }
.plans3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 48px auto 0;
  align-items: start;
}
.plan3 {
  background: var(--t-cream);
  border: 1px solid var(--t-line);
  border-radius: 20px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
}
.plan3--dark {
  background: #14171C;
  border-color: #14171C;
  box-shadow: 0 24px 60px rgba(20,23,28,0.22);
}
.plan3--course {
  background: linear-gradient(180deg, #EAF1E2 0%, #FCFBF7 70%);
  border-color: rgba(94,140,74,0.40);
}
.plan3__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.plan3__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--t-ink); margin: 0; }
.plan3--dark .plan3__name,
.section .plan3--dark h3.plan3__name { color: #F6F2EA; }
.plan3__badge {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.plan3__badge--hot  { background: #E8703A; color: #fff; }
.plan3__badge--best { background: var(--t-green); color: #fff; }
.plan3__badge--all  { background: var(--t-green-deep); color: #fff; }
.plan3__sub { font-size: 13px; color: var(--t-ink-3); margin: 0 0 18px; line-height: 1.4; }
.plan3--dark .plan3__sub { color: #A9B0A2; }
.plan3__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.plan3__amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--t-ink); line-height: 1; }
.plan3--dark .plan3__amount { color: #fff; }
.plan3__per { font-size: 13px; color: var(--t-ink-3); }
.plan3--dark .plan3__per { color: #A9B0A2; }
.plan3__was { position: relative; font-family: var(--font-mono); font-size: 14px; color: var(--t-ink-3); margin-left: 2px; }
.plan3__was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: #B26B5C; transform: rotate(-8deg); }
.plan3--dark .plan3__was { color: #8A9183; }
.plan3__cta {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  padding: 15px 18px; border-radius: 999px; margin-bottom: 18px;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.plan3__cta:active { transform: scale(0.98); }
.plan3__cta--light { background: var(--t-ink); color: #fff; }
.plan3__cta--light:hover { background: #000; }
.plan3__cta--solid { background: var(--t-green); color: #fff; box-shadow: 0 10px 24px rgba(94,140,74,0.28); }
.plan3__cta--solid:hover { background: #6CA052; }
.plan3__cta--course { background: var(--t-green-deep); color: #fff; }
.plan3__cta--course:hover { background: #2f4a25; }
.plan3__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--t-ink-3); margin: -8px 0 16px; line-height: 1.4; }
.plan3--dark .plan3__note { color: #A9B0A2; }
.plan3--dark .plan3__note b { color: #8FBE74; }
.plan3__note--course { color: var(--t-green-deep); }
.plan3__list { list-style: none; padding: 18px 0 0; margin: 0; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--t-line); }
.plan3--dark .plan3__list { border-top-color: rgba(255,255,255,0.12); }
.plan3__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--t-ink-2); }
.plan3--dark .plan3__list li { color: #D2D6CD; }
.plan3__list li b { color: var(--t-ink); font-weight: 700; }
.plan3--dark .plan3__list li b { color: #fff; }
.plan3__ck { flex-shrink: 0; color: var(--t-green); margin-top: 1px; }
.plan3--dark .plan3__ck { color: #8FBE74; }
.plan3--course .plan3__ck { color: var(--t-green-deep); }
.pricing-micro { margin: 36px auto 0; max-width: 56ch; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--t-ink-3); }

@media (max-width: 900px) {
  .plans3 { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .pricing-section { padding: 56px 20px 72px; }
  .plan3 { border-radius: 18px; }
}

/* =========================================================================
   V7.1 — UPPERCASE CTAs, kill phone overlap, mono is already gone via :root
   ========================================================================= */

/* All action buttons in caps — they should grab attention & invite the click */
.btn--primary,
.nav__cta,
.mobile-cta__btn,
.top-banner__cta,
.plan3__cta,
.plan__cta .btn {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* The desktop platform showcase: drop the overlapping phone — it looked bad.
   The hero already shows the phone; here we want the clean browser dashboard. */
.platform-show__phone { display: none !important; }
.platform-show { max-width: 1000px; }

/* Tidy the platform CTA helper link (was mono, now grotesk) — make it a clean pill */
.platform-login { letter-spacing: 0; }

/* Numbers stay tabular for tidy alignment even in the grotesk */
.num, .plan3__amount, .plan3__was { font-variant-numeric: tabular-nums; }

/* Course card: no price, schedule-a-call focus */
.plan3--course .plan3__callrow {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px;
}
.plan3--course .plan3__calllead {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--t-ink);
}
.plan3--course .plan3__callsub { font-size: 13px; color: var(--t-green-deep); font-weight: 600; }

/* Nav logo — bigger & more visible */
.nav__logo { height: 34px; }
@media (max-width: 720px) { .nav__logo { height: 30px; } }

/* Phone mockup brand — no clip now that the pill/dot are gone */
.pfm__brand { white-space: nowrap; overflow: visible; font-family: var(--font-display); font-weight: 600; }