/* ==========================================================================
   ThriveChamp — Landing Styles (STANDALONE)
   - No dependencies on app.css or shared bundles
   - All classes prefixed with "lc-" to avoid collisions
   - Includes hero-as-background with white fades (top & bottom)
   ========================================================================== */


/* ============ 0) THEME TOKENS & GLOBAL RESET ============================= */
:root{
  --tc-navy:#0B1A2A;
  --tc-gold:#E5C36A;
  --tc-text:#000;         /* all text is solid black for readability */
  --page-max:800px;       /* desktop width cap */
}

/* Small, safe reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; }
img,video{ display:block; max-width:100%; height:auto; }

body{
  color:var(--tc-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  line-height:1.45;
}

.lc-page{
  max-width:800px;
  margin:0 auto;
  width:100%;
}

/* Shared centered container for inner content rows */
.lc-container{
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 24px;
}


/* ============ 1) HEADER: logo left, buttons right; single line =========== */
.lc-header{
  position:sticky; top:0;
  background:#fff;
  border-bottom:0;         /* clean, no rule visible under header */
  z-index:10;
  margin-top:8px;          /* subtle buffer from the very top edge */
}

/* Header container */
.lc-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;                  /* was 16px */
  padding:14px;              /* was 18px */
  white-space:nowrap;
}

.lc-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }

/* Logo: keep clear but compact */
.lc-logo{ height:30px; width:auto; }  /* keep this as-is if you like */

.lc-cta{ display:flex; gap:10px; }
.lc-cta .lc-chip:not(.lc-chip--primary){ border-color:rgba(11,26,42,.52); }

/* Button/Chip look (unified, compact) */
.lc-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.54rem .8rem;       /* was .5–.6 / .55–1.0  → slimmer */
  line-height:1;              /* consistent height */
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  color:var(--tc-text);
  font-weight:600;            /* match weight across variants */
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.lc-chip:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:#d1d5db; }
.lc-chip:active{ transform:translateY(0); box-shadow:none; }

.lc-chip--primary{
  background:var(--tc-gold);
  border-color:rgba(11,26,42,.52);
  color:#0b0b0b;
}
.lc-chip--primary:hover{ background:#dcb862; }

/* ============ 2) HERO: FULL-WIDTH BACKGROUND BEHIND TEXT =================

   The hero section itself provides the background. We layer:
   - a top white fade → transparent
   - a bottom white fade → transparent
   - the Olympus illustration

   Result: the page is white at the very top and bottom of the hero,
   the center shows your blue sky + Olympus art, and the headline/CTAs
   sit on top of it.

   IMPORTANT:
   - Save your art to /ui/images/olympus-landing.png (solid blue sky,
     not transparent) so the fades look natural.
   - Adjust the third "background-position" Y value if you want more/less sky.
   ======================================================================== */
.lc-hero{
  position:relative;
  overflow:hidden;
  /* comfortable vertical space for the text over the background */
  padding: 80px 0 40px;
  text-align:center;

  /* Tweakable fade extents (percentage of hero height) */
  --fade-top: 25%;
  --fade-bottom: 34%;

  /* Layered backgrounds: two gradients (top/bottom) + the image */
  background-image:
    linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) var(--fade-top)),
    linear-gradient(to top,   #ffffff 0%, rgba(255,255,255,0) var(--fade-bottom)),
    url("/ui/images/olympus-landing.png");  /* <-- your Olympus art */
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* Position each layer:
     - The gradients anchor at top and bottom edges.
     - The image is nudged upward slightly so more sky shows behind text. */
  background-position: top center, bottom center, center calc(40% - 20px);
  border:0;
  box-shadow:none;
  margin-bottom:-1px;
}

/* Inner constraint so text doesn’t span full viewport width */
.lc-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:10px;
  background:#fff;
  pointer-events:none;
}

.lc-hero-inner{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Headline stays on a single line at all sizes */
.lc-hero h1{
  margin:0 0 .5rem;
  font-weight:750;
  letter-spacing:.1px;
  white-space:nowrap; overflow-wrap:normal;
  font-size:clamp(24px,7.6vw,56px);
  color: rgb(32, 26, 0);
}

/* Black body copy for readability over the soft sky */
.lc-hero p{
  color:var(--tc-text);
  max-width:760px;
  margin:.25rem auto 1.25rem;
  font-size:clamp(1rem,1.6vw,1.125rem);
}
.lc-hero-copy{
  display:block;
  width:calc(100% + 20px);
  max-width:none;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  padding:14px 5px;
  box-sizing:border-box;
  font-weight:400;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255, 254, 252, 0.35) 0%, rgba(255, 251, 235, 0.32) 100%);
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

@media (min-width: 641px){
  .lc-hero-copy{
    background:linear-gradient(180deg, rgba(255, 254, 252, 0.65) 0%, rgba(255, 251, 235, 0.62) 100%);
    font-weight:700;
  }
}

