/* =====================================================
   Ray Dalio / LIU / Learn to Meditate
   Pixel-perfect rebuild against the high-res mockup
   - Single-column layout, max content width 900px
   - Section backgrounds span full viewport width
   - Alternating white / lavender / blue sections
   ===================================================== */

:root {
  --c-blue:      #419FE1;  /* RGB(65,159,225) - banner, find-out-more, what-is-tm, CTA */
  --c-blue-dark: #276088;  /* gradient end at bottom of blue sections */
  --c-lavender:  #ECF5FC;  /* RGB(236,245,252) - alternating section bg */
  --c-white:     #FFFFFF;
  --c-text:      #000000;
  --c-text-soft: #0e0e0e;
  --c-yellow:    #F5C518;  /* "To the LIU..." subtitle, scholarship "click here" */
  --c-red:       #C8221C;  /* "please click here" in quote */
  --c-rule:      #FFFFFF;  /* white rules on blue bg */
  --c-rule-blk:  #000000;  /* black rules on white/lavender */

  /* Reusable gradient for blue sections */
  --bg-blue-gradient: linear-gradient(180deg, var(--c-blue) 0%, var(--c-blue) 55%, var(--c-blue-dark) 100%);

  /* Content column. Section backgrounds are full-width.
     The container holds the inner content, centered. */
  --container-max: 580px;     /* default narrow column for quote/about/FAQ */
  --container-wide: 720px;    /* wider column for banner / find-out-more */
  --container-pad: 24px;      /* mobile fallback padding */

  /* Rawson Pro is the brand typeface. Weight ladder: 200/300/400/500/700/800.
     (Italics available at every weight.) */
  --ff-base: 'RawsonPro', 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff-base);
  font-size: 20px;
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

/* =====================================================
   CONTAINER (controls inner content width and padding)
   ===================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

.container--wide {
  max-width: var(--container-wide);
}

/* =====================================================
   SECTION BG MIXINS
   ===================================================== */
.blue-bg     { background: var(--bg-blue-gradient); color: var(--c-white); }
.lavender-bg { background: var(--c-lavender);        color: var(--c-text); }
.white-bg    { background: var(--c-white);           color: var(--c-text); }

/* =====================================================
   BANNER
   ===================================================== */
.banner {
  background: var(--bg-blue-gradient);
  color: var(--c-white);
  padding: 50px 0 0;          /* no bottom padding: Ray's video sits flush against next section */
  text-align: center;
}

.banner__title {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.banner__subtitle {
  margin: 0;
  padding: 16px 0;
  font-size: 28px;
  font-weight: 700;  /* Rawson Pro: no 600 — round up to Bold */
  color: var(--c-yellow);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.banner__cta {
  margin: 0;
  padding: 18px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: 0.30em;
}

.ray-video {
  display: block;
  position: relative;          /* anchor for the play icon overlay */
  margin: 40px auto 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 100%;
  max-width: 380px;
}

.ray-video .play-target__img {
  width: 100%;
  display: block;
  border-radius: 4px 4px 0 0;  /* flat bottom so it sits flush against next section */
}

/* =====================================================
   PLAY ICON OVERLAY (shared by Ray + Students videos)
   The icon is sized at 68px in the original design.
   Width is set with a percentage of its container so it
   scales proportionally with the photo.
   ===================================================== */
.play-target { position: relative; }

.play-icon {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.25));
  transform: translate(-50%, -50%);
}

.play-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ray's play icon: centered at 50.2% horizontal, 81.9% vertical of his photo.
   Original button is 68px in a 338x400 photo → 68/338 ≈ 20.1% of width. */
.play-icon--ray {
  left: 50.2%;
  top: 81.9%;
  width: 20.1%;
  aspect-ratio: 1 / 1;
}

/* Students' play icon: centered at 50% horizontal, 53.1% vertical of the photo.
   Original button 68px in a 900x570 photo → 68/900 ≈ 7.55% of width. */
.play-icon--students {
  left: 50%;
  top: 53.1%;
  width: 7.55%;
  aspect-ratio: 1 / 1;
}

/* =====================================================
   QUOTE
   ===================================================== */
.section--quote {
  background: var(--c-white);
  padding: 50px 0 50px;
  text-align: left;
}

.quote {
  font-size: 25px;
  font-weight: 700;  /* Rawson Pro: no 600 — round up to Bold */
  line-height: 1.4;
  color: var(--c-text);
  margin: 0 0 26px;
}

.rule {
  border: 0;
  border-top: 1px solid #000;
  margin: 0 0 24px;
}

.quote__link {
  font-size: 25px;
  font-weight: 700;  /* Rawson Pro: no 600 — round up to Bold */
  margin: 0;
  color: var(--c-text);
}

.quote__link a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.quote__link a:hover { opacity: 0.85; }

/* =====================================================
   STUDENTS VIDEO (Comments from Meditating Students)
   ===================================================== */
.section--students {
  padding: 0;
  background: #000;
}

.students-video {
  display: block;
  position: relative;          /* anchor for play icon + caption overlays */
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.students-video .play-target__img {
  width: 100%;
  display: block;
}

/* Caption text overlay — sits below the play button.
   Original caption is centered, white, around y=2925 source = 51% photo height.
   The caption baseline is just below the play icon (which is centered at 53.1%). */
.students-video__caption {
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translate(-50%, 0);
  color: #ffffff;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;  /* Rawson Pro: no 600 — round up to Bold */
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* =====================================================
   FIND OUT MORE (blue background)
   ===================================================== */
.section--find {
  padding: 38px 0 44px;
}

.find__title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  padding-bottom: 14px;
}

.find__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.find__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.find__list li:last-child { border-bottom: 0; }

.find__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  color: var(--c-text);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.22;
  text-decoration: none;
}

