/* Shine Your Inner Light - coded home page body.
   Loaded only on the draft home page. The .topbar/.hdr rules are intentionally
   unscoped: the Xpro header template renders outside #syil-home and reuses them. */
:root{
    --ink:#2A2522; --ink-soft:#4E443D;
    --cream:#FBF7F0; --cream-warm:#F4EBDD;
    --terracotta:#B4553A; --terracotta-deep:#8F3F29;
    --sand:#F0D5B8; --green:#5F7355; --green-pale:#E4EADD;
    --brand-gold:#C99A2F; --gold-light:#E8C77A;
    --navy:#001327; --navy-deep:#000B18; --navy-lift:#0B3355;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--cream);font-family:'Inter',system-ui,sans-serif;color:var(--ink)}
  #syil-home img{max-width:100%;display:block}

  .wrap{max-width:1100px;margin:0 auto}
  .narrow{max-width:680px;margin:0 auto}

  /* ══════════ TOP BANNER ══════════ */
  .topbar{
    background:#1A0F0A;
    background-image:linear-gradient(100deg,#170D08 0%,#2C1A0F 58%,#3E2513 100%);
    color:var(--cream);
    font-size:14px;line-height:1.5;
    padding:11px clamp(16px,3vw,28px);
  }
  .topbar__in{
    max-width:1280px;margin:0 auto;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px 18px;text-align:center;
  }
  .topbar span{color:rgba(251,247,240,.80)}
  .topbar a{
    color:var(--sand);text-decoration:none;font-weight:500;
    border-bottom:1px solid rgba(240,213,184,.42);padding-bottom:1px;
    transition:border-color .18s ease,color .18s ease;
  }
  .topbar a:hover,.topbar a:focus-visible{color:var(--gold-light);border-bottom-color:var(--gold-light)}
  .topbar__sep{color:rgba(251,247,240,.28)}
  @media(max-width:620px){
    .topbar{font-size:13px}
    .topbar__sep{display:none}
  }

  /* ══════════ HEADER — carried over from the original ══════════ */
  .hdr{
    position:sticky;top:0;z-index:50;
    background:rgba(251,247,240,.94);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid rgba(95,115,85,.28);
  }
  .hdr__in{max-width:1280px;margin:0 auto;display:flex;align-items:center;
           gap:18px;padding:10px clamp(16px,3vw,28px)}
  .hdr__logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
  .hdr__logo img{width:34px;height:auto}
  .hdr__logo b{font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:600;
               color:var(--ink);line-height:1.15;white-space:nowrap}
  .hdr__nav{display:flex;align-items:center;gap:2px;margin-left:auto}
  .hdr__nav a{
    font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;
    padding:9px 11px;border-radius:8px;white-space:nowrap;
    transition:background .16s ease,color .16s ease;
  }
  .hdr__nav a:hover,.hdr__nav a:focus-visible{background:rgba(180,85,58,.09);color:var(--terracotta-deep)}
  .hdr__end{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .hdr__lang{
    font-size:12.5px;font-weight:500;color:var(--ink-soft);
    border:1px solid rgba(42,37,34,.18);border-radius:100px;
    padding:6px 12px;background:none;cursor:pointer;
  }
  .hdr__cta{
    background:var(--terracotta);color:var(--cream);text-decoration:none;
    font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:100px;
    white-space:nowrap;transition:background .16s ease;
  }
  .hdr__cta:hover{background:var(--terracotta-deep)}
  .hdr__burger{display:none;background:none;border:0;font-size:22px;
               color:var(--ink);cursor:pointer;padding:6px 8px;margin-left:auto}
  @media(max-width:1100px){
    .hdr__nav,.hdr__lang{display:none}
    .hdr__burger{display:block}
    .hdr__end{margin-left:8px}
  }
  @media(max-width:560px){ .hdr__cta{display:none} }

  /* ══════════ 1 · WELCOME — the mark offset, casting across ══════════ */
  .welcome{
    position:relative;overflow:hidden;isolation:isolate;
    background:#0E0806;
    background-image:linear-gradient(118deg,#1F1108 0%,#120A07 30%,#0A0504 62%,#26160C 100%);
    padding:clamp(60px,7.5vw,116px) clamp(20px,5vw,64px);
  }
  /* the glow, centred on the mark rather than on the section */
  .welcome::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(1180px 1000px at 19% 46%,
      rgba(232,199,122,.42) 0%, rgba(201,154,47,.21) 24%,
      rgba(201,154,47,.07) 46%, transparent 70%);
  }
  /* The rays live inside .mark and are centred on it, so the point they
     radiate from IS the logo at every width. Previously the SVG filled the
     section with a fixed origin while the logo was placed by the centred
     grid - two unrelated systems that only agreed at one window size.
     185.7vw = 2600 viewBox units at the original 100vw/1400 scale, so the
     reach and weight of the lines are unchanged. */
  .rays{
    position:absolute;z-index:1;pointer-events:none;
    left:50%;top:50%;width:185.7vw;height:185.7vw;
    transform:translate(-50%,-50%);
    animation:breathe 12s ease-in-out infinite;
  }
  .rays svg{width:100%;height:100%;display:block}
  @keyframes breathe{0%,100%{opacity:.76} 50%{opacity:1}}

  .welcome__in{position:relative;z-index:3;max-width:1180px;margin:0 auto}
  .welcome__grid{display:grid;grid-template-columns:.58fr 1.42fr;
                 gap:clamp(24px,4vw,56px);align-items:center}
  .mark{position:relative;z-index:1;width:min(380px,100%);
        margin-left:clamp(-130px,-8vw,-36px)}
  /* the glow belongs on the logo, not on .mark: .mark now contains the
     full-width rays layer, and an 82px blur over that is ruinous */
  .mark > img{position:relative;z-index:2;
              filter:drop-shadow(0 0 82px rgba(232,199,122,.58))}
  /* copy sits above the rays now that they originate inside .mark */
  .welcome__grid > div:not(.mark){position:relative;z-index:2}

  /* logo rays, cascading down from the mark on narrow screens. The desktop SVG
     throws its rays sideways from a point that falls off-screen once the grid
     stacks, so mobile gets its own fan anchored to the logo. */
  .mark__rays{display:none}
  @media(max-width:900px){
    /* .mark's drop-shadow would apply to the rays too, and an 82px blur over a
       large SVG is expensive on a phone - move the glow onto the logo itself */
    .mark{filter:none}
    .mark img{position:relative;z-index:2;
              filter:drop-shadow(0 0 58px rgba(232,199,122,.55))}
    .mark__rays{
      display:block;position:absolute;
      left:50%;top:52%;width:340%;height:340%;
      transform:translate(-50%,-50%);
      z-index:1;pointer-events:none;
      animation:markBreathe 12s ease-in-out infinite;
    }
    .mark__rays svg{width:100%;height:100%;display:block}
  }
  @keyframes markBreathe{0%,100%{opacity:.72}50%{opacity:1}}
  @media(prefers-reduced-motion:reduce){.mark__rays{animation:none}}

  .welcome h1{
    font-family:'Poppins',sans-serif;font-size:clamp(29px,4.1vw,50px);
    font-weight:600;line-height:1.09;letter-spacing:-.018em;
    color:var(--cream);margin:0 0 22px;max-width:19ch;
    text-shadow:0 1px 30px rgba(12,7,5,.62);
  }
  .welcome h1 .hello{
    display:block;font-weight:500;
    color:var(--sand);
    margin-bottom:.18em;
  }
  .welcome p{
    font-size:clamp(16.5px,1.5vw,19px);line-height:1.68;
    color:rgba(251,247,240,.88);margin:0 0 16px;max-width:56ch;
    text-shadow:0 1px 20px rgba(12,7,5,.58);
  }
  .welcome__sig{font-family:'Poppins',sans-serif;font-style:italic;
                font-size:clamp(17px,1.7vw,20px);color:var(--sand);margin-top:26px}

  /* ══════════ 2 · NARRATIVE — cream, links woven in ══════════ */
  .story{background:var(--cream);padding:clamp(52px,6.5vw,88px) clamp(20px,5vw,64px)}
  .story__inner{max-width:800px;margin:0 auto}
  .story p{font-size:18px;line-height:1.78;color:var(--ink-soft);margin:0 0 22px}
  .story p.first{font-size:20px;line-height:1.68;color:var(--ink)}
  .story a{
    color:var(--terracotta);text-decoration:none;font-weight:500;
    background-image:linear-gradient(var(--terracotta),var(--terracotta));
    background-size:100% 1px;background-repeat:no-repeat;background-position:0 92%;
    padding-bottom:1px;transition:background-size .2s ease,color .2s ease;
  }
  .story a:hover,.story a:focus-visible{
    color:var(--terracotta-deep);
    background-image:linear-gradient(var(--terracotta-deep),var(--terracotta-deep));
    background-size:100% 2px;
  }
  /* Two photos, one per side, hung partly into the section's gutters with
     negative outer margins. That widens the band visually without stretching the
     reading measure - the text column stays at a comfortable line length while
     the section stops looking like a narrow centred strip. The negative pull is
     dropped below 1120px, where there are no gutters left to hang into. */
  .story__photo{
    margin:6px 0 22px;
    width:clamp(200px,26vw,310px);
  }
  .story__photo img{width:100%;height:auto;display:block}

  .story__photo--left{
    float:left;margin-right:34px;
    border-radius:14px;overflow:hidden;
    box-shadow:0 18px 44px -26px rgba(42,37,34,.55);
  }
  .story__photo--right{float:right;margin-left:34px}

  /* the second portrait is a cut-out on transparency - a card frame and shadow
     would draw a box around nothing, so it gets neither */
  .story__photo--cut{
    border-radius:0;overflow:visible;box-shadow:none;background:none;
  }


  /* floats must not run into the callout or the sign-off */
  .give,.story hr{clear:both}
  /* Substack follow card in the story. Not a second .give block on purpose: that
     green ruled callout means "support the Foundation". This is an invitation to
     follow, so it gets its own shape - a rounded card with the text beside a
     button - in the terracotta the site's other Substack buttons already use.
     Scoped by id: .story p (0,1,1) would reset the margins, and .story a would
     paint the button's text and underline terracotta on terracotta. */
  #syil-home .follow{
    clear:both;display:flex;align-items:center;gap:18px 28px;
    margin:30px 0;padding:22px 26px;
    background:rgba(180,85,58,.07);border:1px solid rgba(180,85,58,.22);border-radius:16px;
  }
  #syil-home .follow__body{flex:1 1 auto;min-width:0}
  #syil-home .story .follow__title{
    margin:0 0 6px;font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;
    line-height:1.35;color:var(--ink);text-wrap:balance;
  }
  #syil-home .story .follow__text{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
  #syil-home .follow .btn,
  #syil-home .follow .btn:hover,
  #syil-home .follow .btn:focus,
  #syil-home .follow .btn:focus-visible,
  #syil-home .follow .btn:active{
    flex:0 0 auto;width:auto;padding:13px 24px;white-space:nowrap;
    color:var(--cream);background:var(--terracotta);
  }
  #syil-home .follow .btn:hover{background:var(--terracotta-deep)}
  #syil-home .follow .btn:focus-visible{outline:2px solid var(--terracotta-deep);outline-offset:3px}
  @media(max-width:700px){
    #syil-home .follow{flex-direction:column;align-items:stretch;padding:20px}
    #syil-home .follow .btn,
    #syil-home .follow .btn:hover,
    #syil-home .follow .btn:focus,
    #syil-home .follow .btn:focus-visible,
    #syil-home .follow .btn:active{width:100%;justify-content:center;white-space:normal}
  }

  @media(max-width:700px){
    .story__photo{float:none!important;width:min(270px,70%);
                  margin:0 auto 26px!important}

    /* Stacked, the second photo would land wherever it sits in the DOM - two
       paragraphs early, because its position there is chosen so the desktop
       float has text to wrap around. Reorder rather than move it: flex keeps
       DOM order for equal order values, so only the photo and what follows the
       callout need explicit ones. */
    .story__inner{display:flex;flex-direction:column}
    .story__photo--right{order:1}
    .give{order:2}
    .give ~ *{order:3}
    /* margins do not collapse in flex; without this the rule above the sign-off
       and the sign-off's own top margin would stack into a double gap */
    .story__sig{margin-top:0}
  }

  .story hr{clear:both}
  @media(max-width:700px){
    .story__photo{float:none;width:min(260px,68%);margin:0 auto 26px}
  }

  .story hr{border:0;border-top:1px solid var(--green);opacity:.3;margin:38px 0}
  .story__sig{font-family:'Poppins',sans-serif;font-style:italic;font-size:21px;
              line-height:1.5;color:var(--terracotta);margin-top:34px}
  .story__sig span{display:block;font-style:normal;font-size:16px;
                   color:var(--ink-soft);margin-top:10px}
  .give{background:var(--green-pale);border-left:3px solid var(--green);
        border-radius:0 10px 10px 0;padding:18px 22px;margin:30px 0}
  .give p{margin:0;font-size:16.5px;line-height:1.66}

  /* ══════════ 3 · FILM — warm cream ══════════ */
  .film{background:var(--cream-warm);padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px)}
  .film__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,58px);align-items:center}
  .film h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);
           font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 18px}
  .film p{font-size:17.5px;line-height:1.74;color:var(--ink-soft);margin:0 0 18px}
  .film__still{aspect-ratio:16/10;border-radius:16px;background:var(--cream-warm);
               border:1px solid rgba(95,115,85,.30);display:flex;align-items:center;
               justify-content:center;color:#9A9088;font-size:13px;text-align:center;padding:20px}

  /* video slot — keeps its 16:9 shape whatever goes inside it */
  .film__video{
    position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
    background:#1C1410;border:1px solid rgba(95,115,85,.30);
  }
  .film__video iframe,
  .film__video video{
    position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
    object-fit:cover;
  }
  .film__video .slot{
    position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;
    align-items:center;justify-content:center;text-align:center;padding:24px;
    color:rgba(251,247,240,.52);font-size:13.5px;line-height:1.6;
  }
  .film__video .slot b{color:rgba(251,247,240,.78);font-size:15px;font-weight:600}
  .film__cap{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
  .film__pull{border-left:3px solid var(--green);padding:4px 0 4px 20px;margin:26px 0}
  .film__pull p{margin:0;font-size:18px;line-height:1.66;color:var(--ink)}

  /* the Dyer quote — closes the film section */
  .dyer{
    margin:clamp(40px,5vw,58px) auto 0;padding-top:clamp(32px,4vw,44px);
    max-width:640px;text-align:center;
    border-top:1px solid rgba(95,115,85,.32);
  }
  .dyer blockquote{
    margin:0;font-family:'Poppins',sans-serif;font-style:italic;font-weight:400;
    font-size:clamp(20px,2.4vw,27px);line-height:1.46;color:var(--ink);
  }
  .dyer cite{
    display:block;margin-top:18px;font-style:normal;
    font-size:14px;font-weight:500;color:var(--terracotta);
  }

  .btn{display:inline-flex;align-items:center;border-radius:100px;
       font-size:15px;font-weight:600;padding:14px 30px;text-decoration:none;
       transition:transform .18s,box-shadow .18s,background .18s}
  .btn--terra{background:var(--terracotta);color:var(--cream)}
  .btn--terra:hover{background:var(--terracotta-deep);transform:translateY(-2px);
                    box-shadow:0 10px 26px rgba(180,85,58,.30)}
  .btn--cream{background:var(--cream);color:var(--terracotta-deep)}
  .btn--cream:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.26)}
  .btn--gold{background:var(--gold-light);color:#12203A}
  .btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,199,122,.26)}

  /* ══════════ 3 · ENERGYPHOTO — navy, the app's own colours ══════════ */
  .app{
    background:var(--navy);color:var(--cream);
    background-image:
      radial-gradient(1000px 460px at 78% 12%, rgba(11,51,85,.62), transparent 62%),
      linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-lift) 100%);
    padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px);
  }
  .why{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);
       align-items:start;margin:0 0 clamp(40px,5vw,60px);
       padding-bottom:clamp(36px,4.5vw,52px);
       border-bottom:1px solid rgba(232,199,122,.22)}
  .why__portrait{width:clamp(96px,11vw,148px);aspect-ratio:1;border-radius:50%;
                 overflow:hidden;flex-shrink:0;
                 box-shadow:0 18px 44px -22px rgba(0,0,0,.9)}
  .why__portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .why h2{font-family:'Poppins',sans-serif;font-size:clamp(22px,2.6vw,30px);
          font-weight:600;line-height:1.16;letter-spacing:-.01em;
          color:var(--cream);margin:0 0 14px}
  .why p{font-size:16.5px;line-height:1.68;color:rgba(251,247,240,.80);
         margin:0 0 14px;max-width:58ch}
  .why p em{font-style:italic;color:rgba(251,247,240,.92)}
  .why__sig{font-family:'Poppins',sans-serif;font-style:italic;
            font-size:clamp(17px,1.7vw,20px);color:var(--gold-light);
            margin:22px 0 0!important}
  @media(max-width:620px){
    .why{grid-template-columns:1fr;gap:20px}
  }
  .app h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:600;
          line-height:1.12;letter-spacing:-.015em;color:var(--cream);margin:0 0 16px}
  .app__sub{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.66;
            color:rgba(251,247,240,.80);margin:0;max-width:58ch}
  /* EnergyPhoto before/after carousel — same behaviour as the one on
     energyphoto.app: native scroll-snap, one example per slide, dots kept in
     sync by scroll position. Namespaced .epc so it cannot collide with the
     .car book carousels earlier on the page. */
  .epc{position:relative;max-width:680px;margin:clamp(32px,4.5vw,48px) auto 0}
  .epc__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;
              scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .epc__track::-webkit-scrollbar{display:none}
  .epc__slide{flex:0 0 100%;scroll-snap-align:center}
  .epc__ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(9px,2vw,20px)}
  .epc__ba figure{margin:0}
  .epc__frame{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;
              background:rgba(251,247,240,.05);border:1px solid rgba(232,199,122,.24);
              box-shadow:0 20px 54px -30px rgba(0,0,0,.9)}
  .epc__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .epc__cap{margin-top:10px;font-size:12px;font-weight:500;letter-spacing:.13em;
            color:rgba(251,247,240,.55)}
  .epc__aft .epc__cap{color:var(--gold-light)}
  .epc__label{margin:15px 0 0;font-size:15px;line-height:1.55;text-align:center;
              color:rgba(251,247,240,.62)}
  .epc__label b{color:var(--cream);font-weight:600}
  .epc__dots{display:flex;justify-content:center;gap:0;margin-top:2px}
  .epc__dots button{width:44px;height:44px;padding:18px;border:0;border-radius:50%;
                    background:rgba(251,247,240,.26);background-clip:content-box;cursor:pointer}
  .epc__dots button[aria-current="true"]{background:var(--gold-light);background-clip:content-box;
                                          padding-inline:11px;border-radius:99px}
  .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .voice{margin:0;display:flex;flex-direction:column;background:rgba(251,247,240,.055);border:1px solid rgba(251,247,240,.12);
         border-radius:14px;padding:20px 22px}
  .voice p{margin:0;font-size:15.5px;line-height:1.62;color:rgba(251,247,240,.86)}
  .voice cite{display:block;margin-top:auto;padding-top:12px;font-style:normal;font-size:13px;color:var(--gold-light)}
  .presence{margin:20px 0 0;font-size:14.5px;line-height:1.66;
            color:rgba(251,247,240,.60);max-width:62ch}

  /* privacy note */
  .privnote{
    display:flex;gap:12px;align-items:flex-start;
    border:1px solid rgba(232,199,122,.28);border-radius:14px;
    padding:16px 20px;margin-top:26px;max-width:64ch;
    font-size:15.5px;line-height:1.62;color:rgba(251,247,240,.78);
  }
  .privnote b{color:var(--cream);font-weight:600}

  /* three ways in */
  .app__h3{font-family:'Poppins',sans-serif;font-size:clamp(22px,2.6vw,30px);
           font-weight:600;color:var(--cream);margin:clamp(44px,5vw,64px) 0 8px}
  .app__lead{font-size:16.5px;line-height:1.68;color:rgba(251,247,240,.76);
             margin:0 0 26px;max-width:56ch}
  /* a micro line reads as a continuation of the lead above it, so the lead
     hands its bottom gap down to the micro. Without :has support the pair
     simply sits 26px apart - looser than intended, never broken. */
  .app__lead:has(+ .app__micro){margin-bottom:6px}
  .app__micro{margin:0 0 26px;max-width:56ch}
  .uses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .use{background:rgba(251,247,240,.055);border:1px solid rgba(251,247,240,.13);
       border-radius:14px;padding:22px}
  .use span{display:block;font-size:12.5px;letter-spacing:.02em;
            color:var(--gold-light);margin-bottom:8px}
  .use b{display:block;font-family:'Poppins',sans-serif;font-size:19px;
         font-weight:600;color:var(--cream);margin-bottom:8px}
  .use p{margin:0;font-size:15px;line-height:1.6;color:rgba(251,247,240,.78)}

  /* what a reading gives you */
  .gets{margin-top:26px;border-top:1px solid rgba(251,247,240,.14)}
  .get{padding:18px 0;border-bottom:1px solid rgba(251,247,240,.10)}
  .get b{display:block;font-size:16.5px;font-weight:600;color:var(--cream);margin-bottom:5px}
  .get p{margin:0;font-size:15px;line-height:1.6;color:rgba(251,247,240,.72);max-width:58ch}

  /* the comparison table */
  .vs{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
  .vs th,.vs td{padding:14px 12px;text-align:left;vertical-align:top;
                border-bottom:1px solid rgba(251,247,240,.11)}
  .vs thead th{font-size:13.5px;font-weight:500;color:rgba(251,247,240,.62);
               border-bottom-color:rgba(251,247,240,.22)}
  .vs thead th.ours{color:var(--gold-light);font-weight:600}
  .vs tbody th{font-weight:500;color:rgba(251,247,240,.80);width:30%}
  .vs td.them{color:rgba(251,247,240,.50)}
  .vs td.ours{color:var(--cream);font-weight:500}

  /* no negative frequency */
  .nofreq{
    margin-top:clamp(40px,5vw,58px);border-radius:16px;padding:28px 30px;
    background:linear-gradient(150deg, rgba(95,115,85,.22), rgba(11,51,85,.28));
    border:1px solid rgba(169,191,160,.30);max-width:66ch;
  }
  .nofreq b{display:block;font-family:'Poppins',sans-serif;
            font-size:clamp(20px,2.3vw,26px);font-weight:600;line-height:1.3;
            color:var(--cream);margin-bottom:12px}
  .nofreq p{margin:0;font-size:16px;line-height:1.68;color:rgba(251,247,240,.80)}

  /* press strip */
  .press{background:var(--cream-warm);padding:34px clamp(20px,5vw,64px);text-align:center;
         border-top:1px solid rgba(95,115,85,.22);border-bottom:1px solid rgba(95,115,85,.22)}
  .press p{margin:0 0 14px;font-size:13.5px;letter-spacing:.02em;color:var(--ink-soft)}
  .press ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
            justify-content:center;gap:14px 40px}
  .press li{display:flex}
  .press a{display:block;line-height:0;border-radius:6px;
           opacity:.75;transition:opacity .18s ease,transform .18s ease}
  .press a:hover,.press a:focus-visible{opacity:1;transform:translateY(-1px)}
  .press img{height:clamp(34px,4.4vw,52px);width:auto;max-width:190px;
             object-fit:contain;display:block}


  @media(max-width:820px){
    .uses{grid-template-columns:1fr}
    .vs{font-size:14px}
    .vs th,.vs td{padding:12px 8px}
  }
  /* On a phone the rows came out at 99/50/50/75/75/75/75/99/50px. The padding
     was already identical everywhere - the unevenness is purely how many lines
     each cell wraps to in narrow columns. Two levers, in order of effect:
     a tighter line-height shrinks the GAP between a one- and a three-line row,
     and fixed column widths stop the middle column (which is an em dash in six
     rows out of nine) from taking space the value column needs. */
  @media(max-width:560px){
    .vs{table-layout:fixed;font-size:13.5px}
    .vs th,.vs td{padding:11px 6px;line-height:1.45}
    .vs thead th{font-size:12.5px;line-height:1.35}
    /* With table-layout:fixed the column widths come from the FIRST row only, so
       widths set on tbody cells are ignored - the first two columns split what
       was left and the label column came out too narrow for the word
       "Brainwaves", which then broke mid-word. Set on the head row instead, and
       wide enough for the longest single word. */
    .vs thead th:nth-child(1){width:31%}
    /* 21% left only 58px of text space, which broke "One scan a day" over three
       lines and made that row the tallest on the table. The value column can
       spare it - its entries wrap to two lines either way. */
    .vs thead th:nth-child(2){width:25%}
    .vs thead th:nth-child(3){width:44%}
    .vs th,.vs td{overflow-wrap:normal;word-break:normal;hyphens:none}
    /* Rows still varied 43/62/82px depending on whether a cell ran to one, two or
       three lines. On a table row, height behaves as a MINIMUM, so setting it to
       the two-line height lifts every short row to match while the one long row
       is still free to grow. Expressed in em so it tracks the font size. */
    .vs tbody tr{height:calc(2 * 1.45em + 22px)}
  }
  .app__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:38px}
  .fine{font-size:13.5px;color:rgba(251,247,240,.58);margin:0}

  /* affiliates: an aside, deliberately quieter than the button above it */
  .affil{
    margin:26px 0 0;padding-top:22px;max-width:60ch;
    border-top:1px solid rgba(232,199,122,.22);
    font-size:14.5px;line-height:1.7;color:rgba(251,247,240,.66);
  }
  .affil a{
    color:var(--gold-light);text-decoration:none;font-weight:500;
    border-bottom:1px solid rgba(232,199,122,.42);padding-bottom:1px;
    transition:border-color .18s ease;
  }
  .affil a:hover,.affil a:focus-visible{border-bottom-color:var(--gold-light)}

  /* ══════════ 4 · BOOKS — terracotta ══════════ */
  .books{
    background:var(--terracotta-deep);color:var(--cream);
    background-image:linear-gradient(158deg,#6E2E1E 0%,#8F3F29 56%,#B4553A 100%);
    padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px);
  }
  .books h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:600;
            line-height:1.12;letter-spacing:-.015em;color:var(--cream);margin:0 0 16px}
  .books__sub{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.66;
              color:rgba(251,247,240,.86);margin:0 0 40px;max-width:58ch}
  .titles{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  /* column layout so the CTA can sit at the bottom: one card now carries a
     Read more panel, and without this the shorter card would show a block of
     dead space under its button when the other is expanded. */
  .title{min-width:0;background:rgba(251,247,240,.07);border:1px solid rgba(251,247,240,.15);
         border-radius:16px;padding:22px 22px 26px;
         display:flex;flex-direction:column}
  .title > .btn{margin-top:auto;align-self:flex-start}

  /* Read more: a native <details>, so it works with no JS and announces its
     own expanded/collapsed state to screen readers. */
  .title__more{margin:0 0 18px}
  .title__more > summary{
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    font-size:14px;font-weight:600;color:var(--brand-gold);
    list-style:none;width:max-content;
  }
  .title__more > summary::-webkit-details-marker{display:none}
  .title__more > summary::marker{content:""}
  .title__more > summary:hover{color:var(--gold-light)}
  .title__more > summary:focus-visible{outline:2px solid var(--brand-gold);outline-offset:3px}
  .title__chev{display:inline-block;transition:transform .18s ease;font-size:16px;line-height:1}
  .title__more[open] > summary .title__chev{transform:rotate(90deg)}
  .title__more > p{margin:12px 0 0}
  @media(prefers-reduced-motion:reduce){.title__chev{transition:none}}

  /* carousel */
  .car{position:relative;margin-bottom:20px}
  .car__win{overflow:hidden;border-radius:10px;background:rgba(0,0,0,.18)}
  .car__track{display:flex;transition:transform .38s cubic-bezier(.4,0,.2,1)}
  .car__slide{min-width:100%;aspect-ratio:3/4;display:flex;align-items:center;
              justify-content:center;color:rgba(251,247,240,.42);font-size:13px;
              text-align:center;padding:16px}
  .car__slide img{width:100%;height:100%;object-fit:contain;display:block}
  .car__btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;cursor:pointer;
    background:rgba(20,10,6,.55);border:1px solid rgba(251,247,240,.28);
    color:var(--cream);font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .18s ease;
  }
  .car__btn:hover{background:rgba(20,10,6,.8)}
  .car__btn[disabled]{opacity:.3;cursor:default}
  .car__btn--prev{left:10px}
  .car__btn--next{right:10px}
  .car__dots{display:flex;justify-content:center;gap:0;margin-top:5px}
  .car__dot{width:30px;height:30px;padding:11.5px;border-radius:50%;cursor:pointer;
            background:rgba(251,247,240,.30);background-clip:content-box;
            border:0;transition:background .18s,padding .18s}
  .car__dot[aria-current="true"]{background:var(--cream);background-clip:content-box;
                                 padding-inline:6px;border-radius:99px}

  .title h3{font-family:'Poppins',sans-serif;font-size:20px;font-weight:600;
            color:var(--cream);margin:0 0 9px;line-height:1.25}
  .title p{font-size:15.5px;line-height:1.64;color:rgba(251,247,240,.82);margin:0 0 18px}
  .disclosure{margin-top:32px;font-size:13px;line-height:1.6;color:rgba(251,247,240,.62)}
  @media(prefers-reduced-motion:reduce){.car__track{transition:none}}

  /* ══════════ 6 · MEDITATIONS — cream ══════════ */
  .med{background:var(--cream);padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px)}
  .med h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:600;
          line-height:1.12;letter-spacing:-.015em;margin:0 0 16px}
  .med p{font-size:17.5px;line-height:1.74;color:var(--ink-soft);margin:0 0 20px}
  .tracks{display:grid;gap:12px;margin:30px 0 26px}
  /* one row per meditation on the page, then the directory button */
  .med__more{margin:-8px 0 30px}
  /* each meditation is its own item: its description, then its row. Scoped so
     the paragraph margin beats Astra's .entry-content p (0,2,0). */
  #syil-home .medlist{margin:30px 0 26px}
  #syil-home .meditem > p{margin:0 0 12px}
  #syil-home .meditem .tracks{margin:0}
  #syil-home .meditem + .meditem{margin-top:30px}
  :is(#syil-home,#pum-1551) a.track__get{text-decoration:none}
  /* the directory popup: group headings reuse .gall__group from the GU popup */
  #pum-1551 .medall .tracks{margin:10px 0 6px}
  #pum-1551 .medg__sub{margin:0 0 2px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
  #pum-1551 .tracks__note{margin:8px 0 0}
  /* each row opens the shared meditation popup with its language preselected,
     so the language choice made here is not asked for again */
  /* Astra paints bare <button> with var(--ast-global-color-0), which is #046bd2.
     A mouse click leaves the row in :focus but NOT :focus-visible, so styling
     only hover/focus-visible let that blue through on click. Every state is
     pinned to the page palette instead. */
  .track,
  .track:hover,
  .track:focus,
  .track:focus-visible,
  .track:active{
    display:flex;align-items:center;gap:14px;width:100%;text-align:left;
    background:var(--cream-warm);color:var(--ink);
    border:1px solid rgba(95,115,85,.26);border-radius:12px;padding:15px 18px;
    font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .18s ease,background .18s ease,transform .18s ease;
  }
  .track:hover,.track:focus-visible{
    border-color:var(--green);background:#EFE6D6;transform:translateY(-1px);
  }
  /* keyboard users still get a visible ring, in the page's own accent */
  .track:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
  .track:active{transform:translateY(0)}
  .track b{font-size:15.5px;font-weight:600;color:var(--ink)}
  .track__native{font-size:13.5px;color:var(--ink-soft)}
  .track__voice{font-size:13.5px;color:var(--brand-gold);font-weight:500;margin-left:auto}
  .track__get{font-size:13.5px;font-weight:600;color:var(--terracotta);white-space:nowrap}
  .track:hover .track__get{color:var(--terracotta-deep)}
  .tracks__note{
    margin:0 0 26px;font-size:13.5px;line-height:1.62;color:var(--ink-soft);
  }
  @media(max-width:560px){
    /* three columns will not fit a phone; let the credit take its own line */
    .track{flex-wrap:wrap;gap:6px 12px}
    .track__voice{margin-left:0;width:100%;order:3}
    /* Rita wants every meditation row the same size. With the action sharing the
       first line, a long title ("Grounding Light Meditation", "Portuguese
       Português") pushed it onto an extra line: rows came out 74px and 96px.
       Giving the action its own line makes every row title / voice / action, so
       they match because of structure, not a fixed height. Scoped so it beats the
       :is(#syil-home,#pum-1551) .track__get reset. */
    :is(#syil-home,#pum-1551) .track__get{margin-left:0;order:4;width:100%;text-align:left}
  }

  /* ══════════ 7 · FOUNDATION — earthy green ══════════ */
  .found{
    background:#47563F;color:var(--cream);
    background-image:linear-gradient(158deg,#333F2D 0%,#4A5A41 56%,#657558 100%);
    padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px);
  }
  .found h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:600;
            line-height:1.12;letter-spacing:-.015em;color:var(--cream);margin:0 0 16px}
  /* Same lockup as "Why I made EnergyPhoto™": circular portrait beside the lead.
     Pink ring picked up from the Foundation page on energyphoto.app. */
  .found__lead{
    display:grid;grid-template-columns:auto 1fr;
    gap:clamp(20px,3vw,38px);align-items:start;
    margin:0 0 clamp(30px,4vw,42px);
  }
  .found__portrait{
    width:clamp(96px,11vw,148px);aspect-ratio:1;
    border-radius:50%;overflow:hidden;flex-shrink:0;
    border:3px solid #EBA7BD;
    box-shadow:0 18px 44px -22px rgba(0,0,0,.55);
  }
  .found__portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .found__lead .found__sub{margin-bottom:0}
  @media(max-width:620px){
    .found__lead{grid-template-columns:1fr;gap:18px}
  }

  .found__sub{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.66;
              color:rgba(251,247,240,.86);margin:0 0 38px;max-width:58ch}
  .progs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
  .prog{background:rgba(251,247,240,.08);border:1px solid rgba(251,247,240,.16);
        border-radius:14px;padding:22px 22px 24px}
  .prog h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;
           color:var(--cream);margin:0 0 8px}
  .prog p{font-size:15px;line-height:1.62;color:rgba(251,247,240,.80);margin:0}
  .share{font-size:clamp(19px,2.2vw,25px);line-height:1.45;color:var(--sand);
         font-family:'Poppins',sans-serif;max-width:34ch;margin:0 0 26px}

  /* ══════════ 8 · GLOBAL UPLIFTERS — warm cream ══════════ */
  .gu{background:var(--cream-warm);padding:clamp(58px,7vw,100px) clamp(20px,5vw,64px);
      text-align:center}
  .gu h2{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:600;
         line-height:1.12;letter-spacing:-.015em;margin:0 auto 16px;max-width:16ch}
  .gu p{font-size:17.5px;line-height:1.74;color:var(--ink-soft);margin:0 auto 22px;max-width:56ch}
  .gu em{font-style:normal;color:var(--terracotta);font-weight:600}
  .gu p a{
    color:var(--terracotta);text-decoration:none;font-weight:500;
    border-bottom:1px solid rgba(180,85,58,.45);padding-bottom:1px;
    transition:border-color .18s ease,color .18s ease;
  }
  .gu p a:hover,.gu p a:focus-visible{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}
  .gu__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:30px}
  .btn--ghost{background:transparent;color:var(--ink);
              border:1.5px solid rgba(95,115,85,.45)}
  .btn--ghost:hover{border-color:var(--terracotta);background:rgba(180,85,58,.06);
                    transform:translateY(-2px)}

  /* featured GUs — name, site, description, optional episode */
  .gu__feature{margin-top:clamp(44px,5.5vw,64px);padding-top:clamp(36px,4.5vw,48px);
               border-top:1px solid rgba(95,115,85,.30);text-align:left}
  .gu__feature h3{font-family:'Poppins',sans-serif;font-size:22px;font-weight:600;
                  margin:0 0 8px;text-align:center}
  .gu__feature > p{font-size:16px;line-height:1.68;color:var(--ink-soft);
                   margin:0 auto 30px;max-width:52ch;text-align:center}
  /* Three across rather than stacked. The card follows the directory on the
     Global Uplifters site: avatar initials, specialty eyebrow, name, links out.
     Same markup is reused inside the "everyone" popup, so .gcard is shared. */
  /* The section is a 680px reading column, which left each card 215px wide and
     the text beside the avatar only 107px - the eyebrow wrapped to five lines.
     Break the grid out of the column, capped so it never exceeds the section's
     own padding at any width. */
  .picks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
  @media(min-width:901px){
    .picks{
      width:min(1040px, calc(100vw - 2 * clamp(20px, 5vw, 64px)));
      margin-left:50%;transform:translateX(-50%);
    }
  }
  .gcard{
    display:flex;flex-direction:column;gap:14px;min-width:0;
    background:var(--cream);border:1px solid rgba(95,115,85,.26);
    border-radius:16px;padding:20px;
  }
  .gcard__top{display:flex;align-items:center;gap:14px;min-width:0}
  .gcard__avatar{
    flex:0 0 auto;width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
    color:#FFF;text-shadow:0 1px 2px rgba(42,37,34,.28);
  }
  .gcard__id{min-width:0}
  .gcard__eyebrow{
    display:block;font-size:10.5px;font-weight:600;letter-spacing:.10em;
    line-height:1.35;text-transform:uppercase;color:var(--brand-gold);margin-bottom:4px;
  }
  .gcard__name{
    font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;
    color:var(--ink);line-height:1.25;display:block;
  }
  .gcard__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
  .gcard__ep,.gcard__site,
  .gcard__ep:hover,.gcard__site:hover,
  .gcard__ep:focus,.gcard__site:focus{
    font-size:13.5px;font-weight:500;text-decoration:none;
    padding:7px 14px;border-radius:100px;white-space:nowrap;
    transition:background .16s ease,color .16s ease,border-color .16s ease;
  }
  .gcard__ep{background:rgba(95,115,85,.12);color:var(--green)}
  .gcard__ep:hover{background:rgba(95,115,85,.20)}
  .gcard__site{border:1px solid rgba(180,85,58,.40);color:var(--terracotta)}
  .gcard__site:hover{background:rgba(180,85,58,.08);border-color:var(--terracotta);color:var(--terracotta-deep)}

  .gu__more{margin:26px 0 38px;text-align:center}

  @media(max-width:900px){ .picks{grid-template-columns:1fr 1fr} }
  @media(max-width:620px){ .picks{grid-template-columns:1fr} }

  /* ---- the popup listing everyone ---- */
  .gall{text-align:left}
  .gall__group{
    font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;
    letter-spacing:.10em;text-transform:uppercase;color:var(--brand-gold);
    margin:26px 0 12px;padding-bottom:8px;
    border-bottom:1px solid rgba(95,115,85,.24);
  }
  .gall__group:first-child{margin-top:0}
  .gall__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .gall__note{
    margin:26px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft);
  }
  @media(max-width:700px){ .gall__grid{grid-template-columns:1fr} }

  .gu__disclosure{margin:26px auto 0;font-size:13px;line-height:1.62;
                  color:var(--ink-soft);max-width:60ch;text-align:center}

  /* every anchor lands below a sticky header rather than under it */
  html{scroll-behavior:smooth}
  #syil-home section[id]{scroll-margin-top:96px}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  a:focus-visible{outline:2px solid var(--sand);outline-offset:4px;border-radius:3px}
  .film a:focus-visible{outline-color:var(--terracotta)}

  /* .mark img{ mix-blend-mode:multiply; }  ← if the PNG isn't transparent */

  @media(max-width:860px){
    .film__grid,.voices,.titles,.progs{grid-template-columns:1fr}

    /* Mobile reading order: title → intro video → copy. The h2 and all the copy
       live in the grid's first column and the video in the second, so once the
       grid is a single column the video would land after everything. Both column
       wrappers become display:contents, which promotes their children to grid
       items so order can interleave them. Gap drops to 0 because the paragraphs
       already carry their own margins — grid gap on top of those double-spaced. */
    #syil-home .film__grid{gap:0}
    #syil-home .film__grid > div{display:contents}
    #syil-home .film__grid h2{order:1}
    #syil-home .film__grid .film__video{order:2;margin:0 0 26px}
    #syil-home .film__grid > div > p,
    #syil-home .film__grid .film__pull,
    #syil-home .film__grid .btn{order:3}
    .film__still{order:-1}
    .btn{width:100%;justify-content:center}
  }
  @media(max-width:560px){
    .welcome h1{max-width:none}
    .mark{width:min(215px,60vw)}
  }
  @media(max-width:900px){
    .welcome__grid{grid-template-columns:1fr}
    .mark{width:min(230px,58%);margin-left:clamp(-58px,-7vw,-20px);margin-bottom:24px}
    .rays{display:none}
    .welcome::before{background:radial-gradient(940px 760px at 22% 15%,
      rgba(232,199,122,.38) 0%, rgba(201,154,47,.17) 28%, transparent 66%)}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ══════════ XPRO HEADER TEMPLATE ══════════
     The header is an Xpro Theme Builder template so the menu stays editable in
     Appearance > Menus and the mobile burger comes from the menu widget. These
     rules dress that builder output as the .hdr band the design calls for.
     Element ids (syiltop1 / syilhdr1 / …) are set in the template, not generated,
     so they are stable across re-saves. */

  /* Additional CSS pads <body> by --header-height for the OLD fixed header.
     This header is not fixed - the bar below the topbar is sticky instead - so
     that padding is dead space above the page. "html body" outranks the bare
     "body" rule, which is !important and printed after this sheet. */
  html body{padding-top:0!important}

  /* Sticky lives on the whole header, not on the beige bar. position:sticky can
     only travel inside its parent box, and the bar's parent ends right below
     it - so it had nowhere to go. Offsetting the header by the topbar height
     scrolls the brown strip away and parks the beige bar at the top, which is
     what the mockup does with two sibling elements. --syil-topbar-h is measured
     in home.js because the strip wraps to two lines on narrow screens. */
  /* Additional CSS forces header.xpro-theme-builder-header to height:0 !important
     for the OLD header, whose nav is floated out of flow. Ours is in normal flow,
     so that collapsed the bar to 1px: its content overlapped the hero (reading as
     a cropped hero) and a zero-height box cannot stick. "body header.…" outranks it. */
  body header.xpro-theme-builder-header{
    height:auto!important;min-height:0;
    position:sticky;z-index:50;
    top:calc(var(--syil-topbar-h, 0px) * -1);
  }
  /* overflow-x:hidden on <body> turns it into a scroll container, and a sticky
     element then sticks to that instead of the viewport - i.e. never. clip gives
     the same horizontal containment without creating one. */
  html body{overflow-x:clip}
  .xpro-theme-builder-header,
  .xpro-theme-builder-header > nav{display:block;min-height:0}
  .xpro-theme-builder-header > nav{height:auto}
  .xpro-theme-builder-header .elementor-widget:not(:last-child){margin-bottom:0}

  /* topbar scrolls away; only the bar below it sticks, matching the design */
  .elementor-element-syiltop1{padding:0!important}
  .elementor-element-syiltop2{width:100%}

  .elementor-element-syilhdr1{
    position:relative;padding:0!important;
    background:rgba(251,247,240,.94);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid rgba(95,115,85,.28);
  }
  .elementor-element-syilhdr2{
    max-width:1280px;margin:0 auto;
    display:flex;align-items:center;flex-wrap:nowrap;
    gap:18px;padding:10px clamp(16px,3vw,28px)!important;
  }
  .elementor-element-syillogo,
  .elementor-element-syillang,
  .elementor-element-syilcta{flex:0 0 auto;width:auto!important}
  .elementor-element-syilnav{flex:0 1 auto;width:auto!important;margin-left:auto}

  /* nav items — the widget defaults to 16px/20px padding, which wraps 8 items */
  .xpro-elementor-horizontal-navbar-nav{flex-wrap:nowrap!important;gap:2px}
  /* the CTA also exists as a menu item so it can appear in the mobile drawer;
     the desktop bar has its own button, so hide the duplicate there */
  .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li.nav-cta{display:none}
  .xpro-elementor-horizontal-navbar-nav > li > a{
    font-family:'Poppins',sans-serif!important;
    font-size:13.5px!important;font-weight:500!important;
    padding:9px 11px!important;border-radius:8px;white-space:nowrap;
    line-height:1.4!important;margin:0!important;
  }
  .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a,
  .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a:link,
  .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a:visited,
  .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a:active{
    color:var(--ink)!important;
  }
  .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  .xpro-elementor-horizontal-navbar-nav > li > a:focus-visible{
    background:rgba(180,85,58,.09);
  }

  .xpro-theme-builder-header .hdr__cta{color:var(--cream)}
  .xpro-theme-builder-header .hdr__cta:hover{color:var(--cream)}

  /* GTranslate select, sized down to sit beside the CTA like the design's pill */
  .elementor-element-syillang .elementor-shortcode{line-height:0}
  .elementor-element-syillang select,
  .elementor-element-syillang .gt_selector{
    font-family:'Inter',system-ui,sans-serif;
    font-size:12.5px;font-weight:500;color:var(--ink-soft);
    border:1px solid rgba(42,37,34,.18);border-radius:100px;
    padding:6px 8px;background:none;cursor:pointer;max-width:86px;
  }

  /* The site's Additional CSS hides .xpro-elementor-horizontal-navbar-wrapper
     outright below 1024px, because the OLD header replaces it with a custom
     drawer. That rule is global, so it also kills this header's menu panel.
     Re-enable it for this header only, at higher specificity - the shared rule
     is left alone so the live header keeps working. */
  @media(max-width:1024px){
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-wrapper.active{display:block!important}
    .elementor-element-syilnav .xpro-elementor-horizontal-menu-overlay{display:block}
  }

  @media(max-width:1100px){
    .elementor-element-syillang{display:none}
  }
  @media(max-width:560px){
    .elementor-element-syilcta{display:none}
  }

  /* ══════════ XPRO FOOTER TEMPLATE ══════════
     Bookends the dark topbar at the other end of the page. Link lists are real
     icon-list widgets so they stay editable in the builder; these rules only
     dress them. */

  #xpro-theme-builder-footer{
    background:#1A0F0A;
    background-image:linear-gradient(100deg,#170D08 0%,#2C1A0F 58%,#3E2513 100%);
    color:var(--cream);
  }
  #xpro-theme-builder-footer .elementor-widget:not(:last-child){margin-bottom:0}

  .elementor-element-syilfcols{
    max-width:1100px;margin:0 auto;
    display:grid!important;grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:clamp(24px,3.4vw,46px);align-items:start;
    padding:clamp(48px,6vw,72px) clamp(20px,5vw,64px) clamp(30px,3.5vw,42px)!important;
  }
  .elementor-element-syilfcols > .e-con{min-width:0;width:auto!important}

  #xpro-theme-builder-footer h3{
    font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
    letter-spacing:.02em;color:var(--gold-light);margin:0 0 14px;
  }
  .elementor-element-syilfbrand h3{font-size:17px;color:var(--sand)}
  .elementor-element-syilfbt p{
    font-size:14.5px;line-height:1.66;color:rgba(251,247,240,.66);margin:0 0 18px;max-width:34ch;
  }

  #xpro-theme-builder-footer .elementor-icon-list-items{list-style:none;margin:0;padding:0}
  #xpro-theme-builder-footer .elementor-icon-list-item a,
  #xpro-theme-builder-footer .elementor-icon-list-text{
    font-size:14.5px;line-height:1.5;color:rgba(251,247,240,.78)!important;
    text-decoration:none;transition:color .16s ease;
  }
  #xpro-theme-builder-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
  #xpro-theme-builder-footer .elementor-icon-list-item a:focus-visible .elementor-icon-list-text{
    color:var(--gold-light)!important;
  }
  #xpro-theme-builder-footer .elementor-icon-list-icon{display:none}

  /* social row */
  .elementor-element-syilfsoc .elementor-social-icon{
    background:rgba(251,247,240,.08)!important;
    width:34px!important;height:34px!important;font-size:15px!important;
    border-radius:9px;
    transition:background .16s ease,transform .16s ease;
  }
  .elementor-element-syilfsoc .elementor-social-icon i,
  .elementor-element-syilfsoc .elementor-social-icon svg{
    color:rgba(251,247,240,.82);fill:rgba(251,247,240,.82);font-size:15px;
  }
  .elementor-element-syilfsoc .elementor-social-icon:hover{
    background:rgba(232,199,122,.20)!important;transform:translateY(-1px);
  }

  /* bottom bar */
  .elementor-element-syilfbot{
    max-width:1100px;margin:0 auto;
    padding:22px clamp(20px,5vw,64px) 34px!important;
    border-top:1px solid rgba(251,247,240,.12);
  }
  .elementor-element-syilfcopy p{
    font-size:13.5px;color:rgba(251,247,240,.62);margin:0 0 8px;
  }
  .elementor-element-syilfdisc p{
    font-size:12.5px;line-height:1.6;color:rgba(251,247,240,.42);margin:0;max-width:92ch;
  }

  @media(max-width:760px){
    .elementor-element-syilfcols{gap:26px}
    .elementor-element-syilfcols{grid-template-columns:1fr 1fr}
    .elementor-element-syilfbrand{grid-column:1 / -1}
  }


  /* footer bottom bar: two columns, matching the live site */
  .elementor-element-syilfbot{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(24px,4vw,60px);align-items:start;
  }
  .elementor-element-syilfcopy{grid-column:1;grid-row:1}
  .elementor-element-syilflinks{grid-column:1;grid-row:2;margin:10px 0 16px}
  .elementor-element-syilfdisc{grid-column:1;grid-row:3}
  .elementor-element-syilfshort{grid-column:2;grid-row:1}
  .syilf__links{display:flex;flex-wrap:wrap;gap:18px}
  .syilf__links a{
    font-size:13px;color:var(--gold-light);text-decoration:none;
    transition:color .16s ease;
  }
  .syilf__links a:hover,.syilf__links a:focus-visible{color:var(--sand)}
  .elementor-element-syilfshort p{
    font-size:13px;line-height:1.6;color:rgba(251,247,240,.55);margin:0;
    text-align:right;max-width:34ch;
  }
  @media(max-width:760px){
    .elementor-element-syilfbot{grid-template-columns:1fr}
    .elementor-element-syilfshort{grid-column:1;grid-row:4;margin-top:14px}
    .elementor-element-syilfshort p{text-align:left}
  }


  /* ══════════ MOBILE DRAWER ══════════
     Xpro's own panel is a dim full-screen overlay with floating pill links. The
     live site uses a right-hand drawer (cream, calc(100% - 56px) wide, round
     close button, dim backdrop) built from bespoke Elementor containers around
     the old mega menu. Rebuilding that structure for a flat 8-item menu buys
     nothing, so these rules dress Xpro's panel as the same drawer - and keep the
     menu editable in Appearance > Menus. Backdrop-to-close is in home.js. */
  @media(max-width:1024px){

    /* backdrop-filter creates a containing block for fixed-position descendants,
       so the drawer was being positioned inside the header bar instead of the
       viewport (70px tall, pinned under the header). The blur is a desktop
       refinement; drop it where the drawer lives and make the bar opaque. */
    .elementor-element-syilhdr1{
      backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
      background:#FBF7F0;
    }

    /* the wrapper becomes the backdrop */
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-wrapper.active{
      display:block!important;
      position:fixed!important;inset:0!important;
      width:100%!important;height:100%!important;
      background:rgba(42,37,34,.30)!important;
      z-index:1998;
    }

    /* the drawer itself */
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar{
      position:fixed;top:0;right:0;bottom:0;
      width:calc(100% - 56px);max-width:420px;
      background:#FBF7F0;
      padding:88px 0 40px;
      overflow-y:auto;
      box-shadow:-18px 0 48px -28px rgba(0,0,0,.55);
      z-index:1999;
    }

    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav{
      display:block!important;width:100%;margin:0;padding:0;
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li{
      width:100%;border-bottom:.5px solid rgba(42,37,34,.08);
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a{
      display:block;width:100%;
      background:transparent!important;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important;
      font-size:19px!important;font-weight:700!important;
      color:#2A2522!important;
      padding:15px 26px!important;border-radius:0!important;
      text-align:left!important;
      transition:color .18s ease,background .18s ease;
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a:hover,
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li > a:focus-visible{
      color:#C99A2F!important;background:rgba(201,154,47,.07)!important;
    }

    /* the CTA, as a button at the foot of the drawer */
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li.nav-cta{
      display:block!important;border-bottom:0;padding:22px 26px 8px;
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li.nav-cta > a{
      display:block!important;text-align:center!important;
      background:var(--terracotta)!important;color:var(--cream)!important;
      font-size:16px!important;font-weight:600!important;
      padding:14px 22px!important;border-radius:100px!important;
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-navbar-nav > li.nav-cta > a:hover{
      background:var(--terracotta-deep)!important;color:var(--cream)!important;
    }

    /* round close button, pinned to the drawer's top-right */
    .elementor-element-syilnav .xpro-elementor-horizontal-menu-close{
      position:fixed!important;top:20px;right:20px;
      width:40px!important;height:40px!important;
      border-radius:50%!important;border:0!important;
      background:rgba(42,37,34,.06)!important;color:#2A2522!important;
      display:flex!important;align-items:center;justify-content:center;
      font-size:18px;cursor:pointer;z-index:2000;
      transition:background .18s ease;
    }
    .elementor-element-syilnav .xpro-elementor-horizontal-menu-close:hover{
      background:rgba(201,154,47,.15)!important;
    }
  }

  /* Astra underlines links inside .entry-content at (0,2,1), which outranks a
     single class. Scope by id to win. The popup cards live outside #syil-home,
     so #pum-1536 is covered too. */
  #syil-home .gcard__ep, #syil-home .gcard__site,
  #syil-home .gcard__ep:hover, #syil-home .gcard__site:hover,
  #syil-home .gcard__ep:focus, #syil-home .gcard__site:focus,
  #pum-1536 .gcard__ep, #pum-1536 .gcard__site,
  #pum-1536 .gcard__ep:hover, #pum-1536 .gcard__site:hover,
  #pum-1536 .gcard__ep:focus, #pum-1536 .gcard__site:focus{
    text-decoration:none;
  }

  /* ══════════ THEME / KIT OVERRIDES ══════════
     In the standalone mockup these rules stand alone. Inside WordPress the page
     also inherits Astra's element styles and the Elementor kit, and those beat a
     single-class selector: `.elementor-kit-12 h3` (0,1,1) outranks `.app__h3`
     (0,1,0). Re-assert the design's own values at #syil-home specificity (1,1,0)
     rather than sprinkling !important through the sheet above. Values here are
     copied from the rules above - keep the two in step. */

  /* headings — the kit paints every h1..h6 with its own colour */
  #syil-home .app__h3{color:var(--cream)}
  #syil-home .app h2,
  #syil-home .why h2{color:var(--cream)}
  #syil-home .books h2,
  #syil-home .title h3{color:var(--cream)}
  #syil-home .found h2,
  #syil-home .prog h3{color:var(--cream)}

  /* buttons — the kit colours anchors and adds a border to them */
  #syil-home .btn,
  #syil-home .btn:hover,
  #syil-home .btn:focus{border:0;text-decoration:none}
  #syil-home .btn--terra{background:var(--terracotta);color:var(--cream)}
  #syil-home .btn--terra:hover{background:var(--terracotta-deep)}
  #syil-home .btn--cream{background:var(--cream);color:var(--terracotta-deep)}
  #syil-home .btn--gold{background:var(--gold-light);color:#12203A}
  /* .btn:focus above is (1,2,0) and outranks .btn--ghost (1,1,0), so the outline
     disappeared whenever the button held focus - which it does after a popup it
     opened is closed. Match that specificity for every state. */
  #syil-home .btn--ghost,
  #syil-home .btn--ghost:hover,
  #syil-home .btn--ghost:focus,
  #syil-home .btn--ghost:focus-visible,
  #syil-home .btn--ghost:active{
    background:transparent;color:var(--ink);text-decoration:none;
    border:1.5px solid rgba(95,115,85,.45);
  }
  #syil-home .btn--ghost:hover{border-color:var(--terracotta);background:rgba(180,85,58,.06)}


  /* Astra draws a 1px #D1D5DB border around bare <table>. The comparison table
     only ever wanted its own row rules, so that outline read as a stray pale
     line boxing the section. Cells already match the design. */
  #syil-home .vs{border:0}
  #syil-home .vs th,
  #syil-home .vs td{border-left:0;border-right:0;border-top:0}

  /* Astra styles bare <blockquote> with a 5px left rule and 20px padding.
     .voice sets its own border so it is unaffected; the Dyer quote never
     declared one, so Astra's showed through as a stray line on its left. */
  #syil-home .dyer blockquote{border:0;padding:0}

  /* carousel-controls-astra-blue */
  /* Astra paints bare <button> with --ast-global-color-0 (#046bd2) on focus and
     active, and a mouse click leaves :focus behind with no :focus-visible - so
     the arrows and dots stayed blue after being clicked. Every interaction state
     is pinned to the carousel's own colours. Keyboard focus keeps a visible ring,
     in the brand gold rather than the theme blue, so this fixes the colour
     without removing the focus indicator. */
  #syil-home .car__btn,
  #syil-home .car__btn:hover,
  #syil-home .car__btn:focus,
  #syil-home .car__btn:focus-visible,
  #syil-home .car__btn:active{
    background:rgba(20,10,6,.55);
    border:1px solid rgba(251,247,240,.28);
    color:var(--cream);
    box-shadow:none;
  }
  #syil-home .car__btn:hover:not([disabled]),
  #syil-home .car__btn:active:not([disabled]){background:rgba(20,10,6,.8)}
  #syil-home .car__btn:focus:not(:focus-visible){outline:none}
  #syil-home .car__btn:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}

  #syil-home .car__dot,
  #syil-home .car__dot:hover,
  #syil-home .car__dot:focus,
  #syil-home .car__dot:focus-visible,
  #syil-home .car__dot:active{
    background:rgba(251,247,240,.30);background-clip:content-box;
    border:0;box-shadow:none;
  }
  #syil-home .car__dot[aria-current="true"],
  #syil-home .car__dot[aria-current="true"]:hover,
  #syil-home .car__dot[aria-current="true"]:focus,
  #syil-home .car__dot[aria-current="true"]:focus-visible,
  #syil-home .car__dot[aria-current="true"]:active{
    background:var(--cream);background-clip:content-box;
  }
  #syil-home .car__dot:focus:not(:focus-visible){outline:none}
  #syil-home .car__dot:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-4px}

  /* the EnergyPhoto carousel builds the same kind of bare <button> dots */
  #syil-home .epc__dots button,
  #syil-home .epc__dots button:hover,
  #syil-home .epc__dots button:focus,
  #syil-home .epc__dots button:focus-visible,
  #syil-home .epc__dots button:active{
    background:rgba(251,247,240,.26);background-clip:content-box;
    border:0;box-shadow:none;
  }
  #syil-home .epc__dots button[aria-current="true"],
  #syil-home .epc__dots button[aria-current="true"]:hover,
  #syil-home .epc__dots button[aria-current="true"]:focus,
  #syil-home .epc__dots button[aria-current="true"]:focus-visible,
  #syil-home .epc__dots button[aria-current="true"]:active{
    background:var(--gold-light);background-clip:content-box;
  }
  #syil-home .epc__dots button:focus:not(:focus-visible){outline:none}
  #syil-home .epc__dots button:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-6px}

  /* meditation-row-voice-links */
  /* The row used to BE the button. An <a> cannot live inside a <button>, so the
     row is now a plain container: the meditation is a real <button>, and the
     artist name is a real link. The button's ::after stretches over the whole
     row so clicking anywhere still opens the popup, and the artist link is
     lifted above that overlay so it stays clickable. Two tab stops, both real
     controls, no nested interactive elements. */
  :is(#syil-home,#pum-1551) .track{position:relative;cursor:default}
  :is(#syil-home,#pum-1551) .track__get{
    margin-left:0;font:inherit;font-size:13.5px;font-weight:600;
    color:var(--terracotta);white-space:nowrap;cursor:pointer;
    background:none;border:0;padding:0;box-shadow:none;
  }
  :is(#syil-home,#pum-1551) .track__get::after{content:"";position:absolute;inset:0;border-radius:12px}
  :is(#syil-home,#pum-1551) .track:hover .track__get{color:var(--terracotta-deep)}
  /* Astra paints bare <button> backgrounds on focus/active - pin every state */
  :is(#syil-home,#pum-1551) .track__get:hover,
  :is(#syil-home,#pum-1551) .track__get:focus,
  :is(#syil-home,#pum-1551) .track__get:focus-visible,
  :is(#syil-home,#pum-1551) .track__get:active{background:none;border:0;box-shadow:none}
  :is(#syil-home,#pum-1551) .track__get:focus:not(:focus-visible){outline:none}
  :is(#syil-home,#pum-1551) .track__get:focus-visible::after{outline:2px solid var(--brand-gold);outline-offset:2px}

  /* the artist link: above the overlay, and Astra underlines bare links */
  :is(#syil-home,#pum-1551) a.track__voice{
    position:relative;z-index:1;
    color:var(--brand-gold);text-decoration:none;
    border-bottom:1px solid rgba(201,154,47,.38);
  }
  :is(#syil-home,#pum-1551) a.track__voice:hover,
  :is(#syil-home,#pum-1551) a.track__voice:focus-visible{
    color:var(--gold-light);border-bottom-color:var(--gold-light);
  }
  :is(#syil-home,#pum-1551) a.track__voice:focus-visible{outline:2px solid var(--brand-gold);outline-offset:3px}
  /* Rita has no link, so her name carries no underline - match the 1px so all
     nine rows stay exactly the same height */
  :is(#syil-home,#pum-1551) span.track__voice{border-bottom:1px solid transparent}

  /* foundation-second-cta */
  .found__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
  /* .btn--ghost is built for light sections (dark ink, green border) and would
     all but vanish on this dark green. Same idea, inverted for the ground it
     sits on. States are pinned at (1,2,0) because .btn:focus outranks a plain
     modifier class - the bug we hit on the ghost buttons earlier. */
  #syil-home .btn--cream-ghost,
  #syil-home .btn--cream-ghost:hover,
  #syil-home .btn--cream-ghost:focus,
  #syil-home .btn--cream-ghost:focus-visible,
  #syil-home .btn--cream-ghost:active{
    background:transparent;color:var(--cream);text-decoration:none;
    border:1.5px solid rgba(251,247,240,.50);
  }
  #syil-home .btn--cream-ghost:hover{
    border-color:var(--cream);background:rgba(251,247,240,.10);
    transform:translateY(-2px);
  }
  #syil-home .btn--cream-ghost:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){#syil-home .btn--cream-ghost:hover{transform:none}}

  /* gu-feature-micro */
  /* subtext under the lead. .gu__feature > p (0,2,0) would otherwise style this
     like the lead itself, so the override matches that specificity and sits
     later in the sheet. The lead hands its 30px gap down to the micro. */
  .gu__feature > p:has(+ .gu__micro){margin-bottom:6px}
  .gu__feature > .gu__micro{
    font-size:13px;line-height:1.62;color:var(--ink-soft);
    margin:0 auto 30px;max-width:52ch;text-align:center;
  }

  /* gcard-eyebrow-role-titles */
  /* The eyebrow was built for one- or two-word essence labels, so it was 11px
     uppercase with .12em tracking. The cards now carry real role titles - up to
     65 characters - and uppercase plus wide tracking makes those close to
     unreadable and three lines deep. Sentence case at a slightly larger size
     reads properly and still sits clearly below the name in the hierarchy. */
  #syil-home .gcard__eyebrow,
  #pum-1536 .gcard__eyebrow{
    text-transform:none;
    letter-spacing:.005em;
    font-size:12.5px;
    line-height:1.38;
    margin-bottom:4px;
  }

  /* app-kicker */
  /* A one-line mental model, sitting between the headline and the detail below
     it. Italic Poppins in sand echoes the hero sign-off, and is far enough from
     the h2 in size and weight that the two do not compete. */
  .app__kicker{
    font-family:'Poppins',sans-serif;font-style:italic;
    font-size:clamp(18px,2vw,23px);line-height:1.4;
    color:var(--sand);margin:0 0 16px;max-width:34ch;
  }
  .app__kicker img.emoji{width:1em;height:1em;vertical-align:-.12em}

  /* app-couplet-spacing */
  /* Astra's .entry-content p (0,2,0) sets margin-bottom:1.6em and outranks a
     bare .app__kicker / .app__micro (0,1,0), which pushed the two halves of the
     couplet 34px apart. Scoped by id so the pair sits tight and reads as one
     thought. */
  /* one line: the 34ch cap was breaking it after "your". Kept off a single line
     only on phones, where it would otherwise run past the viewport. */
  #syil-home .app__kicker{margin-bottom:16px;max-width:none;white-space:nowrap}
  @media(max-width:640px){
    #syil-home .app__kicker{white-space:normal;max-width:34ch}
  }
  #syil-home .app__micro{margin-bottom:26px}

  /* childrens-book-endorsement */
  /* Mike Dooley's endorsement, sitting in the gap the pinned CTA leaves in this
     card. Astra styles a bare <blockquote> with a 5px left rule and 20px padding,
     so both are reset - the same thing that put a stray line beside the Dyer
     quote in the film section. */
  #syil-home .title__quote{
    border:0;margin:0 0 20px;padding:0;
    font-family:'Poppins',sans-serif;font-style:italic;
    font-size:15px;line-height:1.5;color:var(--sand);
  }
  #syil-home .title__quote cite{
    display:block;margin-top:9px;font-style:normal;
    font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;
    color:rgba(251,247,240,.66);
  }

  /* about-rita */
  /* Plain text, as written. Only what the section needs to exist: the band,
     the portrait, and body copy at a readable measure. The paragraph margin is
     scoped by id because Astra's .entry-content p (0,2,0) beats a bare class. */
  .bio{background:var(--green-pale);padding:clamp(52px,6.5vw,88px) clamp(20px,5vw,64px)}
  .bio__grid{display:grid;grid-template-columns:auto 1fr;
             gap:clamp(22px,3.4vw,44px);align-items:start}
  .bio__portrait{width:clamp(110px,13vw,168px);aspect-ratio:1;border-radius:50%;
                 overflow:hidden;flex-shrink:0;
                 box-shadow:0 18px 44px -22px rgba(0,0,0,.55)}
  .bio__portrait img{width:100%;height:100%;object-fit:cover}
  #syil-home .bio h2{
    font-family:'Poppins',sans-serif;font-size:clamp(26px,3.2vw,38px);font-weight:600;
    line-height:1.14;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px;
  }
  /* text-wrap:pretty stops a one-word last line ("it." stranded alone); the
     browser pulls a word down from the line above instead. Unsupported
     browsers just fall back to normal wrapping. */
  #syil-home .bio p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);
                    margin:0 0 16px;max-width:62ch;text-wrap:pretty}
  #syil-home .bio p:last-child{margin-bottom:0}
  /* Two traps in this section, both from rules written for body copy:
     - #syil-home .bio p (1,2,0) outranks a bare .bio__cta (1,1,0), so the top
       margin was being wiped and the button sat 16px under the last line.
     - #syil-home .bio a (1,2,0) paints links terracotta with an underline rule,
       which landed terracotta text on the terracotta button - invisible.
     Both are pinned here at (1,3,0). */
  #syil-home .bio p.bio__cta{margin:28px 0 0;max-width:none;line-height:1}
  #syil-home .bio p.bio__cta .btn,
  #syil-home .bio p.bio__cta .btn:hover,
  #syil-home .bio p.bio__cta .btn:focus,
  #syil-home .bio p.bio__cta .btn:focus-visible,
  #syil-home .bio p.bio__cta .btn:active{
    background:var(--terracotta);color:var(--cream);
    border:0;border-bottom:0;text-decoration:none;line-height:1;
    font-weight:600; /* .bio a sets 500; keep the site button weight */
  }
  #syil-home .bio p.bio__cta .btn:hover{background:var(--terracotta-deep)}
  #syil-home .bio p.bio__cta .btn:focus-visible{outline:2px solid var(--terracotta-deep);outline-offset:3px}
  /* .btn is inline-flex, so bare text plus a notranslate span inside it became
     three separate flex items: the spaces between them collapsed and on a phone
     they sat side by side as narrow columns. One .btn__label wrapper makes the
     whole label a single flex item that wraps like ordinary text. */
  #syil-home .bio p.bio__cta .btn__label{display:block;text-align:center;line-height:1.3;text-wrap:balance}
  /* balance alone split the brand across lines ("Shine Your Inner / Light") on a
     phone. The brand name never breaks; the wrap happens around it instead. */
  #syil-home .bio p.bio__cta .btn__label .notranslate{white-space:nowrap}
  /* microtext under the Substack button - (1,3,0) so it clears the body-copy
     #syil-home .bio p rule, which would otherwise make it full-size text. */
  #syil-home .bio p.bio__micro{margin:10px 0 0;max-width:52ch;font-size:13.5px;
                               line-height:1.55;color:var(--ink-soft)}
  #syil-home .bio a{color:var(--terracotta);text-decoration:none;font-weight:500;
                    border-bottom:1px solid rgba(180,85,58,.45)}
  #syil-home .bio a:hover,#syil-home .bio a:focus-visible{
    color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}

  @media(max-width:700px){
    .bio__grid{grid-template-columns:1fr;gap:18px}
    .bio__portrait{width:clamp(96px,26vw,132px)}
  }

  /* app-companion-book */
  /* The manifestation journal moved out of the books section to sit with the app
     it is written for. On its own it would be a lone narrow card in a wide dark
     band, so above 900px it lays out sideways: carousel left, copy right. The
     card keeps .title styling, which is translucent cream and reads fine on navy. */
  .appbook{margin:clamp(38px,5vw,56px) 0 clamp(30px,4vw,44px)}
  /* the copy lives in one cell. Spanning the carousel across several rows made
     the browser share its extra height between them, which pushed the heading,
     text and button apart - a column of gaps rather than a block of copy. */
  /* small badge above the guide copy: the book ships free inside the app */
  #syil-home .title__free{
    font-size:12px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
    color:var(--gold-light);margin:0 0 10px;
  }
  .title__body{display:flex;flex-direction:column}
  #syil-home .title--wide .title__body > .btn{margin-top:6px;align-self:flex-start}
  @media(min-width:900px){
    #syil-home .title--wide{
      display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
      gap:0 clamp(24px,3vw,40px);align-items:start;padding:24px;
    }
    #syil-home .title--wide > .car{align-self:start}
    #syil-home .title--wide > .title__body > h3{margin-top:2px}
  }

  /* ══════════ GIFTS POPUP (#1279) ══════════ */
  /* The whole panel is the hero: the same 118deg brown, the same warm glow and
     the logo ray angles. Everything inside has to be re-lit for a dark ground -
     PUM's theme paints a white card and dark text, so each piece is overridden
     at #pum-1279 (1,1,0), which outranks the theme's .pum-theme-48 (0,2,0). */
  #pum-1279 .pum-container{
    background:#0E0806;
    background-image:linear-gradient(118deg,#1F1108 0%,#120A07 30%,#0A0504 62%,#26160C 100%);
    border:1px solid rgba(232,199,122,.20);border-radius:16px;
    box-shadow:0 30px 90px -20px rgba(0,0,0,.75);overflow:hidden;
  }
  #pum-1279 .pum-content{padding:0;color:var(--cream);position:relative}
  #pum-1279 .pum-container::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(620px 460px at 50% 16%,
      rgba(232,199,122,.34) 0%, rgba(201,154,47,.17) 28%,
      rgba(201,154,47,.06) 50%, transparent 74%);
  }
  #pum-1279 .elementor-element{position:relative;z-index:1}
  /* Elementor pads its own container; the panel supplies the padding instead. */
  #pum-1279 .elementor-1279 .elementor-element-flmpop1{padding:0}

  #pum-1279 .flmhero{
    position:relative;overflow:hidden;text-align:center;padding:24px 24px 2px;
  }
  #pum-1279 .flmhero__rays{
    position:absolute;z-index:0;pointer-events:none;
    left:50%;top:78px;width:1000px;height:1000px;transform:translate(-50%,-50%);
  }
  #pum-1279 .flmhero__in{position:relative;z-index:1}
  #pum-1279 .flmhero__mark{width:60px;height:60px;margin:0 auto 9px;display:block}
  /* Tracking has to come down as the size goes up - .18em was set for 13px and
     looks gappy once the word is this large. */
  #pum-1279 .flmhero__welcome{
    margin:0 0 7px;font-family:'Poppins',sans-serif;
    font-size:clamp(18px,4vw,22px);font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);
  }
  #pum-1279 .flmhero__title{
    margin:0;font-family:'Poppins',sans-serif;font-size:clamp(23px,5vw,30px);
    font-weight:600;line-height:1.14;letter-spacing:-.015em;color:var(--cream);
  }

  #pum-1279 .flmbody{padding:0 clamp(20px,5vw,34px)}
  #pum-1279 .flmbody h3{
    margin:16px 0 11px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);text-align:center;
  }
  /* Each gift is now a single title, no separate description line. The old rule
     styled EVERY span in the card, which caught the notranslate span wrapping
     EnergyPhoto(TM) inside the title - display:block forced it onto a line of its
     own in a dimmer colour. Nothing here targets a bare span for that reason. */
  #pum-1279 .flmgift{
    background:rgba(232,199,122,.07);border:1px solid rgba(232,199,122,.22);
    border-radius:12px;padding:14px 20px;margin:0 auto 10px;
    font-size:14.5px;line-height:1.5;font-weight:600;color:var(--cream);
    /* the card was running the full width while the copy only reached part way
       across the last line, leaving a visibly empty right edge. Capped and
       centred so the box sits under the text instead of past it. */
    max-width:378px;text-align:center;text-wrap:balance;
  }

  /* the Brevo form, re-lit for the dark ground */
  #pum-1279 #sib-container{padding-top:12px}
  /* First and last name share a row: it removes a whole 40px field plus its gap,
     so the closing note clears the fold without the panel having to scroll.
     Row margins come from the Additional CSS block with !important, so they are
     zeroed here and the spacing comes from the flex gap instead. */
  #pum-1279 #sib-form{display:flex;flex-wrap:wrap;gap:9px 10px;align-items:flex-start}
  #pum-1279 .flm-brevo-row{flex:1 1 100%;margin:0 !important}
  #pum-1279 .flm-brevo-row:nth-of-type(2),
  #pum-1279 .flm-brevo-row:nth-of-type(3){flex:1 1 calc(50% - 5px);min-width:0}
  /* They stay side by side at every width. The placeholder was shortened from
     "Last name (optional)" to "Last name" so it still reads at ~126px on a
     phone, where the iOS anti-zoom rule forces the input to 16px. */
  #pum-1279 .flm-brevo-input{
    background:rgba(255,255,255,.06);border:1px solid rgba(232,199,122,.30);
    color:var(--cream);border-radius:100px;
  }
  #pum-1279 .flm-brevo-input::placeholder{color:rgba(251,247,240,.52)}
  #pum-1279 .flm-brevo-input:focus{
    outline:none;border-color:var(--gold-light);background:rgba(255,255,255,.10);
  }
  #pum-1279 .flm-brevo-btn,
  #pum-1279 .flm-brevo-btn:hover,
  #pum-1279 .flm-brevo-btn:focus,
  #pum-1279 .flm-brevo-btn:active{
    background:var(--gold-light);color:#12203A;border:0;font-weight:600;
  }
  #pum-1279 .flm-brevo-btn:hover{background:#F0D8A0}
  #pum-1279 .flm-brevo-btn:disabled{opacity:.6}
  #pum-1279 #flm-brevo-msg{color:var(--cream)}
  #pum-1279 .flm-ok{color:var(--gold-light)}
  #pum-1279 .flm-err{color:#F0A88F}

  #pum-1279 .flmnote{
    margin:14px 0 0;font-size:12.5px;line-height:1.62;
    color:rgba(251,247,240,.66);text-align:center;
  }
  #pum-1279 .flmbody .flmnote:last-child{padding-bottom:26px}
  #pum-1279 .flmnote a{color:var(--gold-light);font-weight:500;text-decoration:underline}
  #pum-1279 .flmnote strong{color:var(--cream);font-weight:600}
  /* the theme's close button is dark-on-dark here */
  #pum-1279 .pum-close{background:rgba(251,247,240,.14);color:var(--cream);border:0}
  #pum-1279 .pum-close:hover{background:rgba(251,247,240,.26);color:var(--cream)}


  /* Same Substack label as the bio button, now also used in the film section.
     Generic (1,1,0) copies of the bio rules: .btn is inline-flex, so the label
     must be one flex item, and the brand name never breaks across lines. */
  #syil-home .btn .btn__label{display:block;text-align:center;line-height:1.3;text-wrap:balance}
  #syil-home .btn .btn__label .notranslate{white-space:nowrap}


  /* microtext under the film Substack button, matching .bio__micro. (1,3,0) so it
     beats #syil-home .film__grid > div > p, the section's body-copy rule. */
  #syil-home .film__grid p.film__micro{margin:10px 0 0;max-width:52ch;font-size:13.5px;
                                      line-height:1.55;color:var(--ink-soft)}


  /* testimonials heading. .voices carries margin-top:34px for when it followed
     .nofreq directly; under a heading that reads detached, so pull the cards up
     to the heading-to-content gap used elsewhere in the section. */
  #syil-home .voices__title{text-wrap:balance}
  #syil-home .voices__title .notranslate{white-space:nowrap}
  #syil-home .voices__title + .voices{margin-top:22px}


  /* no one-word last lines in the use cards ("moved." was stranding on phones) */
  #syil-home .use p,#syil-home .use span{text-wrap:pretty}


  /* "yours." was stranding alone on the last line on phones */
  #syil-home .nofreq p{text-wrap:pretty}


  /* "Additional meditations" - the heading over every meditation after Heart
     Healing. Heart Healing keeps its long description; the ones under this
     heading are rows only. (1,2,1) so the Elementor kit's h3 colour and size
     (.elementor-kit-12 h3) cannot restyle it. */
  #syil-home .med h3.med__group{margin:38px 0 12px;font-family:'Poppins',sans-serif;
    font-size:clamp(19px,2.2vw,22px);font-weight:600;line-height:1.3;color:var(--ink)}
  #syil-home .med__group + .meditem{margin-top:0}
  #syil-home .med__group ~ .meditem + .meditem{margin-top:12px}


  /* epc-arrows: prev/next buttons on the EnergyPhoto carousel, as in the landing
     page design - a dark translucent circle over the middle of the photos,
     hanging a little past the outer edges, faded at either end. Built by
     home.js. The vertical centre is the photo row (frame + caption), worked
     out from the carousel's own width with container units: frame width is
     half the width less the gap, height 1.5x that, caption ~25px. Browsers
     without container units keep top:40%. */
  #syil-home .epc{--epc-btn:clamp(36px,9vw,44px);container-type:inline-size}
  #syil-home .epc__nav,
  #syil-home .epc__nav:hover,
  #syil-home .epc__nav:focus,
  #syil-home .epc__nav:focus-visible,
  #syil-home .epc__nav:active{
    position:absolute;z-index:2;top:40%;
    top:calc(((100cqw - clamp(9px,2vw,20px)) / 2 * 1.5 + 25px) / 2);
    transform:translateY(-50%);
    width:var(--epc-btn);height:var(--epc-btn);padding:0;margin:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;cursor:pointer;
    background:rgba(24,34,46,.72);border:1px solid rgba(251,247,240,.24);
    color:var(--cream);box-shadow:0 10px 24px -12px rgba(0,0,0,.85);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    transition:background .18s ease,opacity .18s ease;
  }
  #syil-home .epc__nav--prev{left:calc(var(--epc-btn) * -.22)}
  #syil-home .epc__nav--next{right:calc(var(--epc-btn) * -.22)}
  #syil-home .epc__nav:hover:not([disabled]),
  #syil-home .epc__nav:active:not([disabled]){background:rgba(24,34,46,.92)}
  #syil-home .epc__nav[disabled]{opacity:.35;cursor:default}
  #syil-home .epc__nav svg{display:block;width:45%;height:45%}
  #syil-home .epc__nav:focus:not(:focus-visible){outline:none}
  #syil-home .epc__nav:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){ #syil-home .epc__nav{transition:none} }


  /* "The Foundation is new." - a short lead-in above the three programme blocks.
     (1,2,1) so Astra's .entry-content p margin cannot push it away from them. */
  #syil-home .found p.found__new{margin:0 0 16px;max-width:58ch;font-size:clamp(15.5px,1.4vw,17px);
    line-height:1.6;color:rgba(251,247,240,.72)}


  /* "techniques." and "collaborations." were stranding alone on desktop */
  #syil-home .prog p{text-wrap:pretty}


  /* gu-apply-popup: "Tell us about your work" (#1584) - WPForms #1355 inside the
     shared popup card (chrome lives in Additional CSS). The popup sits outside
     #syil-home, so every colour carries a hex fallback. Selectors start at
     #pum-1584 (1,x,x) so they outrank WPForms' own div.wpforms-container-full
     rules and Astra's blue button/focus states without piling on !important. */
  #pum-1584 .guapply__title{margin:0 0 4px;font-family:'Poppins',sans-serif;
    font-size:clamp(22px,3vw,26px);font-weight:600;line-height:1.25;letter-spacing:-.01em;
    color:var(--ink,#2A2522);text-wrap:balance}
  #pum-1584 .wpforms-container{margin:10px 0 0}
  #pum-1584 .wpforms-form .wpforms-field{padding:9px 0}
  #pum-1584 .wpforms-form .wpforms-field-label{margin:0 0 6px;font-family:'Poppins',sans-serif;
    font-size:14px;font-weight:600;line-height:1.4;color:var(--ink,#2A2522)}
  #pum-1584 .wpforms-form .wpforms-required-label{color:var(--terracotta,#B4553A)}
  #pum-1584 .wpforms-form input[type=text],
  #pum-1584 .wpforms-form input[type=email],
  #pum-1584 .wpforms-form textarea{
    width:100%;max-width:100%;box-sizing:border-box;
    padding:11px 14px;border:1px solid rgba(42,37,34,.22);border-radius:10px;
    background:#fff;color:var(--ink,#2A2522);box-shadow:none;
    font-family:inherit;font-size:16px;line-height:1.45;   /* 16px stops iOS zooming on focus */
    transition:border-color .15s ease,box-shadow .15s ease}
  #pum-1584 .wpforms-form input[type=text],
  #pum-1584 .wpforms-form input[type=email]{height:auto}
  #pum-1584 .wpforms-form textarea{min-height:120px;resize:vertical}
  #pum-1584 .wpforms-form input[type=text]:focus,
  #pum-1584 .wpforms-form input[type=email]:focus,
  #pum-1584 .wpforms-form textarea:focus{
    outline:none;border-color:var(--terracotta,#B4553A);box-shadow:0 0 0 3px rgba(180,85,58,.18)}
  #pum-1584 .wpforms-form label.wpforms-error,
  #pum-1584 .wpforms-form em.wpforms-error{color:var(--terracotta,#B4553A);font-size:13px}
  #pum-1584 .wpforms-form .wpforms-submit-container{padding:8px 0 0;margin:0}
  #pum-1584 .wpforms-form button[type=submit],
  #pum-1584 .wpforms-form button[type=submit]:hover,
  #pum-1584 .wpforms-form button[type=submit]:focus,
  #pum-1584 .wpforms-form button[type=submit]:focus-visible,
  #pum-1584 .wpforms-form button[type=submit]:active{
    height:auto;padding:13px 30px;border:0;border-radius:100px;
    background:var(--terracotta,#B4553A);color:var(--cream,#FBF7F0);box-shadow:none;
    font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;line-height:1.2;
    cursor:pointer;transition:background .18s ease}
  #pum-1584 .wpforms-form button[type=submit]:hover{background:var(--terracotta-deep,#9A4530)}
  #pum-1584 .wpforms-form button[type=submit]:focus:not(:focus-visible){outline:none}
  #pum-1584 .wpforms-form button[type=submit]:focus-visible{outline:2px solid var(--brand-gold,#C99A2F);outline-offset:3px}
  #pum-1584 .wpforms-confirmation-container-full{margin:14px 0 0;padding:16px 18px;
    border:1px solid rgba(95,115,85,.35);border-radius:12px;background:rgba(95,115,85,.10);
    color:var(--ink,#2A2522);font-size:15.5px;line-height:1.6}
  #pum-1584 .wpforms-confirmation-container-full p{margin:0}
  @media (max-width:560px){
    #pum-1584 .wpforms-form button[type=submit]{width:100%}
  }


  /* gu-apply-popup-2: brand touches and form states for #1584 */
  #pum-1584 p.guapply__eyebrow{margin:0 0 8px;font-family:'Poppins',sans-serif;font-size:12px;
    font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-gold,#C99A2F)}
  #pum-1584 p.guapply__intro{margin:6px 0 0;max-width:none;font-size:15.5px;line-height:1.6;
    color:var(--ink-soft,#5A4F48);text-wrap:pretty}
  /* WPForms' "large" textarea is 220px tall - more than a short note needs */
  #pum-1584 .wpforms-form textarea{height:140px;min-height:110px}
  /* a field that failed validation takes the error colour, not WPForms' red */
  #pum-1584 .wpforms-form input.wpforms-error,
  #pum-1584 .wpforms-form textarea.wpforms-error,
  #pum-1584 .wpforms-form input[aria-invalid="true"],
  #pum-1584 .wpforms-form textarea[aria-invalid="true"],
  #pum-1584 .wpforms-form .wpforms-has-error input,
  #pum-1584 .wpforms-form .wpforms-has-error textarea{border-color:var(--terracotta,#B4553A)}


  /* gu-apply-popup-3: after a successful send WPForms swaps the form for its
     confirmation. The invitation line above it no longer applies, so it steps
     aside and the thank-you sits right under the heading. */
  #pum-1584 .pum-content:has(.wpforms-confirmation-container-full) .guapply__intro{display:none}
  #pum-1584 .wpforms-confirmation-container-full p + p{margin-top:10px}