/* Hero CTAs (reuse chip visual) */
.lc-btnbar{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lc-btnbar--archive{
  margin-top:0;
  transform:translateY(240px);
}
.lc-scrollCue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:fit-content;
  margin:0 auto;
  transform:translateY(320px);
  color:rgba(255,255,255,.96);
  text-decoration:none;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  letter-spacing:0;
  opacity:.96;
  animation:lcScrollCueFloat 2.2s ease-in-out infinite;
}
.lc-scrollCue::after{
  content:"";
  width:1px;
  height:46px;
  background:linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,.2));
  box-shadow:0 0 10px rgba(255,255,255,.25);
}
.lc-scrollCue:hover{
  opacity:1;
}
.lc-btn--primary{ background:var(--tc-gold); color:#000000; border-color:rgba(11,26,42,.52); }
.lc-btn--primary:hover{ background:#dcb862; }
.lc-hero .lc-btn:not(.lc-btn--primary):not(.lc-btn--archive){ border-color:rgba(11,26,42,.52); }

.lc-btn--archive{
  position:relative;
  width:min(100%, 330px);
  min-height:40px;
  padding:.7rem 1.2rem;
  font-size:1.14rem;
  line-height:1.12;
  text-align:center;
  white-space:normal;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(11,26,42,.52);
  background:linear-gradient(135deg, #e8fbff 0%, #fff3b0 48%, #ffd17a 100%);
  color:var(--tc-navy);
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset, 0 10px 26px rgba(255,177,56,.28);
}
.lc-btn--archive::before{
  content:"";
  position:absolute;
  inset:-80% -25%;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.72) 50%, transparent 65%);
  transform:translateX(-70%) rotate(8deg);
  animation:lcArchiveShine 4.2s ease-in-out infinite;
  z-index:-1;
}
.lc-btn--archive:hover{
  border-color:rgba(11,26,42,.18);
  background:linear-gradient(135deg, #def8ff 0%, #ffef94 48%, #ffc95f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.75) inset, 0 14px 32px rgba(255,177,56,.34);
}

@keyframes lcArchiveShine{
  0%, 58%{ transform:translateX(-75%) rotate(8deg); }
  78%, 100%{ transform:translateX(75%) rotate(8deg); }
}

@keyframes lcScrollCueFloat{
  0%, 100%{ transform:translateY(320px); }
  50%{ transform:translateY(328px); }
}

/* Small-screen tweak:
   Slightly longer fades and a bit more image sky showing. */
@media (max-width: 640px){
  .lc-hero{
    --fade-top: 12%;
    --fade-bottom: 26%;
    background-position: top center, bottom center, center calc(45% - 20px);
    padding: 36px 0 18px;
  }
  .lc-scrollCue{
    transform:translateY(304px);
  }
  @keyframes lcScrollCueFloat{
    0%, 100%{ transform:translateY(304px); }
    50%{ transform:translateY(312px); }
  }
}


/* ============ 3) (Optional) HERO MEDIA CARD — not used now ==============

   You can remove this if you’re not placing a framed image/video block.
   Keeping it commented in case you want to bring it back later.

.lc-heroMedia{
  margin:26px auto 0; max-width:min(1080px,96vw);
  border-radius:20px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 8px 30px rgba(0,0,0,.06);
}
*/


/* ============ 4) GENERIC SECTIONS & CARDS =============================== */
.lc-section{ padding:60px 0; }
#how,
#mind,
#body,
#soul,
#interests{ padding-bottom:34px; }
#mind,
#body,
#soul,
#interests,
#rewards{ padding-top:28px; }
#mind{
  position:relative;
  overflow:hidden;
}
#body{
  position:relative;
  overflow:hidden;
  margin-top:-112px;
  padding-bottom:58px;
}
.lc-section h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:0 0 .5rem; }
.lc-section p{ color:var(--tc-text); max-width:860px; }

.lc-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.34rem .7rem;
  margin-bottom:10px;
  border:1px solid rgba(11,26,42,.14);
  border-radius:999px;
  background:#f8fafc;
  color:var(--tc-navy);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.lc-split{ display:grid; gap:18px; align-items:start; }

.lc-flow-visual{
  margin:18px 0 0;
  max-width:680px;
}
.lc-flow-visual img{
  display:block;
  width:100%;
  height:auto;
}