.find__list a:hover { opacity: 0.8; }

.find__list .arrow {
  flex: 0 0 auto;
  color: var(--c-white);
  font-size: 16px;
  line-height: 1;
}

/* =====================================================
   GRANT NOTE (lavender)
   ===================================================== */
.section--grant {
  padding: 60px 0 60px;
  text-align: center;
}

.grant {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0;
}

/* =====================================================
   ABOUT SECTIONS
   ===================================================== */
.section--about {
  padding: 60px 0 60px;
}

.about__title {
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--c-text);
  line-height: 1.2;
}

.section--about p {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 16px;
}

.plain-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================
   WHAT IS TM (blue, with woman photo as bottom-anchored background)
   The woman is positioned absolutely behind the text content
   so the text overlays the top of her hair while her full head
   remains visible below.
   ===================================================== */
.section--whatis {
  position: relative;
  padding: 60px 0 0;
  /* background gradient is inherited from .blue-bg */
  color: var(--c-white);
  overflow: hidden;
}

.section--whatis .container {
  position: relative;
  z-index: 2;        /* text sits above the woman photo */
}

.whatis__photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1;        /* photo behind text */
  pointer-events: none;
}

.whatis__photo img {
  width: 100%;
  display: block;
}

/* Add bottom padding equal to woman photo's effective height (about 55% of viewport width
   at 1200x637 aspect) so the section is tall enough to show her full head. */
.section--whatis {
  padding-bottom: 53vw;       /* mobile/narrow: photo aspect dictates section height */
}

@media (min-width: 720px) {
  .section--whatis {
    padding-bottom: 380px;    /* on desktop, photo is centered at fixed height */
  }
}

.whatis__title {
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--c-white);
  line-height: 1.2;
}

.section--whatis p {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
  margin: 0 0 14px;
}

/* =====================================================
   FAQ SECTIONS (scientific evidence, etc.)
   ===================================================== */
.section--faq {
  padding: 60px 0 60px;
}

.faq__title {
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--c-text);
  line-height: 1.2;
}

.section--faq p {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 16px;
}

.section--faq p.lead {
  margin-top: 18px;
  margin-bottom: 4px;
}

.section--faq p strong { font-weight: 800; }

.bullets {
  margin: 0 0 14px 0;
  padding: 0 0 0 24px;
  list-style: none;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-text);
}

.bullets li {
  position: relative;
  padding-left: 4px;
  margin-bottom: 0;
}

.bullets li::before {
  content: "•";
  position: absolute;
  left: -16px;
  top: 0;
  font-weight: 700;  /* Rawson Pro: no 600 — round up to Bold */
}

/* =====================================================
   SCHOLARSHIP CTA (blue)
   ===================================================== */
.section--scholarship {
  padding: 56px 0 60px;
  /* background gradient inherited from .blue-bg */
  color: var(--c-text);
}

.scholarship__title {
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--c-white);
  line-height: 1.2;
}

.section--scholarship p {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
}

.scholarship__link {
  color: var(--c-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.scholarship__link:hover { opacity: 0.85; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background: var(--c-white);
  padding: 32px 0 38px;
  text-align: center;
}

.footer__heading {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--c-text);
  letter-spacing: 0.18em;
}

.footer__partners {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  color: var(--c-text);
  letter-spacing: 0.005em;
}

/* =====================================================
   VIDEO MODAL
   ===================================================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade 0.18s ease-out;
}

.modal[hidden] { display: none; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__inner {
  width: 100%;
  max-width: 960px;
  position: relative;
}

.modal__embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
}

.modal__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  font-family: inherit;
}

.modal__close:hover { color: var(--c-yellow); }

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Mobile narrow — keep similar look, just smaller */
@media (max-width: 540px) {
  :root { --container-pad: 24px; }

  body { font-size: 17px; }

  .banner { padding: 38px 0 44px; }
  .banner__title    { font-size: 26px; }
  .banner__subtitle { font-size: 20px; padding: 14px 0; }
  .banner__cta      { font-size: 16px; letter-spacing: 0.26em; padding-top: 14px; }
  .ray-video        { max-width: 320px; margin-top: 30px; }

  .section--quote   { padding: 40px 0 40px; }
  .quote, .quote__link { font-size: 19px; }

  .section--find    { padding: 32px 0 36px; }
  .find__title      { font-size: 20px; }
  .find__list a     { font-size: 16px; padding: 11px 0; }

  .section--grant   { padding: 44px 0 44px; }
  .grant            { font-size: 19px; }

  .section--about,
  .section--faq,
  .section--scholarship { padding: 48px 0 48px; }
  .section--whatis      { padding-top: 48px; padding-bottom: 53vw; }

  .about__title,
  .faq__title,
  .whatis__title,
  .scholarship__title { font-size: 21px; }

  .section--about p,
  .section--faq p,
  .section--whatis p,
  .section--scholarship p,
  .bullets { font-size: 16px; }

  .footer { padding: 28px 0 32px; }
  .footer__heading  { font-size: 14px; }
  .footer__partners { font-size: 16px; }
}

@media (max-width: 380px) {
  :root { --container-pad: 18px; }
  .banner__title    { font-size: 22px; }
  .banner__subtitle { font-size: 17px; }
  .banner__cta      { font-size: 13px; letter-spacing: 0.22em; }
  .ray-video        { max-width: 260px; }
  .find__list a     { font-size: 15px; }
}