.lc-grid{ display:grid; gap:18px; margin-top:20px; }
.lc-section .lc-grid{
  gap:12px;
  margin-top:6px;
}
#mind .lc-grid{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:15px;
  min-height:clamp(570px, 82vw, 830px);
  padding-right:16px;
}
.lc-mind-score-visual{
  position:absolute;
  top:50%;
  right:clamp(-230px, -26vw, -112px);
  z-index:0;
  width:clamp(290px, calc(58vw + 30px), 460px);
  margin:0;
  opacity:.58;
  pointer-events:none;
  transform:translateY(calc(-50% - 60px));
}
.lc-mind-score-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(11,26,42,.2);
}
@media (min-width:700px){
  #mind .lc-grid{
    min-height:0;
  }
  #body{
    margin-top:0;
  }
  .lc-mind-score-visual{
    top:-26px;
    transform:none;
  }
}
@media (max-width:340px){
  #mind .lc-grid{
    min-height:500px;
    padding-right:0;
  }
  .lc-mind-score-visual{
    position:absolute;
    top:50%;
    right:-122px;
    width:min(92vw, 260px);
    margin:0;
    transform:translateY(calc(-50% - 60px));
  }
}
#body .lc-grid{
  position:relative;
  isolation:isolate;
}
#body .lc-card{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.41);
  backdrop-filter:blur(1px);
}
.lc-meals-score-visual{
  position:absolute;
  top:-26px;
  right:clamp(-230px, -26vw, -112px);
  z-index:0;
  width:clamp(290px, calc(58vw + 30px), 460px);
  margin:0;
  opacity:.52;
  pointer-events:none;
}
.lc-meals-score-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(11,26,42,.18);
}

.lc-card{ border:1px solid #e5e7eb; border-radius:16px; padding:18px; background:#fff; }
.lc-card-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin-top:16px;
  border-radius:10px;
}
.lc-puzzle-card{
  position:relative;
  z-index:1;
  border-color:rgba(11,26,42,.12);
  padding:16px 14px;
  line-height:1.2;
  backdrop-filter:blur(1.5px);
}
.lc-puzzle-card .lc-muted{
  margin-top:3px;
  font-size:.92rem;
}
.lc-puzzle-card--trivia{
  background:rgba(231,250,255,.32);
  border-color:#b6e7f6;
}
.lc-puzzle-card--crossword{
  background:rgba(255,251,237,.32);
  border-color:#f2e1a3;
}
.lc-puzzle-card--sudoku{
  background:rgba(247,255,244,.32);
  border-color:#c8efd7;
}
.lc-puzzle-card--wordsearch{
  background:rgba(251,245,255,.32);
  border-color:#dec7f2;
}
.lc-puzzle-card--logic{
  background:rgba(255,250,251,.32);
  border-color:#f4c6cc;
}
.lc-soul-stack{
  display:grid;
  gap:12px;
}
.lc-soul-card{
  background:rgba(247,240,255,.6);
  border-color:#ddc7f2;
}
#soul .lc-card{
  background:rgba(247,240,255,.6);
  border-color:#ddc7f2;
}
.lc-soul-image{
  display:block;
  width:min(100%, 260px);
  height:auto;
  margin:0 auto;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(68,42,96,.18);
}
.lc-interests-image{
  display:block;
  width:min(100%, 420px);
  aspect-ratio:1 / 1;
  object-fit:cover;
  height:auto;
  margin:0 auto;
  border-radius:18px;
  box-shadow:0 16px 34px rgba(11,26,42,.16);
}
.lc-rewards-stack{
  display:grid;
  gap:12px;
}
.lc-rewards-card{
  background:rgba(214,222,255,.6);
  border-color:rgba(126,111,220,.38);
}
.lc-rewards-image{
  display:block;
  width:min(100%, 230px);
  height:auto;
  margin:0 auto;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(38,48,120,.18);
}
.lc-muted{ color:var(--tc-text); }  /* keep class name; render black */

/* ============ 5) FOOTER ================================================= */
.lc-footer{
  padding:30px 0;
  border-top:1px solid #eee;
  text-align:center;
  color:var(--tc-text);
}
.lc-footer-links{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  font-size:.9rem;
}
.lc-footer-links a{
  color:var(--tc-blue);
  font-weight:700;
  text-decoration:none;
}


/* ============ 6) ACCESSIBILITY HELPERS ================================= */
.lc-srOnly{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap;
}

@media (max-width: 480px){
  .lc-container{ padding:0 16px; }   /* slimmer gutters on tiny phones */
  .lc-nav{ padding:10px 12px; gap:10px; }
  .lc-logo{ height:28px; }
  .lc-chip{ padding:.48rem .62rem; } /* tighter buttons, still tappable */
}




/* ============ 7) OPTIONAL / LEGACY: Olympus block component ==============
   You previously used a standalone Olympus panel *below* the hero.
   If you stick with the hero-as-background approach above, this section
   is not needed. Keeping it here for quick A/B testing; safe to delete.
   ======================================================================== */
/*
.lc-olympus-bg{
  width:100%;
  min-height:clamp(420px,58vw,820px);
  margin:26px auto 0;
  max-width:1800px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 30px rgba(0,0,0,.06);

  background-image:
    linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) var(--fade-top,16%)),
    linear-gradient(to top,   #ffffff 0%, rgba(255,255,255,0) var(--fade-bottom,20%)),
    url("/ui/images/olympus-landing.png");
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:center, center, center 40%;
}

@media (max-width:640px){
  .lc-olympus-bg{
    --fade-top:20%;
    --fade-bottom:24%;
    background-position:center, center, center 45%;
    border-radius:14px;
  }
}
*/